[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

  • HTML이란 무엇인가? | HTML5 개념과 DOM 관계

    Published:I-var uknew

    대부분의 웹 페이지는 HTML로 만들어져 있습니다. 우리가 브라우저에서 보는 텍스트, 이미지, 링크, 버튼 등은 모두 HTML을 통해 구조화되고 표현됩니다. HTML은 단순한 마크업 언어가 아니라, 웹이라는 공간의 기초 언어이자 모든 웹 개발의 출발점입니다. 특히 HTML5는 이전 버전과 달리 더 풍부한 의미 구조를 담을 수 있도록 진화했으며, 모바일 시대에 최적화된 표준으로 자리 잡았습니다. 이 페이지에서는…

  • 저작권 없는 무료 이미지 다운로드 사이트 추천 LIST 35+@-라이선스 확인

    Published:wilson

    블로그나 상업용으로 이미지를 사용해야 하는데 저작권 때문에 유료 이미지를 사용하지만 유료 이미지 사이트를 사용하는 것에는 한계가 있습니다. 예를 들어 한 달에 발행하는 뉴스·블로그 글이 이용하는 유료 이미지 사이트의 이미지 수를 초과하는 경우입니다. 저작권 없는 무료 이미지 사이트를 같이 사용하는 방법을 고려할 수 있습니다. 무료이미지 상업용 사용 조건 등은 어떻게 되는지 확인해 보겠습니다. 스톡…

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

    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…

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

    Published:wilson

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

  • 카카오톡 엑셀 테마 설정 방법(PC버전)

    Published:macbeth

    윈도우 PC에서 카카오톡 엑셀 테마 설정 방법에 대해 알아보겠습니다. 사무실 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 panel2. F12 버튼으로 개발자 도구가 열리지 않을 때PC에서 카카오톡 엑셀 테마…

  • 크리에이티브 커먼즈 라이선스 뜻과 이용허락조건 4가지 및 CC라이선스 6 종류

    Published:wilson

    크리에이티브 커먼즈 라이선스(Creative Commons License, 줄여서 CC 라이선스)란 저작자가 일정한 조건 하에 자신의 저작물을 다른 사람들이 자유롭게 이용할 수 있도록 허락하는 라이선스를 말합니다. 저작자가 저작자의 작품 사용 권한을 다른 사용자에게 부여하는 것을 말하며 각각의 단계를 가지고 있습니다. 목차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….