[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

  • 무료 로고 자동 제작 사이트 6개

    Published:jarvis

    워드프레스 등으로 홈페이지를 직접 만들 경우 로고를 만드는데 많은 시간을 할애할 수 있습니다. 추가 비용 없이 ‘무료 로고 자동 제작 사이트’ 6곳에 대해 정리해 봤습니다. 네이버 블로그 등에서 티스토리 블로그 등의 글을 그대로 복사해서 짜집기해서 막상 들어가 보면 무료가 아닌 유료 로고 사이트이거나 SSL 인증서가 설치되지 않은 사이트인 경우가 있었습니다. 최소한의 로고 제작…

  • 아이폰 저전력모드 설정/해제 2가지 방법

    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 버튼으로 개발자 도구가 열리지 않을 때1. 아이폰 저전력모드 단점(기능…

  • [Chrome App-PC] 세이프 브라우징 설정 방법

    Published:wilson

    Google의 데스크탑 및 모바일 앱인 Chrome 세이프 브라우징은 유저가 위험한 웹사이트를 탐색하는 중 위험한 파일을 다운로드 하려고 할 때 사용자에게 경고하는 구글의 서비스입니다. 랜섬웨어, 스파이웨어, 바이러스, 웜 및 트로이 목마를 포함한 맬웨어 등의 감염을 사전에 방지할 수 있도록 해 주는 서비스인 것이죠. 크롬 브라우저를 사용하던 중 빨간 화면의 안내 창을 본 적이 있을…

  • 구글 애널리틱스 서치콘솔 연결 방법

    Published:jarvis

    구글 애널리틱스 서치콘솔 연결 시 사용자가 어떤 방식으로 구글 검색에서 내 사이트를 접속했는지 알 수 있습니다. 이를 기반으로 ‘구글 애널리틱스’에서 접속 한 장소(국가 및 도시)와 구글, 네이버, 다음, 빙 등 접속한 경로를 알 수 있기에 유용하게 사용할 수 있습니다. 그 외에 데이터도 제공하기에 웹페이지에 접속했던 통계를 보다 체계적으로 사용할 수 있게 도와주는 유용한…

  • [SEO] Google Sandbox time period란?

    Published:wilson

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

  • 애드센스와 제휴 마케팅을 통한 블로그 수익 미래: 언제까지 가능할까?

    Published:macbeth

    티스토리 또는 워드프레스나 구글 블로거, 그리고 Ghost CMS, 드루팔 등 다양한 CMS와 웹 사이트를 개인이 운영할 수 있는 만큼의 자료가 인터넷에 있습니다. 그럼 블로그 수익 미래 전망은 앞으로 어떻게 될지 알아 보도록 하겠습니다. 목차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 버튼으로 개발자 도구가…