[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

  • 구글 PDF 번역 &이미지 번역 2가지 기능

    Published:macbeth

    Google 번역은 일반적인 기계 번역 외에도 PDF 파일 번역과 이미지 내의 글자를 렌즈 번역할 수 있습니다. 구글 PDF 번역이 설치해야 하는 다른 번역 프로그램이나 웹 사이트보다 더 나은 이유는 설치의 번거로움이나 번역 파일의 크기 문제로 인한 오류가 상대적으로 없다는 것입니다. 구글의 PDF 번역과 이미지 번역에 대해 각각 알아 보겠습니다. 목차1. 크롬 개발자도구 기능1.1…

  • HTTP란? HTTP 헤더와 상태코드 2xx 등의 의미

    Published:jarvis

    HTTP(HyperText Transfer Protocol)는 W3에서 정보를 주고 받을 수 있는 프로토콜입니다. 하이퍼 텍스트 전송 프로토콜은 웹 브라우저와 같은 통신 플랫폼에 웹 사이트를 로드할 때 사용되며 인터넷에서 데이터(HTML, CSS, 이미지, 비디오 등)를 전송하는데 사용되는 프로토콜입니다. 목차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 버튼으로 개발자 도구가 열리지 않을…

  • HTML5 기본 구조: 기본 템플릿 코드 및 태그별 역할

    Published:jarvis

    웹페이지를 만드는 기본 뼈대인 HTML은 지난 수십 년간 발전해 왔습니다. 초창기 HTML은 단순한 문서 구조화에 집중했지만, 점차 복잡한 웹 애플리케이션과 멀티미디어 콘텐츠가 등장하면서 기존 버전의 한계가 명확해졌습니다. 이러한 문제를 해결하고자 등장한 최신 표준이 바로 HTML5입니다. HTML5는 시맨틱 구조를 강화하고, 비디오·오디오 같은 멀티미디어 요소를 플러그인 없이 지원하며, 다양한 웹 API를 내장해 현대 웹 환경에…

  • [Google Safe Browsing]-웹사이트 세이프 브라우징 사이트 상태 확인 방법

    Published:jarvis

    Google 블랙리스트에 내 WordPress 사이트가 등록되어 있다면.. 등록 여부와 제거 방법에 대해 알아 보겠습니다. 알고 계신가요? 구글은 하루 10,000여 개의 사이트를 블랙리스트로 올리고 있습니다. [Google Safe Browsing]에 내 사이트가 표시된다면 블랙리스트에 등록 되었다는 것으로 웹에서 안전하지 않다는 것을 의미합니다. ‘구글 세이프 브라이징’ 보안팀에서 안전하지 않은 웹사이트로 식별하고 등록되었다는 것이므로 조치가 필요합니다. 목차1. 크롬…

  • 카카오톡 다크모드 설정 방법 2가지(모바일&PC)

    Published:wilson

    웹 검색이나 앱(App) 사용을 할 때 눈의 피로감을 덜 하기 위해 다크모드 설정 후 사용을 많이 합니다. 다크 모드의 장점은 어두운 화면일 수록 방출되는 빛의 양이 줄어들어 눈의 피로감 역시 줄어듭니다. 다크모드는 전력 소비도 줄일 수 있어 휴대폰 사용 시 방전되는 기간을 늘릴 수 있습니다. 카카오톡 다크모드 설정 방법 모바일과 PC에 대해 하나…

  • 구글 페이지스피드 인사이트: 코어 웹 바이탈로 보는 웹사이트 속도 최적화 가이드

    Published:I-var uknew

    구글에서 만든 페이지스피드 인사이트는 웹사이트의 속도와 사용자 경험을 측정해주는 대표적인 성능 분석 도구입니다. 단순히 웹사이트 속도 측정을 위한 페이지 로딩 시간을 평가하는 것을 넘어, 코어 웹 바이탈 평가 지표를 기반으로 사이트의 전반적인 품질을 진단하고 개선 방향을 제시합니다. 코어 웹 바이탈은 실제 사용자 경험을 수치화한 3가지 핵심 지표로, 주요 콘텐츠가 화면에 표시되는 속도(LCP: 최대…