최근 수정 시각 : 2024-12-01 11:20:30

브라우저 개발자 도구



1. 개요2. 명칭3. 역사4. 주요 기능
4.1. Inspector
4.1.1. 요소 선택4.1.2. CSS 디버깅
4.2. Console4.3. Source4.4. Network
5. 브라우저별 상세
5.1. FireFox5.2. Chrome
6. 파생 소프트웨어7. 관련 문서

1. 개요

Browser developer tools

웹 개발 및 디버깅에 사용할 수 있도록 웹 브라우저에 내장된 개발자 도구.

2. 명칭

브라우저 벤더별로 지칭하는 이름이 다르다 보니 통일성이 다소 낮은 편인데, 흔히 (web) browser developer tool 내지 web development tool[1]등으로 불리나, 후자의 경우 웹 개발 전반에 관련된 일반적인 개발자 도구와 혼동될 수 있어 전자로 불리는 편.

한국에서는 인터넷 익스플로러가 IE7 시절 디버그 패널을 처음 추가했을 때 [도구 > 개발자 도구] 메뉴로 진입할 수 있었기에 흔히 개발자 도구로 불린다. # #

언어 무관하게 웹 개발자에게 개발자 도구는 IDE를 제외하면 거의 대부분 본 항목을 지칭하므로 실무에서는 혼동의 여지 없이 devtool이나 개발자 도구, 개발자 툴 등으로 간단하게 부른다.[공식] 드물게 해당 툴을 접하는 일반인의 경우 Safari[3], Chrome 등 브라우저의 구버전 한글 메뉴 번역이나 자체 번역에서 유래한 '소스 보기'[4], '속성 보기', '디버그 콘솔' 등으로 부르기도 하며, 해당 도구를 여는 일반적인 단축키에 대응해서 'F12 창', 'F12 메뉴'로 지칭하기도 한다.

3. 역사

초창기 웹은 그저 HTML 문서일 뿐이라 디버깅의 개념조차 희박했고, 1995년 9월 최초 버전의 JavaScript(당시 LiveScript)가 넷스케이프 베타 버전에 내장되고 1996년 12월 CSS 표준 1이 도입된 후부터 서서히 효율적인 디버깅 툴의 수요가 생기기 시작한다.

그러나 이때도 그저 alert()[5][6][7]과 주석처리 등으로 원시적인 디버깅만 가능했을 뿐 현대적인 브라우저 개발자 도구의 실질적 시조는 Firefox의 확장 파이어버그로 본다.[8]

파일:venkman-debugger.gif

4. 주요 기능

이어질 내용을 읽기 전 아래 주의사항을 참고하자.
  1. 후술될 내용들에서 Chrome은 대부분의 경우 The Chromium Projects 및 이를 기반으로 하는 불특정 다수의 파생 브라우저를 대표한다.
  2. 현 시점 기준 개발자 도구의 양대산맥을 이루는 Firefox와 Chrome의 공통된 내용들 위주로 서술하고 차이점의 경우 해당 브라우저를 언급한다.
  3. 문단명의 경우, Firefox와 Chrome 개발자 도구에서의 명칭이나 순서를 적절히 혼용한다.
  4. 메뉴, 기능 등의 미세한 명칭 차이에 대한 서술은 원어(영어)를 1순위로 한다.

4.1. Inspector

파일:inspector-firefox.png
Firefox 예시

개발자와 일반인을 막론하고 가장 자주 쓰는 도구 1순위. 대부분의 브라우저에서 맨 앞쪽 탭을 차지하고 있다.

Firefox의 경우 inspector, Chrome의 경우 elements로 탭 이름이 다른데, 본 문서에서는 전자를 차용한다.

용도를 한마디로 정의하면 현재 보고 있는 페이지에 렌더된 DOM을 시각화하는 것으로, DOM을 이루는 요소가 크게 HTML과 CSS인 만큼 크게 DOM 요소(element) 트리 뷰와 CSS 스타일 디버깅 뷰로 나뉜다.

4.1.1. 요소 선택

화면에 렌더링된 임의의 요소를 시각적으로 선택할 수 있는 기능. 단축키는 Ctrl+Shift+C이다.

4.1.2. CSS 디버깅

4.2. Console

JavaScript REPL. 디버그 콘솔이라고 불리기도 하지만 정확한 의미의 디버거는 주로 소스 탭에서 실행한다.

크게 두 가지 용도로 쓰이는데,
  1. Web Console API를 통한 로깅 및 간단한 디버깅
  2. 전역 컨텍스트에서의 임의 코드 실행(arbitrary code execution)

