[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: 검색 의도(Search Intent) 및 4가지 분류

    Published:jarvis

    구글을 포함한 검색 엔진에서 검색 의도(Search Intent)는 사용자 의도(User Intent)로도 불리며, 사용자가 검색 엔진에서 검색어를 입력할 때 갖는 주요 목표입니다. 일반적으로 4가지 유형이 포함됩니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때 검색 의도의 4가지 분류 사용자 의도는…

  • [SEO] 이미지 메타 데이터가 SEO에 미치는 영향 및 수정 방법

    Published:jarvis

    웹 사이트를 운영하면서 비용이 발생하지 않는 유기적인 트래픽을 획득하려면 웹 사이트 속도, 백링크, 이미지 대체 텍스트 등 다양한 방법을 적용하며 운영하게 됩니다. 웹 사이트 SEO에 약간의 점수를 더 얻고 싶다면 이미지 메타 데이터에 대한 고려를 생각해 볼 수 있습니다. 생성한 콘텐츠가 첫 페이지에 뜨지만 1~3번째 노출하기 위한 여러가지 방법이 있지만 작문 실력 외에…

  • [GA4] 구글 애널리틱스 서치 콘솔 연결 방법

    Published:jarvis

    구글 애널리틱스에서 구글의 서치 콘솔(Google Search Console)을 연결해서 사용할 수 있습니다. 애널리틱스 서치 콘솔 연결이 필요한 이유는 어떤 검색어로 유입되었는지 확인하는 것 뿐 아니라 검색 결과 페이지 노출 수와 순위, 노출 수 대비 순위 등을 알 수 있기 때문입니다. 목차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: 구글 알고리즘 순위 요소

    Published:wilson

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

  • 크롬 개발자 도구 Coverage: 사용하지 않는 코드(CSS, JS) 찾기

    Published:I-var uknew

    웹사이트의 속도는 단순히 서버 응답이나 캐시 설정뿐 아니라, “얼마나 많은 코드가 실제로 사용되는가”에 따라 크게 달라집니다. 크롬 개발자 도구 Coverage 탭은 페이지에서 로드된 CSS·JavaScript 파일의 실제 사용 비율을바이트 단위로 분석하여, 코드 낭비를 한눈에 시각화 해주는 도구입니다. 특히 워드프레스와 같은 CMS 환경에서는 테마·플러그인별로 불필요하게 로드되는 리소스가 많기 때문에,Coverage 탭은 사용하지 않는 자바스크립트 및 css…

  • Windows10 hosts 파일 수정

    Published:I-var uknew

    ‘Windows10 hosts 파일 수정’은 보통 서버 이전이나 계정 이전 작업 후 DNS 레코드를 변경하기 이전에 이전 된 서버로 작업이 잘 이루어졌는지 미리 확인할 필요가 생긴다.일일이 DNS 서버 A레코드를 수정하여 확인하는 방법은 너무 번거롭기 때문에 hosts 파일을 수정하여 테스트 하는 게 좋은 방법 중 하나 이다.호스트는  DNS(도메인 이름 시스템)에서 제공하는 정보 없이 호스트 파일에…