구글 크롬 '요소검사' 기능, 사이드바, 위젯개발에 짱!

엊그제 레뷰 이웃 위젯 만들다 이미지 틀어지고 여백 수정안되는 문제 때문에 짜증이 났었다.

분명 여백도, 패딩도 다 0으로 했는데 들어갔다 나왔다 난리였다. iframe으로 처리하면 좀 나으련만 내가 레뷰서버 주인이 아니라 접속해서 코드를 심어놓을 수도 없고, 그냥 블로그 태그위젯에 코드를 다 떼려넣는 수 밖에 없었다.

그러다 보니 블로그자체에서 정의된 스타일이 계속 상속이 되어 설정된 되로 되질 않고 이랬다 저랬다. 그래서 처음부터 끝까지 필요한 속성들을 다 스타일로 정의하다 보니 그 위젯하나 만들면서 스타일 코드가 길어져 버렸다.

그렇게 씨름한 것도 사실 크롬의 요소검사(inspect element) 기능을 써서 빨리 끝이 났다. 요소 검사 기능은 간단히 말하며 현재 보고 있는 페이지 소스가 어떻게 되어있는지, 어떤 리스소 (이미지, 동영상, 스크립트, 스타일 파일 등)들이 포함되어 있는지 하는 기본적인 것에서부터, 리소스별 로딩 속도, 리소스 추적 등 웹 페이지 디자인 및 디버깅에 관한 아주 편한 기능들을 제공해 준다. 다시한번 구글 소프트웨어에 경의를.

현재 페이지에서 마우스 오른쪽 버튼을 누르면 요소검사(Inspect Element) 라는 기능이 제일밑에 보이는 데 그 기능을 누르면 위 그림처럼 요소검사창이 열린다. 언제 업데이트 되었는지 모르겠는데, 이전에는 별도의 창으로 열렸었다. 직접 써보니 저렇게 같은 창에 있어야 훨씬 버그를 잡긴 쉬운 것 같다. 위 그림은 요소검사창에서 현재 선택된 라인에 해당되는 코드가 웹페이지 어디에 표시되는 가를 보여준다. 내가 만든 위젯에 대한 코드를 선택하니 위젯이 선택되었다. 그리고 선택된 부분에 대한 스타일 정보를 상세히 알려준다.

작성한 코드를 아래 레벨로 들어가서 살펴본 화면. HTML 태그 하나 하나 다 잡아주기 때문에 작은 부분의 실수를 만회할 수 있다. 오른쪽 하단에서 보는 것처럼 상속된 스타일중 어떤 것이 적용되었고 어떤것이 다시 정의되었는를 볼 수 있다. 그렘에서는 블로그 이름이 <a>태그 안에 있는데, 일반 링크처럼 보이지 않게 하기 위해 다시 정의해서 글자 색과 링크 밑줄을 없앴다.

리소스 보기 화면, 어떤 리소스가 이 페이지에 포함되어 있고, 로딩 시간이 얼만큼 걸리는 가를 표시해 준다.

뿐만 아니라 현재 페이지가 참조한 (현재 페이지에 포함되어 있지 않더라도) 스타일시트나 스크립트 파일을 열어 검토할 수 있게 해준다. 맨날 노트패드에 복사해서 붙여서 검사했었는데, 저렇게 프로그램개발툴처럼 읽기 쉽게 해노니 너무 좋다.

물론 이미지도 볼 수 있다.

이번 레뷰 위젯 개발에도 큰 도움이 되었지만. 일반 사이드바 위젯 설정할 때도 좋을 듯 하다. 사이드바에 누구나 위젯을 가져다 붙이는데 가끔 패딩이나 마진이 설정되어 있는 위젯들이 있는 경우가 있다. 블로그와 스타일 충돌인 경우도 있고, 내 블로그와 어울리지 않는 스타일을 쓰고 있을 수 있다.

그런 경우 크롬의 요소검사 기능을 이용해서 아주 세밀한 부분까지 깔끔하게 정리해보심이 어떨지!

+소스를 해당 서버에서 가져오는 위젯들은 아무리 발버둥쳐도 고칠수 없긴 하다 ㅠ.ㅠ 예를 들면 링크프라이스 .