크롬 개발자도구 사용법

얼마 전, HTML 편집기 NOTEPAD++ 다운 방법 및 사용법에 대해서 포스팅했는데요, 웹사이트를 개발할 때 이런 HTML 편집기를 사용하여 코드를 작성한 후 브라우저에서 확인하고 수정할 부분이 있으면 다시 편집기로 수정하는 작업을 반복하여 웹사이트를 개발할 수 있습니다.

그러나 해당 방법으로 코드를 만들게 되면 아무래도 시간이 많이 소요되고 불편한 부분이 있겠지요?? 그래서 웹사이트를 개발할 때는 브라우저에 포함된 개발자 도구를 이용하여 소스를 수정하고 즉시 브라우저 화면에서 결과를 확인할 수 있어야 합니다.

익스플로우, 파이어폭스, 크롬 등 각 브라우저는 각각의 브라우저 개발자 도구를 갖추고 있습니다. 그중에서 오늘은 크롬 개발자도구 사용법에 대하여 알아보도록 하겠습니다.

크롬 개발자도구 사용법

▲ 개발자 도구는 크롬 브라우저에서 도구 더 보기 -> 개발자 도구를 선택하여 열 수 있습니다. (단축기 F12 를 클릭하여 바로 띄울 수 있습니다.)

▲ 그럼 개발자 도구가 화면 왼쪽 또는 하단에 위치하여 보일 텐데요, 별도의 창으로 분리하여 보려면 위와 같이 Dock side 부분에서 undock into separate window 버튼을 클릭해주시면 됩니다.

▲ 크롬 브라우저 개발자 도구에서 반응형 웹 디자인을 확인하는 방법이 있습니다. 위와 같이 toggle device toolbar 버튼을 클릭한 후 원하는 디바이스를 선택해주면 됩니다. (단축기 ctrl + shift + m 을 클릭하여 바로 실행할 수 있습니다.)

▲ 특정 HTML 소스에 사용된 CSS 코드를 알아보는 방법도 간단합니다. 알고자 하는 코드를 클릭하면 STYLE 시트에서 선택한 코드의 CSS 정보가 나타납니다. 원본 소스를 수정하지 않고도 바로 브라우저 화면에서 결과를 확인할 수 있는 기능입니다.

이상, 크롬 개발자도구 사용법에 대해서 알아보았습니다. 도움이 되셨길 바라요 ^ ^