[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

  • 페이팔 카드 등록 및 삭제 방법(PC&모바일)

    Published:jarvis

    페이팔 결제는 전자지갑에 신용카드(or 체크카드)를 등록 후 결제가 가능하며, 해외 직구 등을 이용할 때 편리합니다. 페이팔 카드 등록 및 카드 삭제 방법에 대해 알아 보겠습니다. 목차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. 페이팔 등록 가능 체크카드 조건…

  • 구글 애널리틱스 애드센스 연결 방법

    Published:wilson

    애드센스를 사용하다 보면 어느 페이지에서 수익이 나는지 궁금할 때가 있습니다. 애널리틱스 자체적으로는 확인이 어렵기 때문에 구글 애널리틱스에서 볼 수 있게 끔 구글 애널리틱스 애드센스 연결 설정에 대해 알아 보겠습니다. 당연한 이야기이지만 애드센스와 애널리틱스 양쪽에 가입이 되어 있어야 연동이 가능합니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6 메모리Memory panel1.7 애플리케이션Application panel1.8…

  • Malware Zero 다운로드 및 사용법

    Published:jarvis

    ‘Malware Zero’ (mzk)는 네이버 카페 ‘바이러스 제로 시즌 2‘에서 만들어진 무료 배포 악성 코드 제거 스크립트입니다. 인터넛 익스플로러 또는 크롬 등의 여러 브라우저를 사용합니다. 이 때  ’11번가 광고’ 나 기타 옥션, 지마켓 등의 광고가 강제로 뜨는 경우가 있습니다. 알게 모르게 설치된 악성 코드는 구글링 한 여러가지 방법을 써 봐도 효과가 거의 없는 경우는…

  • 아마존 어소시에이트란?

    Published:macbeth

    해외 직구가 활성화되어 아이허브 및 아마존에서 직구를 많은 소비자들이 하고 있습니다. Amazon Associates는 아마존의 의 제휴 마케팅 프로그램입니다. 아마존 어소시에이트 가입 방법에 대해 간단히 알아 보겠습니다. 아마존 어필리에이트(어소시에이트) 메인 페이지로 접속 후 회원 가입을 먼저 해야 합니다. 목차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….

  • [Chrome]구글 성인 인증 방법 | 성인 인증 없이 검색하는 방법 4가지

    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] 구글 키워드 플래너 사용법

    Published:jarvis

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