크롬 개발자 도구 사용법 (DevTools)

by

원본: 크롬 개발자 도구 가이드

프론트 엔드 개발자나 테스터로서 작업 시 웹 애플리케이션의 버그를 찾고 수정하는 작업은 쉬운 일이 아닙니다. 왜냐면 API 호출이나 불확실한 사용자 상호 작용 때문에 예기치 않은 오류가 발생하기 때문입니다.

하지만 요즘 나오는 최신 브라우저에는 오류를 디버깅할 수 있는 개발자 도구를 함께 제공하고 있습니다.

개발자 도구를 사용하면 개발자와 테스터가 실행 중인 웹 페이지의 HTML/CSS, 자바스크립트를 디버깅할 수 있습니다. 또한 브라우저를 통해 DOM 요소를 직접 수정할 수도 있습니다.

가장 유명한 브라우저 중 하나인 크롬에는 Chrome Developer Tools (DevTools)라는 내장된 개발자 도구가 있습니다.

이 포스트에서는 웹 애플리케이션을 디버깅하고 테스트하기 위한 크롬 개발자 도구의 사용 방법을 알아보겠습니다.

크롬 개발자 도구 란?

Chrome Developer Tools 또는 DevTools는 구글 크롬 브라우저에 내장된 웹 개발 도구입니다.

이는 코드 검사, 편집, 디버깅, 페이지 성능 측정 등을 할 수 있습니다.

개발자 도구 접근 방법

크롬의 개발자 도구를 열려면 다음 세 가지 방법을 사용할 수 있습니다:

  • 가장 쉬운 방법은 키보드 단축키를 이용하는 것 입니다. 키보드의 F12 키 또는 윈도우에서 Ctrl + Shift + I, 맥에서 CMD + Option + I
  • 브라우저 우측 상단의 점 세개 버튼으로 브라우저 메뉴를 열고 도구 더보기 – 개발자 도구 선택
  • 웹 페이지에서 우 클릭 후 검사 항목 선택

개발자 도구 구성 요소

개발자 도구 예제

위의 이미지에서 보이는 바와 같이 크롬 디버거에는 아홉개의 패널이 있습니다. 이 패널들은 모두 다른 디버깅 작업을 담당합니다.

다음은 각각의 패널이 담당하는 내용입니다:

  • Elements: HTML 요소와 CSS 스타일 속성을 검사하고 수정
  • Console: 로그와 자바스크립트 코드 실행
  • Sources: 자바스크립트 수정, 디버그, 브레이크 포인트 등의 기능 담당
  • Network: 네트워크 관련 활동 보기 및 디버깅
  • Performance: 웹 페이지 로딩 속도 분석 및 최적화
  • Memory: 메모리 사용 추적, 메모리 관련 문제 해결
  • Application: cookies, localStorage, sessionStorage, IndexDB 등 담당
  • Security: 인증서 및 기타 보안 문제 디버깅
  • Lighthouse: 웹 애플리케이션 및 웹 사이트의 SEO, 성능, 품질, 접근성 등 감사

Elements

이 패널을 사용하면 개발자가 웹 페이지의 HTML 및 CSS를 검사하고 수정할 수 있습니다. 또한 브라우저에서 직접 코드를 수정하고 해당 변경 사항이 웹 페이지에 즉시 반영되는 것을 볼 수 있습니다.

개발자와 테스터는 주로 Elements 패널을 사용하여 HTML 구조 또는 웹 페이지의 디자인을 실험합니다.

기능으로는 컬러 피커, 반응 형 화면 크기 변경, CSS 편집기, 레이아웃 분석기, 애니메이션 빌더, 이벤트 리스너 및 룰러가 있습니다.

개발자 도구 Elements 사용 예제

웹 페이지의 구성 요소를 검사하거나 수정하려면 왼쪽 상단의 선택 도구 아이콘을 클릭하거나 단축키 Ctrl + Shift + C 또는 CMD + Shift + C를 눌러 선택합니다.

이 기능을 누른 상태에서 웹 페이지의 요소를 선택하면 Elements 패널에 해당 요소와 스타일이 표시됩니다.

요소가 표시되면 요소의 속성이나 스타일을 수정하거나 추가, 삭제 등의 작업을 할 수 있습니다.

