DevTools #

Find similar titles

총 20회 업데이트 됨.

Edit

최초 작성자
가나파이 2019-07-26 00:50:48
최근 업데이트
Shin 2023-06-26 05:55:49

Structured data

Category: Programming

크롬 개발자 도구 (Chrome DevTools)

크롬 개발자 도구 (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와 함께 사용하여 품질 높은 페이지를 만드는데 참조하면 좋다.