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

Author:jarvis Hours 등록일 Hours 업데이트
공정위 광고 문구 Ver 3.1
공정위 광고 문구 Ver 3.2(모바일 전용)

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

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

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

  • [WP] 워드프레스 카테고리 vs 태그 차이와 SEO에 더 유리한 것은?

    Published:jarvis

    워드프레스라는 콘텐츠 관리 시스템(CMS)이며, 카테고리와 태그 2개의 방법으로 분류해서 그룹화 할 수 있습니다. 워드프레스 카테고리 vs 태그 주요 차이와 어떤 방법으로 사용하는 것이 SEO에 유리한지 알아 보도록 하겠습니다.. 1. 워드프레스 카테고리란? 카테고리는 콘텐츠를 정렬하는데 사용하며, 태그보다 큰 범주로 묶습니다. 주제를 하나로 묶는 역할을 한다고 볼 수 있습니다. 예를 들어 IT 주제의 사이트인 경우…

  • TrustPilot(트러스트파일럿):글로벌 리뷰 사이트

    Published:Mimir

    TrustPilot(트러스트파일럿)은 2007년 덴마크에서 세워진 리뷰 웹사이트입니다. 매월 100만 개의 리뷰가 게재되고 있습니다. 소비자는 구매한 제품의 경험에 대한 리뷰를 게시하게 되고 기업은 고객의 요구를 이해하고 제품 및 서비스 개선에 참고 자료로 활용할 수 있습니다. 1. TrustPilot 카테고리 다양한 제품에 대한 카테고리가 있습니다. 은행, 여행 및 보험, 보석 매장, 옷가게, 전자 및 미술, 공인중개사 등…

  • 크롬 개발자 도구 정의와 목적 5가지

    Published:i-var uknew

    크롬 개발자 도구란 웹 개발자와 디자이너가 웹사이트의 코드 구조, 성능, 반응형 디자인, 보안, SEO 품질을 점검·개선하기 위해 사용하는 크롬 브라우저 내장 기능입니다. 페이지 속도 측정, 디버깅, 네트워크·리소스 분석 등 웹사이트 품질을 높이는 모든 과정을 한 곳에서 수행할 수 있습니다. Ⅰ. 크롬 개발자 도구의 목적 크롬 개발자도구는 단순한 코드 확인 도구가 아니라, 웹사이트의 품질…

  • VPN 불법인가? 합법인가?

    Published:jarvis

    VPN 서비스를 이용한다면 내각 이용중인 VPN 불법인지? 아니면 합법이기 때문에 그대로 사용해도 되는지 궁금할 때가 있습니다. “내가 한국에서 성인 사이트를 들어가기 위해 VPN을 사용하는데 합법이었다고?” 란 의문을 품을 수 있습니다. 물론 접속하는 성인사이트가 법에 따라 불법일 수 있습니다. VPN 합법인 이유 VPN은 성인사이트 접속만을 위해 접속하지 않으며, OTT 서비스 중 넷플릭스와 디즈니+ 등의…

  • NameCheap DNS 설정 및 레코드 설정 방법

    Published:i-var uknew

    네임칩에서 도메인을 구매했다면, 원하는 회사 또는 네임칩의 기본 DNS 서버를 사용할 수 있습니다. 이 페이지에서 NameCheap DNS 서버 설정 방법을 안내합니다. 먼저 구매한 도메인의 관리 페이지의 도메인 리스트 탭으로 이동합니다. 맨 우측 관리 버튼을 클릭합니다. 1️⃣ NameCheap DNS 서버 설정 먼저 리디렉션 설정(NameCheap Basic DNS 기본 값)은 크게 필요하지 않고, 보통은 도착지가 www보다는…

  • [MS 365] 아웃룩 검색 방법 및 검색 오류 해결

    Published:jarvis

    아웃룩 검색 기능은 메일을 보낸 사람, 내용, 아웃룩 작업과 일정 등 다양한 항목을 찾을 수 있는 기능입니다. 아웃룩 검색 방법은 [Ctrl+E] 단축키로 키워드를 입력하면 관련 항목을 찾을 수 있습니다. 검색하는 키워드는 단어 외에도 문구를 입력할 수 있습니다. 1. 아웃룩 검색 방법 [Ctrl+E]를 눌러 [Search Console]이란 검색어를 입력했습니다. 구글의 서치 콘솔에서 온 메일들을 확인할…