[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

  • DOMContentLoaded vs Load: 웹 속도와 SEO에 미치는 영향

    Published:I-var uknew

    크롬 개발자도구에서 네트워크 탭의 속도 테스트를 진행할 때 표시되는 항목 중 DOMContentLoaded와 로드 두 가지 항목을 확인할 수 있습니다. 웹사이트의 속도를 측정할 때 이 두 이벤트는 단순한 수치가 아니라, 실제 사용자 경험과 SEO 평가에 직결되는 중요한 지표입니다. 특히 Google은 웹사이트의 초기 로딩 속도, 상호작용 가능 시점, 전체 페이지 로딩 완료 시점 등을 기준으로…

  • [WP] 워드프레스 페이지 빌더 vs 블록 에디터 5가지 차이

    Published:jarvis

    워드프레스 구텐베르크(Gutenberg) 블록은 블록 에디터입니다. 공식 블록 에디터가 출시된 이후 워드프레스 페이지 빌더(Page Builder)를 대체하는 방향으로 흐르지 않을까? 라는 의문을 워드프레스를 이용한 웹사이트를 운영한다면 누구나 가졌을 법한 의문입니다. 많은 사람들이 페이지 빌더를 버리고 블록 데이터(Block Editor)로 이동하게 될까요? 이 글에서는 여기에 대한 해답을 찾기 위해 각각의 차이점과 앞으로의 미래를 개인적인 의견으로 예측해 보겠습니다….

  • 네임칩 도메인 구매 및 연결 절차와 환불 정책

    Published:wilson

    도메인 등록 기관인 네임칩(Namecheap)은 .com 도메인을 신규 등록 시 $7.98, 연장 시 $13.98에 제공하고 있어 매우 합리적인 가격대를 보이고 있습니다. 이번 글에서는 네임칩 도메인 구매 방법과 환불 정책에 대해 자세히 알아보겠습니다. ※신규 구매 시 대부분 이벤트를 진행하고 있습니다. 신규 구매: $7.98 = 10,161.57 갱신 가격: $13.98 = 17,801.85 목차1. 크롬 개발자도구 기능1.1 요소Elements…

  • 무료 VPN 추천 TOP5&유료 TOP3 | VPN이란?

    Published:jarvis

    VPN이란 가상 사설망(Virtual Private Network)이란 뜻을 가지고 있으며, 공용 네트워크를 사용할 때 보호된 네트워크 연결 설정을 제공합니다. 주요 기능은 인터넷 트래픽을 암호화하여 온라인 상의 공용 네트워크 IP(공용 IP)를 보호하게 됩니다. VPN에 대한 정보와 가볍게 사용할 수 있는 VPN 종류 및 추천할 수 있는 무료 VPN에 대해 알아 보겠습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements…

  • |

    주민등록등본 발급 방법 4가지(인터넷 등본 발급 방법 포함)

    Published:jarvis

    일상에서 주민등록등본 발급이 필요한 경우가 많습니다. 이번에 인터넷 등본 발급 방법을 포함한 발급 방법에 대해 알아 보겠습니다. 목차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. 주민등록등본 발급 방법 1.1 정부24 비회원 발급-인터넷 등본 발급 정부24에서 비회원으로 발급이…

  • 구글 계정 로그아웃 하는 방법(PC&모바일)

    Published:jarvis

    구글의 지메일(Gmail), 즐겨찾기 항목, 유튜브 등을 공공장소에서 사용 후 그 PC에서 구글 계정 로그아웃을 하지 못한 경우 내 PC 또는 모바일에서 다른 기기 로그아웃을 진행할 수 있습니다. PC와 핸드폰에서 구글 계정 로그아웃을 하는 방법에 대해 알아 보겠습니다. 목차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….