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

Author:jarvis Hours 등록일 Hours 업데이트
공정위 광고 문구 Ver 2.0

크롬 개발자도구의 주요 기능은 웹 개발자가 웹사이트의 코드 테스트 및 디버그 작업을 할 수 있습니다. 파이어폭스, 마이크로소프트 엣지, 크롬 등 웹 브라우저에는 크롬처럼 ‘웹 개발 도구(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

  • 아마존 어소시에이트란?

    Published:macbeth

    해외 직구가 활성화되어 아이허브 및 아마존에서 직구를 많은 소비자들이 하고 있습니다. Amazon Associates는 아마존의 의 제휴 마케팅 프로그램입니다. 아마존 어소시에이트 가입 방법에 대해 간단히 알아 보겠습니다. 아마존 어필리에이트(어소시에이트) 메인 페이지로 접속 후 회원 가입을 먼저 해야 합니다. 1. 아마존 어소시에이트 개요 아마존 제휴 마케팅 프로그램에 가입하면 제품에 따라 커미션 수입을 받을 수 있습니다….

  • Awin Affiliate 회원가입

    Published:jarvis

    Awin Affiliate에 회원 가입을 진행했습니다. 순서에 대해 확인 해 보겠습니다. 1. Awin Affiliate란? 아마존 어필리에이트와 같이 해외에서 인지도 있는 광고대행 회사입니다. Awin Affiliate (이전 명칭: Affiliate Window)은 온라인 마케팅 분야에서 선도적인 국제적인 CPA (Cost-Per-Action) 네트워크 중 하나입니다. 전 세계의 다양한 판매자와 어필리에이트를 연결해서 제품 홍보 및 어필레이에트에게는 커미션(수수료)을 지급하는 방식의 기업입니다. Awin의 대표적인…

  • [SEO] 웹사이트 관리를 위한 구글 SEO 도구 3가지

    Published:wilson

    웹사이트는 블로그 및 회사소개 홈페이지, 쇼핑몰 등 종류에 관계 없이 중요합니다. 구글 SEO 도구로 필수인 서치 콘솔, 애널리틱스, 크롬 개발자도구 3가지는 필수로 써야 하는 만큼 중요합니다. 구글을 포함한 검색 엔진 첫 페이지에 뜨는 것과 함께 어느 페이지에서 많이 방문자가 많았는지 통계 데이터를 볼 수 있다면 피드백을 통해 더 많은 방문자를 유입 시킬 수…

  • [SEO] 링크 교환이란? | 상호링크, 백링크 교환

    Published:jarvis

    검색 엔진 최적화를 위해 온페이지 SEO만으로는 많은 시간이 소요될 수 있습니다. 오프페이지 SEO 중 하나인 백링크를 생각하게 되며, 링크 빌딩을 위한 링크 교환에 대해 생각하게 됩니다. 링크 교환(Link-Exchange)이란 각각의 다른 웹사이트가 링크를 교환함으로써 링크 주스(점수)를 보내는 것입니다. 상호 링크, 상호 백링크라고도 부릅니다. 링크 교환 원리 링크 교환은 크게 3가지 방법으로 진행합니다. Link-Exchange의 안정성…

  • [SEO] IndexNow 프로토콜 정의 | 5가지 이점

    Published:jarvis

    IndexNow 프로토콜은 웹 마스터와 웹 사이트 소유자가 검색 엔진에 콘텐츠의 변경 사항을 알려주는 간단한 방법입니다. 간단하면서도 기본적인 기능은 검색 엔진이 URL과 해당 콘텐츠의 ⓐ추가, ⓑ업데이트, ⓒ 삭제 되었을 경우 알 수 있도록 변경 사항을 핑으로 알려줘서 빠른 반영이 가능합니다. Microsoft가 개발한 새로운 SEO(검색 엔진 최적화) 기능으로, 웹 사이트의 콘텐츠가 검색 엔진에서 더 빠르게…

  • 페이팔 카드 등록 및 삭제 방법(PC&모바일)

    Published:jarvis

    페이팔 결제는 전자지갑에 신용카드(or 체크카드)를 등록 후 결제가 가능하며, 해외 직구 등을 이용할 때 편리합니다. 페이팔 카드 등록 및 카드 삭제 방법에 대해 알아 보겠습니다. 1. 페이팔 등록 가능 체크카드 조건 · Visa, Mastercard, American Express, UnionPay 브랜드 직불카드 · 한국에서 발급된 카드만 추가 가능 · 다른 페이팔 계정에 등록되지 않는 체크카드 ·…