[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

  • 구글 알리미 설정: 관심 분야의 키워드와 주제 설정하기

    Published:jarvis

    ‘구글 알리미‘ or ‘구글 알림‘으로 부르는 구글의 알리미는 관심 분야의 키워드를 설정해서 관련 콘텐츠를 메일로 전달 받는 구글의 무료 서비스입니다. 뉴스 기자, 에디터, 마케터, 개인 블로거 및 특정 취미에 관심 있는 개인 사용자 등을 아우르는 특정 분야에서 지속적인 정보를 얻고자 할 때 구글 알리미 설정을 통해 사용하는 경우를 고려할 수 있습니다. 목차1. 크롬…

  • 구글링 개요 | 효율적인 구글 검색 방법 10가지

    Published:jarvis

    구글링(Googling)이란 Google에 -ing가 붙여져 만들어진 동사입니다. 영어권에서 구글의 영향력으로 구글링 단어 자체가 “검색 엔진에서 검색한다.”의 뜻을 가지게 되었습니다. 전 세계 어느 검색엔진보다 더 높은 신뢰성을 기반으로 점유율을 가지게 된 결과이기도 합니다. 목차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 버튼으로 개발자 도구가 열리지 않을…

  • 크롬 개발자 도구 성능 탭 활용

    Published:I-var uknew

    웹사이트의 성능을 정확하게 평가하려면 단순한 속도 점수보다, 브라우저가 실제로 렌더링과 스크립트를 어떤 순서로 처리하는지를 살펴보는 것이 더 중요합니다. 크롬 개발자 도구 성능 탭은 페이지 로딩 과정과 사용자 상호작용에 따른 성능 저하를 시각적으로 분석할 수 있는 도구입니다. 렌더링 지연, 자바스크립트 실행 순서, LCP·FCP·CLS와 같은 Core Web Vitals 지표까지 모두 한 화면에서 확인할 수 있어,…

  • 구글 애널리틱스 애드센스 연결 방법

    Published:wilson

    애드센스를 사용하다 보면 어느 페이지에서 수익이 나는지 궁금할 때가 있습니다. 애널리틱스 자체적으로는 확인이 어렵기 때문에 구글 애널리틱스에서 볼 수 있게 끔 구글 애널리틱스 애드센스 연결 설정에 대해 알아 보겠습니다. 당연한 이야기이지만 애드센스와 애널리틱스 양쪽에 가입이 되어 있어야 연동이 가능합니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8…

  • DOM(Document Object Model) 구조와 정의

    Published:jarvis

    대부분의 웹페이지는 HTML로 구성되어 있지만, 우리가 브라우저에서 상호 작용하는 것은 단순한 정적인 HTML 문서가 아닙니다. 웹페이지는 브라우저에 의해 DOM(Document Object Model)이라는 구조화된 객체 모델로 변환되며, 이 DOM을 통해 JavaScript는 페이지의 내용을 읽고 수정할 수 있습니다. DOM은 웹의 핵심 작동 원리이자 프로그래밍 가능한 웹의 뼈대입니다. 버튼 클릭, 폼 입력, 실시간 데이터 변경 등 우리가…

  • [Chorome]구글 세이프 서치 해제 방법(PC&모바일-1분 미만)

    Published:jarvis

    구글링 중 원하는 자료를 찾기 위해 구글 세이프서치 해제를 해야 하는 경우가 생길 수 있습니다. 구글의 고유 기능 중 하나인 구글 세이프 서치는 구글링 결과에 선정적인 콘텐츠가 표시되는 것을 필터링 하는 기능입니다. 폭력적이거나 선정적이고 성적인 콘텐츠가 노출되지 않게 필터링 된 구글의 기능으로 자녀가 있는 가정의 PC에서는 유용한 기능일 수 있지만 선정적인 콘텐츠를 찾지…