[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

  • 웹사이트 성능 테스트 기준: 크롬 개발자 도구 | 구글이 만든 SEO·성능 분석 표준

    웹사이트 속도와 성능은 단순한 점수로 판단할 수 없습니다. 중요한 것은 사용자 브라우저에서 어떤 리소스가 병목을 일으키는지, 그리고 렌더링이 어느 시점에 완료되는지를 직접 확인하는 것입니다. 이 과정을 통해서만 실제 성능 저하의 원인을 정확히 파악할 수 있습니다. 크롬 개발자 도구는 별도의 프로그램 설치 없이 브라우저 안에서 웹사이트 성능 테스트를 직접 할 수 있는 가장 강력한…

  • 아마존 어소시에이트 가입 방법

    세계에서 가장 큰 제휴 마케팅 프로그램 중 하나인 아마존 어소시에이트 가입 방법에 대해 간단히 알아 보겠습니다. 어필리에이트(Affiliate)는 “제휴하다“란 뜻을 가지고 있습니다. 웹 사이트의 발행자(publisher)는 제휴 파트너(아마존 or 쿠팡 등)에서 제공하는 광고를 올린 후 웹 사이트에 올린 후 수익이 발생하면 커미션(보상)을 받습니다. 1. 아마존 어소시에이트 가입 방법 가입은 가입 사이트로 가셔서 Sing up을 누른…

  • 글로벌 SEO란? 인터내셔널 SEO 정의

    특정 웹사이트를 보면 다국어 기능을 가진 사이트를 확인할 수 있습니다. 글로벌 SEO(Global SEO) 또는 인터내셔널 SEO(International SEO)로 부르며, 해외 SEO 시장 공략을 위한 인터내셔널 SEO 전략은 어떤 방식을 취해야 하는지 알아 보겠습니다. 글로벌 SEO: 인터내셔널 SEO란? 해외 SEO 시장 공략을 위한 International SEO 전략은 어떤 방식과 개념의 접근이 필요할까요? 우선 기본 사항은 해당…

  • 미국 구글 바로가기: 주소 링크 및 우회 접속 방법 3가지 | 해외 구글 바로가기

    한국에서 구글링을 할 때 자료가 미국에 비해 적기 때문에 미국 구글 바로가기 또는 해외 구글 바로가기를 생각하는 분들이 많습니다. 미국 구글 우회 접속 방법을 활용해서 미국의 구글 사이트에서 구글링을 하면 원하는 정보를 보다 수월하게 찾을 수 있습니다. ✅ 미국 구글 바로가기 첫번째 주소는 한국에서 보는 미국 구글 사이트이며, 두 번째는 미국 현지에서 보는…

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

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

  • 인터넷 속도 측정 사이트 5개(무설치) 추천

    보통 가정에서 사용하는 Internet 상품은 100Mbps, 500Mbps, 1Gbps 상품 중 하나를 선택해서 사용하게 됩니다. 내가 사용하는 Internet 속도가 잘 나오는지 궁금할 때가 있습니다. 인터넷 속도 평균 Mbps 등을 디테일하게 체크할 필요가 있을 수 있습니다. 설치나 로그인 없이 평균 인터넷 속도 측정이 가능한 6군데를 사이트 5군데를 사이트 리뷰 해 보겠습니다. 1. 인터넷 속도 측정…