[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] 키워드 리서치를 통한 키워드 선정 전략 5가지

    Published:jarvis

    블로그를 포함한 웹 사이트를 운영할 때 주제 선정은 매우 중요한 요소 중 하나입니다. 이유는 구글봇이 내 웹 사이트의 텍스트와 키워드 등을 크롤링합니다. 전략적인 키워드 리서치를 통해 내 웹 사이트의 유기적인 트래픽을 만들기 위한 키워드 선정 방법 5가지에 대해 생각해 봤습니다. 구글의 입장에서 웹 사이트와 웹 페이지 내에서 근접(Relevant)한 웹 사이트를 노출 시키고 싶을…

  • 카카오톡 다크모드 설정 방법 2가지(모바일&PC)

    Published:wilson

    웹 검색이나 앱(App) 사용을 할 때 눈의 피로감을 덜 하기 위해 다크모드 설정 후 사용을 많이 합니다. 다크 모드의 장점은 어두운 화면일 수록 방출되는 빛의 양이 줄어들어 눈의 피로감 역시 줄어듭니다. 다크모드는 전력 소비도 줄일 수 있어 휴대폰 사용 시 방전되는 기간을 늘릴 수 있습니다. 카카오톡 다크모드 설정 방법 모바일과 PC에 대해 하나…

  • 유튜브 크리에이티브 커먼즈 라이선스 확인 방법 3가지-저작권 걱정 없이 동영상 확인하는 방법

    Published:wilson

    유튜브는 업로드 한 모든 영상에 표준 YouTube 라이선스를 기본 설정으로 하고 있습니다. 표준 라이선스는 유튜브에 방송 권한이 부여되어 있기 때문에 시청 외 동의 없는 재사용 및 편집을 금지하고 있습니다. 유튜브 동영상을 사용하려면 ‘유튜브 크리에이티브 커먼즈 라이선스’ 약관에 따라 표기된 CC BY 라이선스(이용 및 재사용 가능)를 사용해야 합니다. 유튜브에서 만들어진 자료에 저작권 걱정 없이…

  • 구글 애드센스란? 개요 및 애드센스 대안 TOP7

    Published:wilson

    애드센스는 구글이 운영하는 광고 중개 서비스로, 광고주는 구글 애즈에 가입해 광고를 등록 후 웹 사이트, 검색 페이지, 유튜브 등에 게재할 수 있습니다. 유튜브 광고 수익은 10만 뷰 당 15~20달러 정도로 추정됩니다. 보통 애드센스 승인을 받기 위해 7~15개 정도의 양질의 콘텐츠가 일반적인 조건입니다. 구글 애드센스 및 애드센스 대안을 알아 보겠습니다. 워드프레스 등의 CMS를 운영해서…

  • 크롬 개발자 도구 정의와 목적 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 추천 TOP5&유료 TOP3 | VPN이란?

    Published:jarvis

    VPN이란 가상 사설망(Virtual Private Network)이란 뜻을 가지고 있으며, 공용 네트워크를 사용할 때 보호된 네트워크 연결 설정을 제공합니다. 주요 기능은 인터넷 트래픽을 암호화하여 온라인 상의 공용 네트워크 IP(공용 IP)를 보호하게 됩니다. VPN에 대한 정보와 가볍게 사용할 수 있는 VPN 종류 및 추천할 수 있는 무료 VPN에 대해 알아 보겠습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements…