브라우저별 디버깅 도구 확인
크롬
열기
windows
- Ctrl + Shift + i
- Ctrl + Shift + j: 콘솔열기
mac
- Cmd + Opt + i
- Cmd + Opt + j: 콘솔열기
Elements Panel
페이지 소스보기(동적변경 포함) 및 Elements 트리 내의 모든 구성요소를 보여주고 조작 가능합니다.
Computed
브라우저 내부의 계산된 모든 수치 데이터를 보여줍니다.
Styles
요소별로 스타일을 보여주고 조작 가능합니다.
Event Listeners
요소의 이벤트 흐름을 알 수 있습니다.
Dom Breakpoints
요소 속성 수정시에 중단점을 걸어확인 가능합니다.
Properties
요소 속성을 보여주고 조작 가능합니다.
Network Panel
페이지 요청에 따른 리소스 상세 내역을 타임라인으로 확인가능합니다.
Sources
각 파일별로 소스 내역을 확인할 수 있으며, 중단점 삽입 및 디버깅이 가능합니다.
Watch Expressions
JS 표현식을 사용하여 디버깅시 값을 확인할 수 있습니다.
Call Stack
디버깅 시에 함수 호출 스택을 보여줍니다.
Scope variables
디버깅 시에 현재 스코프 변수들을 보여줍니다.
BreakPoints
디버깅 시에 중단점을 겁니다.
DOM Breakpoints
DOM 디버깅 시에 중단점을 겁니다
XHR Breakpoints
XHR요청에 중단점을 겁니다.
Event Listener Breakpoints
이벤트 리스너에 중단점을 겁니다.
Timeline Panel
페이지 성능에 관한 고급 내역을 보여줍니다.
Profiles Panel
페이지에 포함된 js함수의 CPU사용 및 메모리 분포 내역을 리포팅합니다.
Resources Panel
페이지의 모든 리소스들을 여러 분류로 보여줍니다.
Frames
페이지에 로드된 모든 리소스들을 보여줍니다.
Databases
생성된 HTML5 WebDB를 확인합니다.
Local Storage
생성된 로컬 스토리지를 확인합니다.
Session Storage
생성된 세션 스토리지를 확인합니다.
Cookie
생성된 쿠키값을 확인합니다.
Application cache
생성된 AppCache 값을 확인합니다.
Auduits Panel
페이지를 검사하여 그에 따른 최적화 방안을 제시합니다.
Console
페이지의 모든 구성요소에 대한 디버깅을 console 명령으로 쉽게 접근할 수 있습니다.
인터넷 익스플로러
인터넷 익스플로러는 7버전까지는 개발자 도구를 지원하지 않았습니다. 그래서 따로 Developer Toolbar를 받아서 사용했다고 나와있습니다.
아래 개발자도구는 IE11기준으로 작성했습니다.
개발자 도구 열기
단축키: F12
DOM 탐색기 도구
브라우저에서 랜더링되는 웹페이지 구조를 보여주고, HTML 및 스타일을 변경할 수 있습니다. 원본을 편집하고 다시 로드하지 않고 바로 내용을 확인할 수 있습니다.
요소창
현재 생성된 DOM이 표시됩니다.
요소선택, 요소편집, 요소이동 등의 일을 할 수 있습니다.
스타일 창
스타일 탭
요소에 적용된 스타일의 특성을 보여줍니다.
스타일 편집을 적용할 수 있습니다.
추적 탭
요소 스타일의 원본을 추적합니다. windows 8.1 update에서 computed 탭과 결합되었습니다.
computed 탭
정밀한 계산과 암시적 값 및 기본값 설정을 수정할 수 있는 것을 제외하면 추적탭과 동작이 같습니다.
레이아웃
요소의 상자모델 정보를 확인하고 수정할 수 있습니다.
이벤트
이벤트 핸들러가 할당된 내역과 그 이벤트 핸들러가 정의된 파일을 보여줍니다.
변경 내용
지금까지 변경한 내용을 보여줍니다.
콘솔 도구
콘솔의 명령줄을 사용하여 콘솔 디버깅 API를 사용하여 정보를 가져오고 조작할 수 있습니다.
디버거 도구
코드에서 수행하는 작업, 작업을 수행하는 시간 및 방법을 검사합니다.
중단점 설정하여 시뮬레이션을 할 수 있습니다.
네트워크 도구
웹 페이지 로드 및 작업과 관련된 네트워크 요청의 세부 정보를 제공합니다.
UI응답성 도구
페이지 속도가 느려질 때 수행 중인 작업을 확인하는데 도움이 됩니다.
프로파일러 도구
자바스크립트 속도 측정 도구로 세션중에 호출된함수와 호출 횟수, 완료하는데 걸린 시간을 알려줍니다.
메모리 도구
메모리 사용을 추적하여 메모리 사용증가 위치와 증가 이유 등을 알려줍니다.
애뮬레이션 도구
다양한 화면크기 및 하드웨어 기능에서 웹페이지가 실행되는 방식 및 사용자 에이전트 문자열에 응답하는 방식을 테스트할 수 있습니다.
파이어폭스
파이어폭스의 기능중 탐색 및 디버깅관련 기능만 소개합니다.
개발자도구 열기
F12
웹 콘솔
웹페이지의 로그 메세지를 확인하거나, 자바스크립트를 사용하여 페이지와 상호작용합니다.
페이지 인스펙터
페이지의 HTML과 CSS를 보거나 수정할 수 있습니다.
자바스크립트 디버거
페이지의 자바스크립트 실행을 멈추거나, 단계별로 검사 혹은 수정할 수 있습니다.
네트워크 모니터
페이지를 로드 할 때 어떤 네트워크 요청이 일어나는지 확인할 수 있습니다.
개발자 도구
개발자 도구를 위한 커맨드라인 인터페이스입니다.
3D 뷰
페이지를 3차원으로 시각화하여 보여줍니다.
아이드롭
페이지에서 색상을 선택할 수 있습니다.
iframe 작업
컨텐츠가 어떤 iframe에서 표시될지 결정할 수 있습니다.
사파리
개발자도구 열기
F12
리소스
문서, 스크립트 및 이미지를 비롯해 웹 페이지 리소스에 대한 자세한 데이터를 확인할 수 있습니다.
타임라인
네트워크 요청, CSS 렌더링 및 자바스크립트 이벤트와 같은 활동을 열린 웹페이지에 표시합니다.
디버거
디버거 탐색 사이드바를 사용하여 웹페이지에 발생한 자바스크립트 오류의 원인을 찾을 수 있습니다.
콘솔
웹페이지를 점검하고 디버그하는 방법을 제공합니다.
참고자료
크롬개발자 도구
크롬개발자 도구 사용법
IE67용 개발자 도구
Internet Explorer 개발자 센터
MDN 개발자도구
apple 개발자용 safari