전자는 #역사 문단에서도 알 수 있듯이 브라우저 개발자 도구가 탄생한 사실상 근원적 용도이기도 하고, 실무에서도 간단하게 디버깅할 때마다 습관처럼 쓰이는, inspect 탭 못지않는 사용 빈도를 자랑한다. 후자의 경우 임의의 객체(object)를 펼쳐서 내용을 보거나 간단한 코드를 테스트해보기 위해 사용하며, 실제로 높은 수준의 탭 자동완성을 지원한다. 다만 이름에서도 알 수 있듯이 취약점 털리기 딱 좋은(...) 기능이라 보안이 중요한 대부분의 웹사이트에서는 콘솔 탭을 열면 '모르는 사람이 코드를 여기 붙혀넣으라고 하면 신고해 주세요' 등의 경고문이 도배되어 있는 경우도 흔히 볼 수 있다.

4.3. Source

4.4. Network

5. 브라우저별 상세

Firefox가 원조이나, 크로뮴 기반 브라우저가 널리 퍼지면서 현재로써는 크게 두 종류의 개발자 도구가 쓰이고 있다.

5.1. FireFox

공식 소개 페이지

5.2. Chrome

Chrome 개발자 문서의 DevTools 페이지

Firefox가 엘리먼트와 CSS 디버깅이 강점이라면, Chrome은 세밀한 자바스크립트 디버깅이 특징이다. 이는 chrome devtool protocol, 약자로 CDP라 하는 자체 규격을 사용하기 때문인데, RFC로 등록된 web driver protocol에 비해 훨씬 복잡하고 더 미세한 manipulation이 가능하다. 흔히 Selenium과 Puppeteer를 동일선상에 두고 비교하지만, puppeteer가 훨씬 다양한 동작이 가능하고 크롬 확장 디버깅이 가능한 이유도 표준 규격이 아니라 CDP 프로토콜을 쓰기 때문이다. 다만 이 때문에 크로뮴 관련 브라우저밖에 실행할 수 없다는 단점이 있기도 하다. Node.js도 크로뮴 프로젝트의 V8을 쓰기 때문에, Node.js의 원격 디버깅은 크로뮴 호환 브라우저에서만 접속이 가능하다.

Lighthouse와 연동이 좋은 편. 정확히는 Lighthouse가 하나의 탭으로 내장되어 있다.

6. 파생 소프트웨어

일반 브라우저 개발자 툴은 바닐라 JavaScript를 디버깅하기 위한 용도이기 때문에 여러 프레임워크의 구조를 잘 드러내지 못한다는 단점이 있다. 그렇다고 브라우저 제조업체에서 일개(...) 프레임워크의 독자 형식을 위한 별도의 디버거를 매번 구현하거나 배포할 수는 없는 노릇이기 때문에 해당 프레임워크를 위한 전용(dedicated) 디버거를 해당 프레임워크 팀에서 별도로 개발해 브라우저 서드파티 확장으로 배포하는 일이 흔하다.

7. 관련 문서

[1] 유명한 예시로 위키피디아 표제어[공식] 공식 사용례. Firefox 공식 개발자 가이드 firefox-devtools Chrome 개발자 도구 페이지 chromedevtools Edge DevTools[3] 사파리의 경우 아직도 Web Inspector라는 명칭을 고집 중.[4] 동일한 동작을 하는 다른 기능과의 혼동을 위해 사용을 피하는 것이 좋다. 흔히 '소스 보기(view page source)'로 번역되는 기능은 Ctrl+U로, 서버에서 전송된 raw HTML(또는 기타) 코드를 보여주며, 동적으로 실시간 렌더된 DOM 트리를 보여주는 inspect 기능과는 조금 다르다.[5] 그렇다. console.log()에서 쓰는 그 console API조차 없었다. console API는 후술할 Firebug 확장의 비공식 전역 함수였다.[6] The standard way to debug a web application was using alert dialogs but this was very inefficient and limiting. Joe thought that maybe allowing people to log information to a simple panel could be useful. This is when the birth of modern web developer tools truly began. - The History of Firebug[7] They could place alert() boxes throughout their code to test JavaScript. This wasn't great though, because alerts cannot display complex objects like functions. Also until the alert box(es) are gone, no other tabs or windows can be used. - In a Land Before Dev Tools[8] One of the first browser debugging tools to exist was Mozilla's Firebug extension, which possessed many of the current core features of today's developer tools, leading to Firefox becoming popular with developers at the time. #

분류