[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

  • Windows10 hosts 파일 수정

    Published:i-var uknew

    ‘Windows10 hosts 파일 수정’은 보통 서버 이전이나 계정 이전 작업 후 DNS 레코드를 변경하기 이전에 이전 된 서버로 작업이 잘 이루어졌는지 미리 확인할 필요가 생긴다.일일이 DNS 서버 A레코드를 수정하여 확인하는 방법은 너무 번거롭기 때문에 hosts 파일을 수정하여 테스트 하는 게 좋은 방법 중 하나 이다.호스트는  DNS(도메인 이름 시스템)에서 제공하는 정보 없이 호스트 파일에…

  • [GA4] 구글 애널리틱스 데이터 설정-수집 및 보관 설정

    Published:jarvis

    애널리틱스 GA4 계정 및 데이터 스트림을 생성했다면 ‘애널리틱스 데이터 설정’과 ‘내부 IP 제외’를 해서 통계를 보다 정확히 볼 수 있도록 하는 것이 필수 설정이라고 할 수 있습니다. 세 번째로 ‘추천 트래픽’을 제외 시키는 방법에 대해 알아 보겠습니다. 1. 애널리틱스 데이터 설정 1.1 GA4에서 데이터 수집하는 항목 이해 애널리틱스에서 데이터를 수집하는 항목은 다음과 같습니다….

  • GA4 페이지뷰 오류: 방문하지 않은 페이지의 조회수가 잡히는 원인

    Published:jarvis

    구글 애널리틱스 GA4에서 방문한 적 없는 페이지의 페이지뷰가 잡히는 현상을 추적한 기록입니다. GA4 페이지뷰 오류 현상으로 인해 추측 로딩과 사이트 코드를 먼저 의심했지만, 실제 원인은 모바일 브라우저에 열어둔 채 잠들어 있던 탭이 복귀 시 다시 로딩되면서 페이지뷰를 발생시킨 것이었습니다. 특정 페이지에 들어갈 때마다, 열지도 않은 다른 페이지의 조회수가 GA4에 같이 찍히는 일이 있었습니다….

  • [SEO] robots.txt 정의 | 구글 or 네이버에서 유효성 검사하기

    Published:jarvis

    Robots.txt란 웹 마스터가 웹 로봇(보통 검색 엔진 로봇)에게 웹 사이트 페이지의 크롤링 방법을 지시하기 위한 텍스트 파일입니다. robots.txt 웹 사이트의 루트 파일에 위치하고 있어야 합니다. 이 파일은 로봇이 웹을 탐색하고 콘텐츠에 접근하며 해당 콘텐츠를 사용자에게 제공하는 방법을 제어하는 웹 표준인 로봇 배제 프로토콜(REP:robots exclusion protocol)의 일부입니다. 로봇 배제 프로토콜(REP)에 의해 모든 봇이 지침을…

  • 웹 성능 최적화: 구조와 정의

    Published:i-var uknew

    사용자 경험(UX), 검색 엔진 최적화(SEO), 전환율, 그리고 사이트 유지 비용까지 – 웹 성능은 단순히 ‘사이트 속도 향상’이 아닌 적용된 이후의 여러가지 효과에 복합적인 영향을 주는 핵심 요소입니다. 일반 웹사이트 그리고 워드프레스와 같이 다양한 테마와 플러그인이 공존하는 환경에서는, 성능 저하의 원인을 파악하고 그에 맞는 최적화 기법을 적용하는 것이 필수입니다. 이 글은 웹 성능 최적화를…

  • [SEO] 애드센스를 이용한 효과적인 수익 창출을 하는 3가지 유형 웹사이트

    Published:wilson

    구글 애드센스(Google AdSense)는 광고주가 구글 애즈에서 광고를 올리면, 블로그, 포럼 사이트 등에서 애드센스 광고를 올려 수익을 창출하는 구조입니다. 애드센스를 이용한 효과적인 수익 창출을 하는 3개 웹사이트에 대해 알아 보겠습니다. 높은 CPC(클릭당 비용)이 발생하는 웹사이트는 어느 점에서 차이가 있을까요? 지속적이며 높은 수익을 낸 3가지 유형의 사이트입니다. 이 글은 구글 애드센스의 참고자료 웹페이지에서 참조 했습니다….