[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: 구글 알고리즘 순위 요소

    Published:wilson

    구글은 전 세계 점유율의 90% 이상을 차지할 정도로 검색 엔진 시장에서 독보적인 위치를 가지고 있습니다. 검색 엔진 최적화(SEO) 중에서도 특히 구글 SEO에 중점을 두는 이유이기도 하며, 구글 SEO를 결정하는 구글 알고리즘 순위 요소는 항상 주목해야 하는 요소입니다. 15년 동안 ‘First Page Sage’는 구글 알고리즘에 대한 지속적인 연구를 하고 결과를 발표했습니다. 목차1. 크롬 개발자도구…

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

    Published:wilson

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

  • HSTS 보안&속도 2가지 장점

    Published:wilson

    HSTS(HTTP Strict Transport Security)를 이용하는 웹사이트에 적용했을 경우 보안과 속도의 이점을 볼 수 있습니다. 이 말은 HSTS preload(사전로드) 기능이 사전로드(or 미리로드) 방식을 통해 기존 HTTPS가 적용된 사이트의 느려진 속도를 어느 정도 보완할 수 있습니다. 프리로드 등록은 해당 페이지에 등록하면 설정이 완료 됩니다. HTTPS부터 시작해서 ‘HTTP Strict Transport Security’에 대해 순차적으로 알아보겠습니다. 목차1. 크롬…

  • HTML 태그: SPAN 태그와 DIV 태그 차이와 용도

    Published:jarvis

    웹 페이지를 구성할 때 자주 사용되는 태그가 div 태그와 span 태그 그리고 p 태그입니다. p(paragraph)는 단락을 나타내는 의미적 요소입니다. div(division)는 구획 및 구분의 약자로, 문서의 구조를 나누는 데 사용하는 블록 태그입니다. span은 텍스트 일부를 감싸는 데 사용하는 범용 태그입니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8…

  • [SEO]스키마 마크업과 리치 스니펫이란? | Schema 유형 16가지

    Published:jarvis

    리치 스니펫의 형태로 스키마 마크업을 사용하는 웹사이트가 늘어 났습니다. 아래는 Rich Snippets이 SERP에서 어떻게 보일 수 있는지 확인할 수 있는 예시입니다. 이번 페이지에서는 Schema가 무엇인지, 스키마 활용 방법과 리치 스니펫에 대해 살펴 보겠습니다. 목차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 버튼으로 개발자 도구가…

  • 캐싱 개념과 분류: 웹사이트 성능 최적화 | 원리와 활용 | 서버 측 캐시 5가지와 클라이언트 캐시

    Published:I-var uknew

    사이트 성능 최적화란 사용자에게 더 빠른 로딩 속도와 쾌적한 경험을 제공하기 위해 웹 자원과 서버 구조를 효율적으로 관리하는 작업입니다. 이를 위해 일반적으로 캐싱, 파일 최적화, 전송 최적화, 서버 최적화 네 가지 핵심 전략이 활용됩니다. 캐시를 통해 반복되는 데이터를 저장하고, 파일 최적화를 통해 CSS·JS·이미지 등의 용량을 줄이며, 전송 최적화에서는 압축과 CDN, HTTP/2 등을 활용해…