크롬을 사용하는 큰 이유중 하나가 강력한 개발자 도구(요소 검사) 기능이 있기 때문이다. 이는 화면상의 HTML태그와 그에 해당하는 속성들을 볼 수 있고 CSS까지 보여준다. 그리고 개발자 도구상에서 속성을 수정하여 실시간으로 화면에서 변경된 모습을 볼 수 있다. 브라우징을 하다가 F12를 클릭하면 볼 수 있다.

그런데 사용하면서 불편한 한가지는 가뜩이나 작은 모니터의 하단에 개발자 도구가 나타난다는 것이다. 그것도 브라우저 화면의 1/3정도 보이도록 되어서 굉장히 보기가 답답하다. 하지만 아래 그림의 빨간 버튼을 누르면, 개발자 도구가 새 창으로 뜬다.

개발자 도구 새창으로 띄우기


그러면 넓은 화면에서 창을 전환해 가면서 분석작업을 할 수 있다. 그리고 팁 또 한가지는, 위 화면에서 파란 버튼을 누르고 브라우저로 커서를 가져가 오브젝트별로 선택하면 해당 태그들을 볼 수 있다. 말로 설명은 힘드니 한번 해보는 것이 낫겠다.

저작자 표시 비영리 변경 금지
신고
Posted by Life 스토리