개발자 도구는 웹 브라우저에서 문서 구조, 스타일, 프로그램 실행과 통신 상태를 살피는 도구 모음이다. 웹 페이지가 어떻게 만들어지고 작동하는지 들여다볼 수 있다.
- 검사 기능으로 문장이나 이미지를 선택하면 관련 HTML 요소와 적용된 CSS를 확인할 수 있다. 보이는 색이나 간격을 잠시 바꾸어 차이를 살피기도 한다.
- 검사 창에서 바꾼 내용은 보통 현재 웹 브라우저에만 적용된다. 원본 파일을 고치거나 서버에 저장한 것이 아니므로 새로고침하면 사라질 수 있다.
- 네트워크 화면은 이미지·폰트·문서의 요청과 응답을, 콘솔은 메시지와 자바스크립트 오류를 보여준다. 낯선 코드를 붙여 넣어 실행하는 공간으로 쓰지 않는다.
- 웹 브라우저가 구성한 DOM 트리와 처음 내려받은 HTML 원문은 자바스크립트 실행 뒤 서로 달라질 수 있다.