변경 사항은 페이지에 즉시 반영되지만 소스 파일에는 영향을 주지 않습니다.

Console

Console 패널은 웹 사이트에서 출력한 로그를 확인하거나 자바스크립트 코드를 실행하는 데 사용합니다.

이 패널을 열려면 개발자 도구 실행 후 Console 패널 탭을 클릭합니다.

Console 패널 예제

여기에서 변수 값을 실시간으로 검사하는 것이 가능합니다.

개발자와 테스터는 다양한 console.log() 구문을 스크립트에 추가하여 사용자의 활동에 따른 로그를 확인할 수 있습니다.

Sources

소스 코드 또는 번들 출력을 Sources 패널에서 확인할 수 있습니다. 이 패널은 주로 복잡한 자바스크립트 디버깅에 사용됩니다.

여기서는 소스 파일에 브레이크 포인트를 설정하고 변수나 해당 값을 보고 디버깅을 할 수 있습니다.

Sources 패널 사용 예제

위의 이미지에서 보듯이 Sources 패널은 세 개의 주요 컴포넌트로 구성됩니다:

  • 왼쪽의 File Navigator 창에는 HTML, CSS, 자바스크립트 등의 파일 트리를 나타냅니다.
  • 가운데 창은 Code Editor 입니다. 여기에는 네비게이터에서 선택된 파일의 소스 코드가 표시됩니다.
  • 오른쪽의 디버깅 창은 자바스크립트 코드의 디버깅에 사용합니다.

Network

Network 패널은 주로 네트워크를 사용하여 업로드되거나 다운로드된 요청을 보여줍니다.

이 창에서는 페이지에 로드된 모든 리소스의 목록을 볼 수 있습니다. 이 목록 그래프로 각각의 리소스에 대한 자원 및 API 성능을 볼 수 있습니다.

이를 통해 Fetch/XHR, js, css, 이미지, 동영상, 폰트 등 웹 페이지의 네트워크 성능을 확인할 수 있습니다.

Network 패널 예제

웹 페이지의 요청 횟수, 전송된 총 데이터 크기, 로딩 시간 등 네트워크 관련 활동을 모니터링 할 수 있습니다.

이러한 정보를 통해 개별 리소스와 웹 페이지를 최적화 할 수 있습니다.

Performance

여기서는 페이지 로드 성능을 측정할 수 있습니다.

성능 분석을 실행하면 웹 페이지가 표시되는 데 걸리는 시간, 로드할 리소스 등 페이지 로드 프로세스에 대한 다양한 매트릭을 생성합니다.

기록 버튼과 새로고침 버튼을 사용하여 웹 페이지의 성능 분석을 시작할 수 있습니다.

Performance 패널 예제

위의 이미지와 같이 호출 스택, 시간을 잡아먹는 기능, 쓰레드, TTI(Time To Interactive) 딜레이 등의 메트릭을 확인할 수 있습니다.

각각의 기능을 선택하면 해당 기능과 관련된 모든 종류의 정보가 제공됩니다.

특정 기능이 얼마나 오래 실행되는지와 어떤 기능이 실행되는지 등을 확인할 수 있습니다.

Memory

이 패널에서는 웹 페이지의 메모리 소비에 대한 여러 정보를 제공합니다.

구성 요소, 스냅 샷, 힙 할당, 기록 할당 타임라인 등으로 메모리 사용을 검사할 수 있습니다.

이는 메모리 누출, 가비지 컬렉팅과 같은 메모리 관련 문제를 감지하고 수정합니다.

Memory 패널 예제

위의 화면은 웹 페이지의 자바스크립트 인스턴스가 사용하는 총 힙의 크기를 요약하여 보여줍니다.

스냅 샷 찍기 버튼을 클릭하면 웹 페이지의 자세한 메모리 사용 데이터를 생성할 수 있습니다.

Memory 패널에서는 세 가지 프로파일링 유형을 선택할 수 있습니다:

  • Heap Snapshot
    이는 가장 일반적으로 사용하는 메모리 프로파일링 타입으로서 특정 시점의 자바스크립트 힙의 스냅 샷을 얻을 수 있습니다. 스냅 샷에서 웹 페이지의 DOM 요소 간의 메모리 분포를 볼 수 있습니다.
  • Allocation instrumentation on time
    이 프로파일링 타입은 스크롤링이나 웹 페이지 상호작용 동안 DOM 요소들의 메모리 분포를 제공합니다.
  • Allocation Sampling
    이는 프레임, 문서, 웹 워커, 그래픽 레이어와 같은 개별 페이지 구성 요소의 메모리 소비 지도를 보여줍니다. 이 프로파일 링 타입으로 높은 메모리 소비의 원인을 알아볼 수 있습니다.

