[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

  • 직접 사용하는 색상 코드 & 색상 코드 추천 사이트 TOP 3

    Published:macbeth

    웹사이트를 운영하면서 자주 사용하는 색상 코드를 페이지에 저장해 두고, 필요할 때마다 사이트 검색 기능을 통해 바로 접속하여 활용할 필요성을 느껴서 페이지를 만들게 되었습니다. 추가로, 색상 코드 조합 사이트도 유용하기 때문에 두 가지 주제로 리스트를 정리했습니다. 목차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 버튼으로…

  • DNS 레코드 확인 및 네임서버 성능 측정 사이트

    Published:jarvis

    DNS(Domain Name System)는 호스트의 네트워크 주소 변경을 수행하기 위해 개발된 시스템입니다. 기본 호스트 서버로 연결되기 전에 보통의 경우 IP 주소를 대신해서 사용하는 주소인 도메인은 DNS에 의해 IP와 도메인을 연결해 줍니다.DNS 레코드 확인을 편하게 할 수 있는 “whatsmydns”와 DNS 서버의 성능을 측정할 수 있는 “DNSPerf”에 대해 알아 보겠습니다. 호스팅 서비스를 이용하게 되면 공유 호스팅과…

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

    Published:jarvis

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

  • Awin Affiliate 회원가입

    Published:jarvis

    Awin Affiliate에 회원 가입을 진행했습니다. 순서에 대해 확인 해 보겠습니다. 목차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. Awin Affiliate란? 아마존 어필리에이트와 같이 해외에서 인지도 있는 광고대행 회사입니다. Awin Affiliate (이전 명칭: Affiliate Window)은 온라인 마케팅 분야에서 선도적인…

  • [SEO]검색 엔진 결과 페이지-SERP란? | 10가지 SERP 리스트

    Published:jarvis

    검색엔진최적화(SEO)에 대한 관심이 한국에서도 늘어나는 추세입니다. 구축한 웹사이트를 단순하게 광고하는 방식이 아닌 자연 검색 트래픽으로 방문자를 늘리는 방식이지요. 구글은 사용자 경험을 포함 정보성 글을 중요하게 생각하며 AI가 등장한 이후 더더욱 이 추세는 강해지고 있습니다. 웹사이트의 글(Post)이 구글 첫 페이지부터 나오는 자연 검색 결과를 포함한 다양한 검색 엔진 결과 페이지(SERP:Search Engine Result Page)에는 어떤…

  • 구글 CCPA 및 GDPR 메시지 확인 테스트

    Published:jarvis

    구글의 GDPR과 CCPA 설정을 한 후에 메시지가 나오는지 궁금할 수 있습니다. “구글의 CCPA 및 GDPR 메시지 확인을 진행할 수 있는 방법이 있는가?” 라는 의문으로 시작하여 2가지 메시지를 직접 확인해 보기로 했습니다. 유럽 규정 메시지에 대한 정보에서 확인 했을 때는 두 개의 버튼(옵션 관리, 동의)이 있는 유럽 규정 메시지가 나온다는 내용을 확인하였으며 아래와 같은…