[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

  • SEO URL 구조: Google의 URL 구조 권장 사항

    Published:jarvis

    검색엔진최적화를 위한 URL 구조로 웹사이트를 운영하는 것은 구글의 URL 구조 권장 사항에서 확인할 수 있습니다. SEO URL 구조를 올바른 방법으로 만들어야 하는 이유와 구글의 권장 사항에 대해 알아보겠습니다. SEO 친화적인 URL은 짧고 키워드가 풍부한 것이 특징입니다. 1. 구글의 URL 권장 사항 구글은 퍼센트 인코딩 규약에 정의된 RFC 3986에 URL을 지원합니다. 자세한 내용과 예시는…

  • 저작권 없는 무료 이미지 다운로드 사이트 추천 LIST 35+@-라이선스 확인

    Published:wilson

    블로그나 상업용으로 이미지를 사용해야 하는데 저작권 때문에 유료 이미지를 사용하지만 유료 이미지 사이트를 사용하는 것에는 한계가 있습니다. 예를 들어 한 달에 발행하는 뉴스·블로그 글이 이용하는 유료 이미지 사이트의 이미지 수를 초과하는 경우입니다. 저작권 없는 무료 이미지 사이트를 같이 사용하는 방법을 고려할 수 있습니다. 무료이미지 상업용 사용 조건 등은 어떻게 되는지 확인해 보겠습니다. 스톡…

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

    Published:jarvis

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

  • 카카오톡 엑셀 테마 설정 방법(PC버전)

    Published:macbeth

    윈도우 PC에서 카카오톡 엑셀 테마 설정 방법에 대해 알아보겠습니다. 사무실 PC로 엑셀 테마를 쓰시는 직장인 분들도 많이 계실텐데 완벽한 위장은 아니더라도 일 하는 것처럼 보이는 설정 방법입니다. PC에서 카카오톡 엑셀 테마 설정 먼저 좌측 하단 톱니바퀴 모양의 설정을 클릭해 주세요. ▼ ⓐ 회면 탭 클릭 해 줍니다. 엑셀 스타일을 체크 해 주세요. 하단에…

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

    Published:jarvis

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

  • POP3 IMAP 차이점은 무엇인가요?

    Published:jarvis

    이메일 프로토콜 시스템 POP3 IMAP 차이점은 무엇일까요? POP3(Post Office Protocol version 3)의 경우 TCP/IP 기반으로 이루어진 프로토콜로 메일 서버에서 수신한 이메일을 컴퓨터로 가져오기 위해 사용 됩니다. POP3는 원래 컴퓨터 한 대에서만 사용하도록 설계된 오래된 프로토콜입니다. IMAP((Internet Message Access Protocol)와 같이 양방향 동기화 통신을 사용하는 최신 프로토콜과 달리 POP3는 일방향 전자메일 동기화만 지원이 됩니다. 1….