[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] 키워드 리서치를 통한 키워드 선정 전략 5가지

    Published:jarvis

    블로그를 포함한 웹 사이트를 운영할 때 주제 선정은 매우 중요한 요소 중 하나입니다. 이유는 구글봇이 내 웹 사이트의 텍스트와 키워드 등을 크롤링합니다. 전략적인 키워드 리서치를 통해 내 웹 사이트의 유기적인 트래픽을 만들기 위한 키워드 선정 방법 5가지에 대해 생각해 봤습니다. 구글의 입장에서 웹 사이트와 웹 페이지 내에서 근접(Relevant)한 웹 사이트를 노출 시키고 싶을…

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

    Published:jarvis

    VPN 서비스를 이용한다면 내각 이용중인 VPN 불법인지? 아니면 합법이기 때문에 그대로 사용해도 되는지 궁금할 때가 있습니다. “내가 한국에서 성인 사이트를 들어가기 위해 VPN을 사용하는데 합법이었다고?” 란 의문을 품을 수 있습니다. 물론 접속하는 성인사이트가 법에 따라 불법일 수 있습니다. 목차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…

  • [SEO] Google Sandbox time period란?

    Published:wilson

    WordPress, Wix, Drupal 등의 CMS를 이용해서 웹 사이트를 만들거나 직접 웹 사이트를 만들어 유효한 SEO 전략을 사용했지만 원하는 웹 페이지가 구글 첫 페이지에 나오지 않는 경우가 있습니다. 이유는 “Google Sandbox time period” 때문일 수 있습니다. 공식적으로 Google에선 ‘Google Sandbox’를 인정하지 않지만 이와 같은 현상은 검색 엔진에 적용된다는 사실입니다. 구글에 새로운 사이트를 서치 콘솔에…

  • [SEO] 페이지 권위(Page Authority)란 무엇인가?

    Published:jarvis

    검색엔진최적화를 위한 여러가지 항목 중 ⓐ도메인 권한과 ⓑ페이지 권위(or 페이지 권한)이란 용어가 존재합니다. SEO 기업으로 유명한 Moz에서 개발한 웹사이트 채점 결과 1~100까지 나타내 주는 순위입니다. 구글을 포함한 검색 엔진에서 순위가 어느 정도인지 가늠할 수 있는 측정 항목으로 사용되며, 페이지 권한(Page Authority) 점수가 높을수록 구글 첫 페이지에 콘텐츠가 표시될 확률이 높아집니다. 검색 엔진 결과…

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

    Published:I-var uknew

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

  • 월 $16.5의 Envato Elements 저작권 | 일반 유료 사이트와 차이점은?

    Published:jarvis

    엔바토 엘리먼트 정기 구독은 월 $16.5 금액으로 원하는 사진, 그래픽, 비디오, 웹 사이트 템플릿 등을 무제한으로 사용할 수 있는 서비스입니다. 유튜버나 워드프레스 블로그를 운영하는 분들이 양질의 사진을 정기 구독 기간 동안 무한정으로 사용할 수 있는 Envato Elements 저작권은 어떤 조건을 가지고 있는지 알아 보도록 하겠습니다. 이미지나 비디오를 직접 구매하는 것이 아닌 구독으로 이용하는…