크롬(Chrome) 개발자도구, 검사

웹페이지 작업을 할 때 반드시 알아두어야 할 크롬(Chrome)의 개발자도구, 즉 검사기능이다.

크롬 개발자 도구에 대하여 많은 글들이 있다. 

하지만 전문성을 곁들여 설명을 하고 있어 대체로 처음 사용자에게는 어렵게 느껴진다.

여기에서는 크롬 개발자 도구에서 늘 사용하는 기능만 간단하게 소개하겠다.

크롬의 개발자도구는 F12, Ctrl+Shift+I, 마우스오른쪽 메뉴 '검사'로 실행할 수 있다.

크롬의 개발자 도구는 HTML 소스영역, 적용된 CSS 영역, 페이지의 에러메시지를 보여주는 Console 영역으로 삼분할되어 있다.

이미 이전 포스팅 반응형 테스트 (Responsive Tester), http://passauer1083.tistory.com/19

에서 소개한 바 있는 브라우저의 크기를 테스트할 수 있는 부분이 있다.

크롬의 개발자 도구는 화면을 분할하여 사용하도록 초기 설정되어 있다.

크롬의 개발자도구를 별도의 창으로 분리하여 작업하는 것이 효과적이다. 아래의 그림과 같이 화면 오른 쪽 위의 설정메뉴에서 개발자도구 화면을 분리하여 작업할 수 있다.

듀얼모니터를 사용한다면 아주 효과적이다.

HTML 영역에서 (1)번 영역에 마우스를 두면 웹페이지에 그 소스가 표시되는 부분(2)이 표시되고 CSS 영역(3)에 해당 부분에 어떤 CSS가 적용되고 있는 지 알 수 있다. 이때 CSS가 어떤 CSS 파일에 속해있는 지도 알 수 있다.

내가 만드는 웹페이지가 의도대로 만들어 지지 않는 경우 CSS나 HTML 소스의 어떤 부분을 수정하면 바로 잡을 수 있는지 알 수 있다.

웹페이지 작업 중 흔하게 범하는 실수는 <div>로 시작하면 </div>로 닫아줘야 하는데 </div>로 닫지 않았거나 하는 실수를 HTML 영역에서 찾아낼 수 있다.

CSS 영역에서는 CSS의 일부를 수정해보거나 CSS 구문을 추가하여 그 변화를 볼 수 있다.

이것은 단지 CSS 오류를 바로 잡을 때만 사용되는 것이 아니라 웹페이지의 효과적인 레이아웃 디자인을 위한 설계단계에서도 적용해볼 수 있다.

아래 그림에서는 'col-sm' class에 'height:250px;'을 추가해본 결과이다.

크롬의 개발자도구는 이보다 훨씬 많은 기능을 갖고 있다.

지금 설명한 부분은 웹개발자가 빈번하게 사용하는 기능만 소개한 것이다.

관심이 있는 분은 크롬 개발자도구에 대하여 좀 더 상세하게 공부해보는 것도 좋을 것이다.