1. 개요
웹 개발 및 디버깅에 사용할 수 있도록 웹 브라우저에 내장된 개발자 도구.2. 역사
초창기 웹은 그저 HTML 문서일 뿐이라 디버깅의 개념조차 희박했고, 1995년 9월 최초 버전의 JavaScript(당시 LiveScript)가 넷스케이프 베타 버전에 내장되고 1996년 12월 CSS 표준 1이 도입된 후부터 서서히 효율적인 디버깅 툴의 수요가 생기기 시작한다.그러나 이때도 그저
alert()[1][2][3]과 주석처리 등으로 원시적인 디버깅만 가능했을 뿐 현대적인 브라우저 개발자 도구의 실질적 시조는
Firefox의 확장 Firebug로 본다.[4]3. 주요 기능
3.1. Inspect
3.2. Console
3.3. Source
3.4. Network
4. 브라우저별 상세
Firefox가 원조이나, 크로뮴 기반 브라우저가 널리 퍼지면서 현재로써는 크게 두 종류의 개발자 도구가 쓰이고 있다.4.1. FireFox
4.2. Chrome
5. 관련 문서
[1]
그렇다.
console.log()에서 쓰는 그 console API조차 없었다. console API는 후술할 Firebug 확장의 비공식 전역 함수였다.
[2]
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
[3]
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
[4]
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.
#