[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

  • 크롬 개발자 도구 정의와 목적 5가지

    Published:I-var uknew

    크롬 개발자 도구란 웹 개발자와 디자이너가 웹사이트의 코드 구조, 성능, 반응형 디자인, 보안, SEO 품질을 점검·개선하기 위해 사용하는 크롬 브라우저 내장 기능입니다. 페이지 속도 측정, 디버깅, 네트워크·리소스 분석 등 웹사이트 품질을 높이는 모든 과정을 한 곳에서 수행할 수 있습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8…

  • VPN 불법인가? 합법인가?

    Published:jarvis

    VPN 서비스를 이용한다면 내각 이용중인 VPN 불법인지? 아니면 합법이기 때문에 그대로 사용해도 되는지 궁금할 때가 있습니다. “내가 한국에서 성인 사이트를 들어가기 위해 VPN을 사용하는데 합법이었다고?” 란 의문을 품을 수 있습니다. 물론 접속하는 성인사이트가 법에 따라 불법일 수 있습니다. 목차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…

  • [Chrome] 구글 검색 기록 끄기 설정으로 자동 저장 비활성화 하기

    Published:jarvis

    대부분 크롬 앱을 사용하면서 외부에서도 계정을 동기화 한 후 사용하는 경우가 많습니다. 개인 정보 보호와 같은 민감한 이유로 구글 검색 기록 끄기 설정을 해야 하는 경우가 있습니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때✅ 구글 검색 기록…

  • [SEO] IndexNow 프로토콜 정의 | 5가지 이점

    Published:jarvis

    IndexNow 프로토콜은 웹 마스터와 웹 사이트 소유자가 검색 엔진에 콘텐츠의 변경 사항을 알려주는 간단한 방법입니다. 간단하면서도 기본적인 기능은 검색 엔진이 URL과 해당 콘텐츠의 ⓐ추가, ⓑ업데이트, ⓒ 삭제 되었을 경우 알 수 있도록 변경 사항을 핑으로 알려줘서 빠른 반영이 가능합니다. Microsoft가 개발한 새로운 SEO(검색 엔진 최적화) 기능으로, 웹 사이트의 콘텐츠가 검색 엔진에서 더 빠르게…

  • [SEO] 서브도메인 VS 서브폴더 2가지 설정 중 SEO에 더 유리한 것은?

    Published:jarvis

    서브도메인 VS 서브폴더 SEO에 어떤 방식이 유리한지 알아 보겠습니다. 먼저 Subdomain에 대해 간략히 설명하자면 인터넷에서 특정 사이트에 접속했을 때 www.domain.com에서 shop.domain.com이나 blog.domain.com과 같이 서브도메인으로 연결되는 경우를 확인한 적이 있을 겁니다. shop이나 blog와 같은 Subdomain 외에 www.domain.com/shop과 www.domain.com/blog와 같이 서브폴더(하위 디렉토리 or 하위 폴더)로 주제를 나누는 방법이 있습니다. 서브도메인 VS 서브폴더 두 가지 설정을…

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

    Published:macbeth

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