[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

  • [Google Safe Browsing]-웹사이트 세이프 브라우징 사이트 상태 확인 방법

    Published:jarvis

    Google 블랙리스트에 내 WordPress 사이트가 등록되어 있다면.. 등록 여부와 제거 방법에 대해 알아 보겠습니다. 알고 계신가요? 구글은 하루 10,000여 개의 사이트를 블랙리스트로 올리고 있습니다. [Google Safe Browsing]에 내 사이트가 표시된다면 블랙리스트에 등록 되었다는 것으로 웹에서 안전하지 않다는 것을 의미합니다. ‘구글 세이프 브라이징’ 보안팀에서 안전하지 않은 웹사이트로 식별하고 등록되었다는 것이므로 조치가 필요합니다. 목차1. 크롬…

  • DOM(Document Object Model) 구조와 정의

    Published:jarvis

    대부분의 웹페이지는 HTML로 구성되어 있지만, 우리가 브라우저에서 상호 작용하는 것은 단순한 정적인 HTML 문서가 아닙니다. 웹페이지는 브라우저에 의해 DOM(Document Object Model)이라는 구조화된 객체 모델로 변환되며, 이 DOM을 통해 JavaScript는 페이지의 내용을 읽고 수정할 수 있습니다. DOM은 웹의 핵심 작동 원리이자 프로그래밍 가능한 웹의 뼈대입니다. 버튼 클릭, 폼 입력, 실시간 데이터 변경 등 우리가…

  • 내 브라우저 해상도 크기 확인하기:해상도 확인 사이트

    Published:macbeth

    사용하는 PC 및 모바일 내 브라우저 해상도 크기 확인이 필요할 때가 있습니다. 모니터 별 다양한 디바이스 크기가 있으며 우선 대표적인 3가지 디바이스 크기입니다. 크롬 브라우저에서 이 페이지에 접속하면 목차 1.에서 접속한 디바이스(PC,테블릿,스마트폰 등) 해상도 크기를 확인할 수 있습니다. 목차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…

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

    Published:jarvis

    구글 애널리틱스 서치콘솔 연결 시 사용자가 어떤 방식으로 구글 검색에서 내 사이트를 접속했는지 알 수 있습니다. 이를 기반으로 ‘구글 애널리틱스’에서 접속 한 장소(국가 및 도시)와 구글, 네이버, 다음, 빙 등 접속한 경로를 알 수 있기에 유용하게 사용할 수 있습니다. 그 외에 데이터도 제공하기에 웹페이지에 접속했던 통계를 보다 체계적으로 사용할 수 있게 도와주는 유용한…

  • TTFB 속도(Time To First Byte Speed)

    Published:wilson

    TTFB란 서버에 HTTP 요청이 보내진 후 클라이언트의 브라우저가 첫 정보를 수신하는데(첫 번째 바이트를 읽는데 걸린 시간) 소요된 시간을 의미합니다. TTFB는 DNS 속도 측정 이후에 계산되는 것으로 오해하는 경우가 많지만 네트워킹에서 TTFB는 DNS를 포함한 네트워크 대기 시간이 포함됩니다. 목차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….

  • 구라제거기 다운로드 링크

    Published:I-var uknew

    구라제거기(hoax eliminator)는 블루앤라이브(BLUEnLIVE)님께서 개발한 툴입니다. 키보드 보안 프로그램 및 인터넷 뱅킹 프로그램들은 우리가 사용하는 윈도우 PC의 성능을 느리게 만드는 프로그램이기도 하지요. nProte**, 안랩의 세이프 트랜잭션, 잉카인터넷 등 은행이나 증권사 홈페이지에서 강제로 다운 받게 설정된 프로그램들을 클릭 한번으로 삭제할 수 있는 소프트웨어다. nProte** 프로그램 등을 자주 쓰지 않는다면 느려진 컴퓨터를 제대로 쓰기 위해서라도 hoax…