[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] Internal PageRank

    Published:jarvis

    내부 페이지랭크(Internal PageRank)란 무엇인가? 내부 링크에 링크 점수를 어떤 방법으로 배분해 줘야 할까? 계산 방법은? 링크 방식은 앵커 텍스트를 사용할지..? 등을 고민할 수 있습니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때1. PageRank에 대해 구글 이전의 검색 엔진은…

  • 네임칩 도메인 구매 및 연결 절차와 환불 정책

    Published:wilson

    도메인 등록 기관인 네임칩(Namecheap)은 .com 도메인을 신규 등록 시 $7.98, 연장 시 $13.98에 제공하고 있어 매우 합리적인 가격대를 보이고 있습니다. 이번 글에서는 네임칩 도메인 구매 방법과 환불 정책에 대해 자세히 알아보겠습니다. ※신규 구매 시 대부분 이벤트를 진행하고 있습니다. 신규 구매: $7.98 = 10,161.57 갱신 가격: $13.98 = 17,801.85 목차1. 크롬 개발자도구 기능1.1 요소Elements…

  • [SEO] google 유용한 콘텐츠(업데이트 2022년 8월 25일)

    Published:wilson

    2022년 8월에 google 유용한 콘텐츠 업데이트는 검색엔진 용 콘텐츠를 먼저 설정하는 것이 아닌 사용자 중심 콘텐츠를 만드는 것에 집중할 수 있도록 하고 있습니다. 구글 자체 검색엔진 최적화 가이드 및 권장사항을 따르지 말아야 한다는 것이 아닌 사용자에게 초점이 맞춰진 콘텐츠 여부에 중점을 둔 것이라 할 수 있습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console…

  • SEO: 구글 알고리즘 순위 요소

    Published:wilson

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

  • [SEO] 구글 키워드 플래너 사용법

    Published:jarvis

    검색 엔진 최적화를 통해 구글 첫 페이지 상위 노출을 목적이라면 수 많은 요소가 있지만 키워드 리서치는 필수로 진행해야 할 사항입니다. 무료 키워드 툴 중 하나인 구글 키워드 플래너를 이용해서 키워드 조사 하는 방법에 대해 알아 보겠습니다. 순차적으로 키워드 플래너에 대해 확인해 보도록 하겠습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4…

  • [SEO] Blog Post vs. Article: 차이점은 무엇인가?

    Published:wilson

    웹사이트 콘텐츠를 발행할 때 [블로그 포스트&기사] 둘 중에 어떤 콘텐츠를 발행하는 것이 맞는지 SEO 관점에서 고민할 수 있습니다. 아니면 구글링으로 검색한 웹페이지의 콘텐츠가 Blog 게시물인지 기사인지 생각해 보신 적이 있나요? Blog Post vs. Article 두 종류의 콘텐츠는 어떤 차이점을 가지고 있으며 비즈니스 관점에서 어떤 콘텐츠를 게시하는 것이 더 나을지 알아 보겠습니다. 목차1. 크롬…