DevTools
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
크롬 개발자 도구 (Chrome DevTools) #
개요 #
Google Chrome에 내장된 웹 저작 및 디버깅 도구이다. 크롬 개발자도구를 이용하여 사이트를 반복하고, 디버깅하고, profiling할 수 있다. 개발자 도구는 Chrome 뿐만 아니라 Internet Explorer, Firefox 등 대부분의 웹 브라우저에서 지원하는 기능이다. 요즘은 많은 웹 개발자가 웹 브라우저에서 실시간으로 웹 사이트를 분석해야 하는 필요가 있는 경우에는 주로 크롬 개발자도구를 사용한다.
사용방법 #
개발자 도구 열기 #
- Chrome 메뉴에서 도구 더보기 > 개발자 도구 선택
- 페이지 요소를 오른 클릭하고 검사를 선택
- 단축키
OS | 단축키 |
---|---|
Windows | Ctrl+Shift+I or F12 |
Mac | Cmd+Opt+I |
주요 기능 #
패널 | 기능 |
---|---|
Elements | HTML 코드를 분석할 수 있고 실시간으로 수정할 수 있는 도구 패널 |
Console | 로그를 확인할 수 있고 스크립트 명령어를 입력하는 패널 |
Sources | 자바스크립트를 디버깅하거나 소스 에디터 기능을 하는 패널 |
Network | 페이지를 표시하는데 필요한 네트워크 작업에 관한 결과를 시간 순서로 표시해주는 패널 |
Performance | 사이트의 일정 시간 동안 발생한 다양한 이벤트를 기록하고 탐색하는 패널 |
Memory | 메모리 사용 상태를 볼 수 있고, 누수를 탐색할 수 있는 패널 |
Application | 현재 로딩된 웹 페이지에서 사용된 리소스를 볼 수 있는 패널 |
Security | Mixed content 이슈, 인증서 문제 등을 디버깅할 수 있는 패널 |
Audits | 웹 어플리케이션의 성능을 향상할 수 있는 방법들을 확인할 수 있는 패널 |
기능 설명 #
Elements #
HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널이다.
DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트할 수 있다. 특히 변경된 사항들에 대해서는 웹 브라우저를 통하여 변경된 모습을 곧바로 확인할 수 있다.
특정 DOM의 변화에 중단점을 걸 수도 있다.
Console #
로그를 확인하고 스크립트 명령어를 입력하는 패널이다. 중단점을 건 시점의 변수를 체크할 수 있고 값을 평가하거나 수정할 수 있다. 실시간으로 자바스크립트를 실행하고, 에러 메시지 등을 출력해준다. 크롬 개발자 도구 내의 console은 Firefox의 plug-in인 firebug의 콘솔 API를 그대로 사용하고 있기 때문에 firebug문서(http://getfirebug.com/wiki/index.php/Command_Line_API)를 통해서 API 목록을 열람할 수 있다.
Sources #
중단점을 사용해 자바스크립트를 디버깅하거나 Workspace를 로컬파일에 연결하여 코드 에디터처럼 사용할 수 있다. 구성 - 파일 관리 창, 소스 에디터, 디버깅 관련 정보 창
Network #
페이지를 표시하는데 필요한 네트워크 작업에 관한 결과를 시간순으로 표시해주는 패널이다. 서버와의 통신 내역을 보여주는 패널로써, 보이지 않는 리소스를 찾을 때 사용한다. 특정 항목을 선택하여 해당 항목이 어떻게 요청되었는지, 어떤 응답을 받았는지를 상세하게 확인할 수 있다. 서버에 어떤 헤더를 지정하여 요청했는지, 응답으로는 어떤 헤더를 받았는지 확인하며 네트워크 최적화를 진행하는 데 좋다.
- 🔴 기록되고 있다는 뜻이며, 기록되는 동안 주고받는 모든 Network 요소를 보여준다. 클릭 시 기록을 멈출 수 있다.
- 🚫 클릭하면 기록된 모든 요소를 지운다.
- filter: 필터 기능
- 🔍 검색 기능
- Preserve log: 페이지가 이동되어도 로그가 사라지지 않는다.
- Disable cache: 브라우저의 캐시를 비활성화 한다.
Performance #
사이트의 일정 시간 동안 발생한 다양한 이벤트를 기록하고 탐색하여 페이지의 런타임 성능을 향상하는 패널이다. 녹화(Record) 버튼을 누른 뒤 작업을 진행하고, 정지하면 그사이에 발생한 자바스크립트의 작업 내역을 확인할 수 있다. 타임 라인에서 구간을 선택하고 어떤 함수 호출이 가장 많은 시간을 사용했는지, 또 어떤 흐름으로 작업을 수행했는지 등을 파악할 수 있다.
Memory #
메모리 사용 상태 를 볼 수 있고, 누수를 탐색할 수 있다.
Application #
현재 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트, 데이터 등)를 열람할 수 있는 패널이다. 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.
Security #
Mixed content 이슈, 인증서 문제 등을 디버깅할 수 있는 패널이다. 페이지의 인증서와 페이지에서 참조하는 도메인의 인증서 등을 검사하고 그 결과를 보여준다. 모든 사이트에 HTTPS 연결이 강조되므로 이 탭을 통해 페이지에서 참조하는 리소스에 대해서도 확인하는 것이 필요하다.
Audits #
웹 어플리케이션의 성능을 향상할 수 있는 방법들을 확인할 수 있는 패널이다. Lighthouse를 통한 페이지 검사 결과를 표시하고 저장할 수 있다. 기본적인 페이지의 성능과 PWA, SEO, 접근성과 관련된 점수를 제공하기 때문에, Page speed와 함께 사용하여 품질 높은 페이지를 만드는데 참조하면 좋다.
유용한 설정 #
- 개발자도구의 테마 색상을 변경한다. Dark / Light 두 종류가 있다.
- 소스를 열었을 때 자동으로 소스의 경로상 위치로 navigator를 펼친다.
- 새로 고침 시에 캐시를 참조하지 않도록 설정한다.
- 로그 좌측에 발생한 시간을 표시한다.
- 자동완성을 제공한다.
- 새로 고침 시에 기존 로그를 지우지 않도록 설정한다.
- 현재 페이지의 JavaScript를 비활성화한다.
- Mobile 모드, Desktop 모드로 적용한다.
- 단축키를 열람한다.
참고 #
Chrome DevTools : [ https://developers.google.com/web/tools/chrome-devtools/ ]
크롬 개발자 도구 101: [ https://lqez.github.io/blog/chrome-dev-tool-101.html ]
생활코딩 : [ https://opentutorials.org/course/580 ]
크롬 개발자 세팅 : [ https://jamesdreaming.tistory.com/111 ]