[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

  • [SEO] 구글 서치 콘솔이란 무엇인가? | 기본 용도 및 기능

    Published:jarvis

    블로그를 포함한 인터넷 전자상거래, 회사 소개 웹 사이트 등 모든 종류의 웹 사이트의 중요한 목적은 웹 사이트의 웹 트래픽을 늘리는 것입니다. 전 세계 검색 시장의 높은 점유율을 차지하고 있고 앞으로도 유지할 것으로 보이는 구글에서 운영 중인 구글 서치 콘솔(Google Search Console)은 무엇인지 알아 보겠습니다. Google Search Console이란 웹 마스터가 색인에서 웹사이트의 상태를 모니터링…

  • 구글 애드센스 수익 계좌 등록 및 지급(100$부터 출금)

    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 버튼으로 개발자…

  • 내 브라우저 해상도 크기 확인하기:해상도 확인 사이트

    Published:macbeth

    사용하는 PC 및 모바일 내 브라우저 해상도 크기 확인이 필요할 때가 있습니다. 모니터 별 다양한 디바이스 크기가 있으며 우선 대표적인 3가지 디바이스 크기입니다. 크롬 브라우저에서 이 페이지에 접속하면 목차 1.에서 접속한 디바이스(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…

  • [Chrome] 크롬 개발자도구 실행과 한국어 변경 방법

    Published:jarvis

    구글에서 만든 크롬 브라우저는 개발을 도와주는 ‘크롬 개발자도구’가 있습니다. 개발자 도구(Developer tools)를 이용해서 HTML, CSS, JavaScript의 생산성을 높일 수 있습니다. 개발자를 위한 도구이지만 글자 크기, 색, 간격과 같은 값을 확인할 수도 있고 웹사이트의 속도를 PC뿐만 아닌 모바일 버전으로도 확인할 수 있는 장점이 있습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4…

  • [Search Console] 구글 서치 콘솔 웹사이트 삭제 방법 및 페이지 삭제 방법

    Published:jarvis

    구글 서치콘솔에 등록된 웹사이트를 운영하더라도 2차 도메인 미 설정 등으로 삭제해야 하는 경우가 있을 수 있습니다. 구글 서치 콘솔 웹사이트 삭제 방법에 대해 알아 보겠습니다. example.com < 삭제해야 하는 도메인 www.example.com < 사용할 도메인 목차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 버튼으로 개발자…

  • HTML5 기본 구조: 기본 템플릿 코드 및 태그별 역할

    Published:jarvis

    웹페이지를 만드는 기본 뼈대인 HTML은 지난 수십 년간 발전해 왔습니다. 초창기 HTML은 단순한 문서 구조화에 집중했지만, 점차 복잡한 웹 애플리케이션과 멀티미디어 콘텐츠가 등장하면서 기존 버전의 한계가 명확해졌습니다. 이러한 문제를 해결하고자 등장한 최신 표준이 바로 HTML5입니다. HTML5는 시맨틱 구조를 강화하고, 비디오·오디오 같은 멀티미디어 요소를 플러그인 없이 지원하며, 다양한 웹 API를 내장해 현대 웹 환경에…