[Chrome] 크롬 개발자도구 기능 개요

공정위 광고 문구 Ver 2.0

크롬 개발자도구의 주요 기능은 웹 개발자가 웹사이트의 코드 테스트 디버그 작업을 할 수 있습니다. 파이어폭스, 마이크로소프트 엣지, 크롬 등 웹 브라우저에는 크롬처럼 ‘웹 개발 도구(Web development tools)’가 포함되어 있습니다. 크롬 개발자도구 기능은 개발자에게 유용한 도구임이 분명합니다. ‘devtools‘이라는 줄임말로 많이 사용되고 있습니다.

※디버그(debug)
디버깅 or 디버그는 컴퓨터 프래그램 개발 중 발생하는 시스템의 버그를 찾고 수정하는 작업입니다.

1. 크롬 개발자도구 기능

1.1 요소Elements panel

Chrome devtools은 브라우저에 내장되어 웹페이지의 요소 검사에서 HTMLDOM 뷰어와 편집기를 사용할 수 있습니다. 요소 검사를 이용해서 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

  • 미국 구글 바로가기: 주소 링크 및 우회 접속 방법 3가지 | 해외 구글 바로가기

    한국에서 구글링을 할 때 자료가 미국에 비해 적기 때문에 미국 구글 바로가기 또는 해외 구글 바로가기를 생각하는 분들이 많습니다. 미국 구글 우회 접속 방법을 활용해서 미국의 구글 사이트에서 구글링을 하면 원하는 정보를 보다 수월하게 찾을 수 있습니다. ✅ 미국 구글 바로가기 첫번째 주소는 한국에서 보는 미국 구글 사이트이며, 두 번째는 미국 현지에서 보는…

  • 웹 성능 최적화: 구조와 정의

    사용자 경험(UX), 검색 엔진 최적화(SEO), 전환율, 그리고 사이트 유지 비용까지 – 웹 성능은 단순히 ‘사이트 속도 향상’이 아닌 적용된 이후의 여러가지 효과에 복합적인 영향을 주는 핵심 요소입니다. 일반 웹사이트 그리고 워드프레스와 같이 다양한 테마와 플러그인이 공존하는 환경에서는, 성능 저하의 원인을 파악하고 그에 맞는 최적화 기법을 적용하는 것이 필수입니다. 이 글은 웹 성능 최적화를…

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

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

  • [Chrome] 구글 검색기록 확인 및 삭제 방법

    크롬 브라우저에서 로그인한 상태로 검색을 하면 구글 검색기록이 계정에 저장되고 기기 간에 동기화 됩니다. 이를 통해 이전에 방문한 페이지를 다시 찾을 수 있습니다. 그러나 개인 정보를 보호하기 위해 필요한 경우 구글 검색 기록을 삭제할 수도 있습니다. 아이폰에 대한 검색 기록이나 방문 기록 삭제가 필요한 경우[✅ 모바일 구글 검색 기록 설정 및 삭제]로 바로…

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

    리치 스니펫의 형태로 스키마 마크업을 사용하는 웹사이트가 늘어 났습니다. 아래는 Rich Snippets이 SERP에서 어떻게 보일 수 있는지 확인할 수 있는 예시입니다. 이번 페이지에서는 Schema가 무엇인지, 스키마 활용 방법과 리치 스니펫에 대해 살펴 보겠습니다. 1. 스키마 마크업이란? 스키마 마크업(Schema Markup)은 검색 엔진이 콘텐츠를 이해하고 SERP(검색 엔진 결과 페이지)에 반영할 수 있도록 사이트의 HTML에 추가할…

  • [Chrome] 크롬 개발자도구 실행과 한국어 변경 방법

    구글에서 만든 크롬 브라우저는 개발을 도와주는 ‘크롬 개발자도구’가 있습니다. 개발자 도구(Developer tools)를 이용해서 HTML, CSS, JavaScript의 생산성을 높일 수 있습니다. 개발자를 위한 도구이지만 글자 크기, 색, 간격과 같은 값을 확인할 수도 있고 웹사이트의 속도를 PC뿐만 아닌 모바일 버전으로도 확인할 수 있는 장점이 있습니다. 1. 개발자모드 실행 방법 실행 방법은 2가지가 있습니다. 검수하려는 웹사이트에…