Application

매니페스트 파일, 서비스 워커, 쿠키, localStorage, sessionStorage 등을 검사하고 편집하고자 할 때 Application 패널을 사용합니다.

이 패널은 주로 localStorage 및 API를 사용하는 프로그레시브 웹 앱을 검사하는 데 사용합니다.

Application 패널을 통해 개발자는 저장소, 캐시, 데이터베이스를 관리할 수 있습니다.

Security

모든 네트워크 요청에 대한 보안 정보가 Security 패널에 표시됩니다.

이 패널에서는 네트워크 요청을 통해 수집된 데이터가 안전한지 알아볼 수 있습니다. 웹 사이트 또는 네트워크 요청이 안전한 경우 녹색 자물쇠 아이콘이 표시됩니다.

또한 Security 패널에서는 네트워크 요청과 전체 웹 사이트의 SSL 인증서를 볼 수 있습니다.

여기서는 다음의 정보를 제공합니다:

  • Certificate: 웹 사이트가 TLS 인증서로 인증했는지 여부
  • Connection: 최신의 안전한 프로토콜을 사용하는 TLS 연결인지 여부
  • Resources: 불안전한 HTTP 하위 소스(mixed content)를 로드하는지 여부

Lighthouse

Lighthouse 보고서는 웹 사이트의 성능, 속도 및 전반적인 경험을 분석하는 무료 오픈 소스 도구입니다. 이는 추가적인 플러그인 없이 웹 사이트를 감사할 수 있게 해줍니다.

이를 통해 웹 사이트의 SEO, 성능, 접근성, 코드의 모범 사례 및 프로그레시브 웹 앱을 평가할 수 있습니다.

또한 다양한 설정으로 모바일 및 데스크탑의 간단한 사이트 부터 복잡한 사이트에 이르기 까지 모든 타입의 사이트에 유연하게 적용할 수 있습니다.

개발자 도구 Lighthouse 사용 예제

위의 이미지와 같이 웹 사이트 감사는 시뮬레이션 연결에 대해 100점 만점의 점수 시스템으로 보고서를 생성합니다.

개발자 도구 사용 예시

크롬 개발자 도구는 더 나은 웹 사이트를 개발할 수 있도록 다양한 시나리오에서 사용할 수 있습니다.

다음은 일반적인 사용 사례 입니다:

  • 반응형 페이지 체크
    가장 일반적인 용도는 웹 사이트의 응답성 체크입니다. 자유로운 화면 크기 조정과 미리 정의된 크기를 사용하여 뷰포트 모습을 관리할 수 있습니다. 이 기능은 Elements 패널에서 사용할 수 있습니다.
  • 스타일 추가
    기존 웹페이지의 디자인을 개선할 때 개발자 도구를 사용할 수 있습니다. 레이아웃, 크기, 색상 또는 디자인을 고칠 경우 CSS를 수정하고 이 수정이 화면에 잘 보이는지 확인할 수 있습니다.
  • 웹 사이트의 문제 식별
    이 도구를 사용하여 사이트의 버그와 문제점을 알아낼 수 있습니다. API 요청 및 응답, 자바스크립트 소스 파일, HTML 파일을 검사할 수 있습니다. 웹 사이트를 개선하기 위해 페이지의 성능을 분석하고 감사할 수도 있습니다.
  • 작동하지 않는 플러그인 찾기
    대부분의 웹 사이트는 써드파티 플러그인과 위젯에 의존합니다. 분석 도구, 폼, 팝업, 채팅 등의 기능이 제대로 작동하는지 추적이 필요합니다.

개발자 도구 정리

이 포스트에서는 개발자 도구를 사용하여 웹 애플리케이션을 테스트하고 디버깅하는 방법을 알아봤습니다.

또한 개발자 도구를 어떤 상황에서 사용하는지에 대한 몇 가지 사용 사례도 알아봤습니다.