[Chrome] 크롬 개발자도구 기능 개요

공정위 광고 문구 Ver 2.0

크롬 개발자도구의 주요 기능은 웹 개발자가 웹사이트의 코드 테스트 디버그 작업을 할 수 있습니다. 파이어폭스, 마이크로소프트 엣지, 크롬 등 웹 브라우저에는 크롬처럼 ‘웹 개발 도구(Web development tools)’가 포함되어 있습니다. 크롬 개발자도구 기능은 개발자에게 유용한 도구임이 분명합니다. ‘devtools‘이라는 줄임말로 많이 사용되고 있습니다.

※디버그(debug)
디버깅 or 디버그는 컴퓨터 프래그램 개발 중 발생하는 시스템의 버그를 찾고 수정하는 작업입니다.

1. 크롬 개발자도구 기능

1.1 요소Elements panel

Chrome devtools은 브라우저에 내장되어 웹페이지의 요소 검사에서 HTMLDOM 뷰어와 편집기를 사용할 수 있습니다. 요소 검사를 이용해서 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

  • 티스토리 대안으로 사용할 수 있는 CMS 3가지

    구글 애드센스 광고 게재를 통해 블로그를 운영하는 경우 한국의 경우 티스토리를 가장 많이 이용합니다. 하지만 2022년 카카오 서비스가 중단되는 IDC 화재와 그 이전과 이후 지속적인 티스토리 오류가 발생하는 것이 사실입니다. 티스토리 대안으로 블로그스팟과 워드프레스를 가장 많이 언급합니다. 하지만 워드프레스는 ①비용 문제와 ②높은 진입 장벽을 이유로 시작하지 못하고 티스토리에 머무는 경우가 많습니다. 블로그스팟을 제외한…

  • 랜덤 비밀번호 생성기: 숫자(123)+대소문자+특수문자

    대문자, 소문자, 숫자, 특수 문자를 조합하여 최상의 보안을 달성하세요. 최소 6자리 비밀번호부터 최대 30자리 까지 가능합니다. 비밀번호 관리의 걱정을 덜어드립니다. 온라인 안전성을 높이는 데 도움이 되는 무료 도구입니다. 랜덤 비밀번호 생성기 ▲ 웹사이트 보안을 강화하고 안전한 비밀번호를 손쉽게 생성할 수 있습니다. uknew.co 비밀번호 생성기는 원하는 길이와 다양한 요구 사항에 따라 고유하고 강력한 암호를…

  • 웹사이트 속도 측정 사이트 및 도구 TOP6

    페이지 로딩 속도는 사용자 경험(UX)에 직접적인 영향을 미치며, 검색엔진의 순위에도 반영됩니다. 특히 Core Web Vitals(LCP, FID, CLS) 지표는 구글이 공식적으로 평가 기준으로 사용하는 만큼, 정기적인 웹사이트 속도 측정과 개선이 필수적입니다. 이 글에서는 실제 웹사이트의 성능을 점검하고, 병목 구간을 파악할 수 있는 대표적인 속도 측정 도구 5가지를 소개합니다. 각각의 장단점과 활용 팁을 함께 정리하여,…

  • [WP] 워드프레스 카테고리 vs 태그 차이와 SEO에 더 유리한 것은?

    워드프레스라는 콘텐츠 관리 시스템(CMS)이며, 카테고리와 태그 2개의 방법으로 분류해서 그룹화 할 수 있습니다. 워드프레스 카테고리 vs 태그 주요 차이와 어떤 방법으로 사용하는 것이 SEO에 유리한지 알아 보도록 하겠습니다.. 1. 워드프레스 카테고리란? 카테고리는 콘텐츠를 정렬하는데 사용하며, 태그보다 큰 범주로 묶습니다. 주제를 하나로 묶는 역할을 한다고 볼 수 있습니다. 예를 들어 IT 주제의 사이트인 경우…

  • |

    내 아이피 주소 확인(103.226..Click Here!) | IP란 무엇인가?

    웹과 관련된 업무를 하게 되면 내가 위치한 PC 또는 모바일에서 내 아이피 주소 확인이 필요한 경우가 있을 수 있습니다. 이 페이지는 IP 주소 확인 사이트입니다. 내 아이피 주소 확인 ▼ IP 주소란 무엇인가? IP는 인터넷 프로토콜(Internet Protocol)의 약자이며, 인터넷이 연결된 네트워크에서 어떤 정보를 송·수신 하는 통신 규약을 의미합니다. IP 주소(영어: Internet Protocol address)로…

  • HTTPS란? SSL/TLS 보안인증서 개요 및 차이점

    HTTPSHyperText Transfer Protocol Secure란 월드와이드웹(WWW)의 통신 프로토콜인 HTTP의 보안이 강화된 프로토콜 버전입니다. 통신의 인증 및 암호화를 위해 넷스케이프 커뮤니케이션즈 코퍼레이션에서 개발한 넷스케이프 웹 프로토콜이 HTTPS입니다. HTTPS를 이용하는 SSL 보안인증서 SSLSecure Socket Layer은 웹 사이트에 접속하기 전 기존 HTTP 프로토콜에서 HTTPS 프로토콜로 변경이 되면서 전송 된 데이터의 암호화로 데이터를 보호하는 목적을 가지고 있습니다. 웹 사이트에 사용자가…