[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

  • POP3 IMAP 차이점은 무엇인가요?

    Published:jarvis

    이메일 프로토콜 시스템 POP3 IMAP 차이점은 무엇일까요? POP3(Post Office Protocol version 3)의 경우 TCP/IP 기반으로 이루어진 프로토콜로 메일 서버에서 수신한 이메일을 컴퓨터로 가져오기 위해 사용 됩니다. POP3는 원래 컴퓨터 한 대에서만 사용하도록 설계된 오래된 프로토콜입니다. IMAP((Internet Message Access Protocol)와 같이 양방향 동기화 통신을 사용하는 최신 프로토콜과 달리 POP3는 일방향 전자메일 동기화만 지원이 됩니다. 목차1….

  • 도메인 라이프 사이클(Domain Life Cycle)

    Published:jarvis

    도메인 라이프 사이클Domain Life Cycle이란 도메인 이름의 활동 주기를 말하며, 도메인이 생성된 후에 사용 기간이 만료된 후 최종 삭제가 진행되는 기간과 상태를 말합니다. 도메인의 만료일과 상태는 도메인 정보 조회를 통해 확인할 수 있습니다. 라이프 사이클은 도메인 최상위 관리 기관Registry의 정책에 따라 다르게 운영될 수 있습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3…

  • 글로벌 SEO 비교 사이트 4군데

    Published:jarvis

    글로벌 SEO 비교 사이트를 찾고 있다면 SimilarWeb, Ahrefs SEMrush, Moz와 같은 인기있는 웹사이트를 추천합니다. 이 사이트들은 트래픽 및 키워드 순위 정보를 제공하여 전 세계적인 SEO 분석을 가능케 합니다. 이 중에서 웹사이트 순위 정보도 제공하는 사이트는 SimilarWeb, Alexa, SEMrush와 같은 사이트들입니다. 이러한 사이트들은 글로벌 SEO 분석에 도움이 되는 강력한 도구로, 인기와 신뢰성이 높습니다. 목차1….

  • SEO 클로킹이란? 피해야 할 3가지 사항

    Published:jarvis

    2023년 워드프레스 블로그로 수익 창출을 목표로 시작하는 분들이 많아졌습니다. 하지만 티스토리 블로그와 비슷하게 마치 종교처럼 글 1~2개 잘 쓰면 마치 한달 500만원, 천 만원을 벌 수 있는 것처럼 홍보하는 유튜브가 많아진 해이기도 합니다. 구글 상위 노출을 위해 검색엔진최적화(SEO)가 진행되어야 하며, 필수 사항이 맞습니다. 전 세계적으로 검색 엔진 시장의 규모는 매우 큽니다. 필수 사항이면서…

  • 유튜브 프리미엄 가격 차이[3가지 가격]

    Published:macbeth

    광고 없이 유튜브를 광고 없이 유튜브를 보기 위해 많은 사람이 유튜브 프리미엄에 가입합니다. 유튜브 프리미엄 가격은 크게 3가지 요금제로 나뉘게 됩니다. 이때 결제하는 기기(스마트폰, PC)에 따라 요금에 차이가 발생하는데요. 특히 애플 아이폰이나 아이패드에서 결제할 경우, PC 웹사이트에서 결제하는 것보다 가격이 더 비쌉니다. 이는 애플의 iOS 앱 결제 시 발생하는 높은 수수료 때문입니다. 각…

  • 네이티브 광고(Native advertising)란 무엇인가?

    Published:wilson

    네이티브 광고(Native advertising, Native AD)는 해당 웹사이트에 맞춰 고유한 방식으로 기획 및 제작된 광고를 말 합니다. 기존의 광고는 이용자의 관심을 끌기 어려운 점이 있습니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때 ✅ 네이티브 광고의 정의 및 특징…