[개발자 도구] 크롬 개발자 도구 활용법 (1)

▤ 목차

개발 시 크롬 개발자 도구에서 설정할 수  유용한 기능들과 Sources  - Console - Elements - Application - Lighthouse - Performance - Memory - Network 패널 기능들을 정리해보려고 한다.

1. 크롬 개발자 도구 설정

다양한 패널 기능들을 사용하기 전에 개발자 도구에서 세팅할 수 있는 유용한 기능들을 알아보려고 한다.

개발 시 알아두면 편리한 기능들 위주로 정리해 봤다.

1.  창모드 선택

원하는 창모드 선택

우측 버튼을 클릭하여 개발자 도구 위치를 지정할 수 있다.

Dockside 순서대로 창모드, 왼쪽에 배치, 아래 배치, 오른쪽 배치이다.

2.  디바이스 모드 선택

디바이스 모드 클릭

원하는 기기 선택

디바이스 모드는 모바일 브라우저 개발을 지원하는 기능으로 다양한 기기를 테스트 해볼 수 있다.

반응형 화면, 모바일 화면 개발을 고려해야 한다면 해당 기능을 통해 모바일 화면을 확인해 볼 수 있다.

디바이스 모드 클릭시 선택한 기기 화면 규격으로 세팅되며, 버튼을 한 번 더 클릭하면 해제된다.

세팅

디바이스 추가

만약 더 다양한 기기를 테스트 해보고 싶다면 세팅에서 원하는 Devices를 추가하면 된다.

3.  캐시 미사용(Disable Cache) 선택

Disable cache

개발 중 js, css를 수정했을 때, 변경사항이 이전 캐시 때문에 바로 적용이 안 되는 경우가 종종 있다.

이를 해결하기 위해 새로고침을 하거나 했지만 캐시 미사용(Disable cache) 옵션을 켜면 브라우저가 웹 페이지를 로드할 때 캐시된 리소스를 절대 사용하지 않고 항상 서버에서 새로 다운로드해서 가져온다.

즉 캐시를 꺼두면 무조건 서버에서 새로 받아오니 “최신 상태”를 확인할 수 있다.

4.  로그(Preserve log) 선택

Preserve log

Preserve log를 사용하면 개발 중 웹페이지가 refresh 되거나 다른 페이지로 이동해도 기록된 로그 내용이 사라지는 걸 방지할 수 있다.

즉 Preserve log를 체크하면 로그가 사라지지 않고 유지되어서 refresh 해도 지난 로그를 확인할 수 있다.

5. 콘솔 타임스탬프(Timestamps) 선택

Timestamps 선택시 콘솔에 로그가 남은 시간을 알 수 있다.

2. 크롬 개발자 도구 기능

1. Sources

📌 자바스크립트 코드 확인 & 중단점을 활용한 디버깅

Sources는 운영 중인 웹페이지의 실제 소스코드를 확인할 수 있는 메뉴이다.

Sources

자바스크립트 디버깅을 위해 특정 위치를 선택하여 breakpoint를 지정하여 소스를 테스트 해볼 수 있다.

자세한 방법은 챕터2에서 정리해보려고 한다.

2025.07.04 - [프로젝트 경험] - [개발자 도구] 크롬 개발자 도구 활용법 (2)

[개발자 도구] 크롬 개발자 도구 활용법 (2)

2. Console   

📌 자바스크립트 실행 & 디버깅

Console은 자바스크립트로 개발하고 디버깅할 때, 사용되는 메뉴이다.

Console

자바스크립트 개발 시 에러가 나서 실행이 정상적으로 안된다거나, 실행 중에 변수의 값을 확인해 보기 위해 사용된다.

3. Elements   

📌 HTML , CSS 확인 & 스타일 검사 및 편집 가능

Elements은 웹 페이지의 HTML 구조, CSS 스타일, 그리고 DOM(Document Object Model)을 실시간으로 검사하고 편집할 수 있는 메뉴이다.

Elements

왼쪽 상단의  요소 선택 버튼을 클릭 후 웹페이지의 검사하고자 하는 요소를 선택하면

아래 그림과 같이 선택한 요소에 대한 태그와 class명이 표시가 되고, 해당 요소에 적용된 스타일은 개발자 도구의 오른쪽 창의 Styles 탭 하단에 CSS 스타일이 표시된다. 

각각의 class 별로 적용된 스타일이 표시되고, CSS 우선순위 적용 규칙에 의해 적용되지 못한 스타일은 중간에 취소선이 함께 표시된다.

