Chrome 개발자 도구 사용 방법

개발자 도구 

- 웹 페이지를 파악하기 쉽도록 구조를 보여주는 도구

- HTML/CSS/JS 등 웹 페이지의 요소 내용, 에러 로그, 네트워크 통신 정보 등을 확인할 수 있다.

- 디버깅을 하거나 통신상 발생한 특이사항을 열람할 수 있다.

- 개발자가 웹 개발 및 열람 시 유용한 기능이다.

 

개발자 도구를 사용하는 방법

(1) 우측 상단 설정(세로 점 3개) 클릭 - 도구 더보기 - 개발자 도구 선택

개발자 도구 기능을 확인할 수 있다.

(2) 단축키 사용(운영체제 별로 다르다.)

윈도우 : Ctrl + Shift + i /F12

맥 :  Alt + Cmd + i

 

개발자 도구 켜서 사용하기

TECTIT 사이트에서 개발자 모드를 켜보았다.

코드에 커서를 가져다 대면, 각 코드가 화면 상의 어떤 영역을 담당하고 있는지 알 수 있다. 또한 각 요소가 어떤 html 파일로 이루어져 있는지도 알 수 있다. style영역에선 css 관련 정보를 알 수 있다.

 

개발자 도구에서 코드를 수정하면, 현재 본인이 사용하고 있는 브라우저 상에서 수정된 코드대로 변화된 상태를 확인할 수 있다. 당연하지만 서버에는 반영되지 않는다. 본인이 보고 있는 브라우저에만 해당된다.

 

작성 참고 자료 :

https://techit.education/