[Chrome] 크롬 개발자도구 기능 개요

Author:jarvis Hours 등록일 Hours 업데이트

크롬 개발자도구의 주요 기능은 웹 개발자가 웹사이트의 코드 테스트 및 디버그 작업을 할 수 있습니다. 파이어폭스, 마이크로소프트 엣지, 크롬 등 웹 브라우저에는 크롬처럼 ‘웹 개발 도구(Web development tools)’가 포함되어 있습니다. 크롬 개발자도구 기능은 개발자에게 유용한 도구임이 분명합니다. ‘devtools‘이라는 줄임말로 많이 사용되고 있습니다. 

※디버그(debug)
디버깅 or 디버그는 컴퓨터 프래그램 개발 중 발생하는 시스템의 버그를 찾고 수정하는 작업입니다.

1. 크롬 개발자도구 기능

1.1 요소Elements panel

Chrome devtools은 브라우저에 내장되어 웹페이지의 요소 검사에서 HTML과 DOM 뷰어와 편집기를 사용할 수 있습니다. 요소 검사를 이용해서 HTML과 DOM을 변경하고 페이지의 변경 사항을 테스트 해 볼 수 있습니다. 요소에 있는 CSS를 수정해서 개발 작업 전에 변경된 내용을 확인할 수 있습니다.

크롬 개발자도구 기능 요소

1.2 콘솔Console panel

자바스크립트 코드를 브라우저에서 테스트 할 수 있습니다.

1.3 소스Sources panel

HTML, CSS, JS 등의 코드를 디버그 합니다.

1.4 네트워크Network panel

또 네트워크 패널을 이용해 웹페이지의 이미지, 스크립트, 글꼴 등 외부 파일 형식 콘텐츠를 로드하고 이에 따른 로딩 시간 및 대역폭 사용량을 알 수 있습니다.

크롬 개발자도구 네트워크 패널 이용 방법
네트워크 패널-네트워크 로그

1.5 성능Performance panel

퍼포먼스를 이용해 웹 사이트의 성능을 테스트 할 수 있습니다.

1.6 메모리Memory panel

사용되는 메모리의 형태 작성 후 메모리 누수를 확인할 수 있습니다.

1.7 애플리케이션Application panel

쿠기와 스토리지 등 애플리케이션에 관련 데이터를 수집합니다.

1.8 보안Security panel

HTTPS의 유효한 연결 설정과 제공되는 리소스 등의 문제를 디버깅 할 수 있습니다.

2. F12 버튼으로 개발자 도구가 열리지 않을 때

F12 버튼으로 크롬 개발자도구가 열리지 않을 때 [Ctrl]+[Shift]+[I]를 눌러서 실행할 수 있습니다. 그래도 안된다면 크롬 브라우저 우측 상단 [더보기] 메뉴에서 실행 시킬 수 있습니다.

크롬 개발자도구가 열리지 않을 때

Similar Posts

  • [Google] 크롬 홈 버튼 설정하는 방법

    Published:wilson

    구글 검색을 사용하기 위해 크롬 브라우저를 사용하는데 크롬 홈 버튼 설정이 되어 있지 않아 불편할 때가 있습니다. 개인적으로 홈 버튼 설정 시 우측 상단에 Gmail과 유튜브 및 구글 드라이브 등의 다양한 기능을 한번만 클릭해서 사용할 수 있기 때문에 홈 버튼 설정을 선호합니다. 개인적으로 다크 모드를 좋아하기 때문에 크롬 화면은 기본 다크 모드로 설정되어…

  • HTTPS란? SSL/TLS 보안인증서 개요 및 차이점

    Published:jarvis

    HTTPSHyperText Transfer Protocol Secure란 월드와이드웹(WWW)의 통신 프로토콜인 HTTP의 보안이 강화된 프로토콜 버전입니다. 통신의 인증 및 암호화를 위해 넷스케이프 커뮤니케이션즈 코퍼레이션에서 개발한 넷스케이프 웹 프로토콜이 HTTPS입니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8 보안Security panel2. F12 버튼으로 개발자 도구가 열리지 않을 때 HTTPS를 이용하는 SSL 보안인증서 SSLSecure Socket Layer은…

  • [GA4] 구글 애널리틱스 서치 콘솔 연결 방법

    Published:jarvis

    구글 애널리틱스에서 구글의 서치 콘솔(Google Search Console)을 연결해서 사용할 수 있습니다. 애널리틱스 서치 콘솔 연결이 필요한 이유는 어떤 검색어로 유입되었는지 확인하는 것 뿐 아니라 검색 결과 페이지 노출 수와 순위, 노출 수 대비 순위 등을 알 수 있기 때문입니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8…

  • 캐싱 개념과 분류: 웹사이트 성능 최적화 | 원리와 활용 | 서버 측 캐시 5가지와 클라이언트 캐시

    Published:I-var uknew

    사이트 성능 최적화란 사용자에게 더 빠른 로딩 속도와 쾌적한 경험을 제공하기 위해 웹 자원과 서버 구조를 효율적으로 관리하는 작업입니다. 이를 위해 일반적으로 캐싱, 파일 최적화, 전송 최적화, 서버 최적화 네 가지 핵심 전략이 활용됩니다. 캐시를 통해 반복되는 데이터를 저장하고, 파일 최적화를 통해 CSS·JS·이미지 등의 용량을 줄이며, 전송 최적화에서는 압축과 CDN, HTTP/2 등을 활용해…

  • [GA4] 애널리틱스 기본 보고서와 라이브러리 활용 맞춤 보고서 만들기

    Published:jarvis

    웹사이트와 앱 분석을 위한 GA4 보고서를 도입했지만 용어와 설정 방법 등에서 데이터 활용 방법을 어떻게 할지 고민할 수 있습니다. ‘GA4 애널리틱스 기본 보고서’의 유형에 대해 알아 보겠습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8 보안Security panel2. F12 버튼으로 개발자 도구가 열리지 않을 때 1. GA4 애널리틱스…

  • [SEO] google 유용한 콘텐츠(업데이트 2022년 8월 25일)

    Published:wilson

    2022년 8월에 google 유용한 콘텐츠 업데이트는 검색엔진 용 콘텐츠를 먼저 설정하는 것이 아닌 사용자 중심 콘텐츠를 만드는 것에 집중할 수 있도록 하고 있습니다. 구글 자체 검색엔진 최적화 가이드 및 권장사항을 따르지 말아야 한다는 것이 아닌 사용자에게 초점이 맞춰진 콘텐츠 여부에 중점을 둔 것이라 할 수 있습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console…