만일 제거해보고 싶은 스타일이 있거나, 적용해고보고 싶은 스타일이 있는 경우, 해당 스타일을 styles에 적용이 가능하다.

위 그림은 구글 검색창에 height 500px를 적용해 본 예시이다.

단 새로고침하면 원래대로 돌아오게 된다.

4. Application 

📌 로컬 데이터 확인, 인증 토큰 확인

Application 메뉴는 웹 애플리케이션이 클라이언트 측(브라우저)에 저장하는 데이터 및 자원을 확인하고 관리할 수 있는 메뉴이다. 

Local Storage / Session Storage

Local Storage / Session Storage는 웹 브라우저에 저장된 key-value 형태의 데이터로 주로 로그인 상태, UI 설정 등을 저장하고 있다.

cookeies

cookeies는 서버와 클라이언트 간의 정보를 저장하는 작은 데이터 조각으로 주로 인증 정보, 사용자 식별 등에 사용된다.

Application 메뉴는 아래의 정보를 확인할 때 효과적이다.

• 로그인 세션이 유지되는 방식 확인 (예: 쿠키 또는 LocalStorage에 JWT 저장 여부)
• 로그인 토큰이 만료됐을 때 다시 저장되는지 테스트
• 오프라인 캐시 동작 확인
• 웹사이트에 저장된 사용자 설정 값 조회 및 수정

5. Lighthouse 

📌 성능, 접근성, SEO(검색엔진 최적화) 등 다양한 항목을 점수와 개선 제안

Lighthouse 메뉴는 웹 페이지의 품질을 자동으로 분석하고 평가하는 메뉴이다.

Lighthouse

• Performance (성능) : 콘텐츠가 얼마나 빨리 표시되고 사용자는 얼마나 빠르게 해당 콘텐츠를 인식하는지 검사
• Accessibility (접근성) : 웹 애플리케이션의 접근성을 검사 
• Best Practices (모범 사례) : 웹에 대한 표준 모범 사례를 따르고 있는지 검사 (콘솔에 오류 출력, 사용하지 않는 API 호출, HTTPS 체크 등) 
• SEO (검색 엔진 최적화) : 검색 엔진에 대해 최적화된 순위 결과를 가지고 있는지 검사

https://velog.io/@dell_mond/Lighthouse-%EC%82%AC%EC%9A%A9%EB%B2%95

Lighthouse 사용법

6. Performance

📌 웹사이트의 런타임 성능(실행될 때의 성능)을 확인

Performance 메뉴는 웹사이트의 로딩, 렌더링, 자바스크립트 실행 등 모든 과정을 타임라인에 기록해서 성능을 확인하는 메뉴이다.

Performance

Performance 분석을 위해 페이지 동작을 녹화하면 아래 그림처럼 분석결과를 나타내준다.

7. Memory 

📌 메모리 사용량, 메모리 누수(Leak), 객체 할당 상태를 분석

Memory 메뉴는 웹사이트의 메모리 사용량, 메모리 누수(Leak), 객체 할당 상태를 분석하고 최적화하는 데 사용하는 메뉴이다.

Memory

• Heap Snapshot : 객체가 어디서 메모리를 차지하는지 알고 싶을 때, 누수를 추적할 때 사용
• Allocations on timeline  : 시간 흐름에 따라 객체 할당이 어떻게 증가하는지 추적하고 싶을 때 사용
• Allocation sampling  : 전체 메모리 프로파일링이 필요할 때, 함수별 메모리 할당 통계를 간단히 보고 싶을 때 사용

8. Network 

📌 웹 성능, API 통신, 리소스 로딩 문제를 점검

Network 메뉴는 웹사이트의 모든 네트워크 요청(HTML, JS, CSS, 이미지, API 등)을 상세히 기록하고 분석하는 메뉴이다.

Network

Rest API 호출 결과를 확인하려면, Type이 톡 또는 fetch인 호출을 선택하면, 상세 호출 내용을 확인할 수 있다.

fetch

Headers 탭에서는 호출 URL과 Method, 응답 상태 코드를 확인할 수 있다.

Headers

Preview와 Response 탭에서는 응답 결과를 확인할 수 있다.

Preview는 가공된 서버의 응답 결과를 , Response는 서버의 응답 결과를 그대로 표시한다.

Preview

Response

 

 

https://jamesdreaming.tistory.com/111

[ 크롬 개발자도구 ] 설정 (Settings) 사용하기

잘못된 내용이 있다면 지적부탁드립니다. 방문해주셔서 감사합니다.