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

크롬 개발자도구의 주요 기능은 웹 개발자가 웹사이트의 코드 테스트 디버그 작업을 할 수 있습니다. 파이어폭스, 마이크로소프트 엣지, 크롬 등 웹 브라우저에는 크롬처럼 ‘웹 개발 도구(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

  • 유튜브 프리미엄 가격 차이[3가지 가격]

    광고 없이 유튜브를 광고 없이 유튜브를 보기 위해 많은 사람이 유튜브 프리미엄에 가입합니다. 유튜브 프리미엄 가격은 크게 3가지 요금제로 나뉘게 됩니다. 이때 결제하는 기기(스마트폰, PC)에 따라 요금에 차이가 발생하는데요. 특히 애플 아이폰이나 아이패드에서 결제할 경우, PC 웹사이트에서 결제하는 것보다 가격이 더 비쌉니다. 이는 애플의 iOS 앱 결제 시 발생하는 높은 수수료 때문입니다. 각…

  • Namecheap Domains Vs Google Domains 포함 5개 도메인 등록 기관 비교

    워드프레스로 구축된 웹 사이트를 포함해서 사이트를 운영할 경우 도메인은 필수 요소입니다. 대표적인 도메인 등록 업체 Namecheap Domains과 Google Domains을 포함한 도메인 업체에 대해 비교해 보겠습니다. 먼저 우리가 알고 있을 만한 대표적인 도메인 등록 기관에 대해 알아 보겠습니다. 목차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….

  • 아이폰 캘린더 스팸 삭제 방법(아이폰XR기준)

    아이폰 사용 중에 아이폰 캘린더 구독에 이상한 알람이 오는 경우가 있습니다. 지속적으로 캘린더에 악성 메시지가 이벤트 알람으로 지속적으로오는 경우인데 아이폰 캘린더 스팸 삭제를 해야 합니다. 원인은 문제가 있는 웹사이트 등에 접속 후 알람이 뜨는 것이며 바이러스에 걸린 것이라고까지 볼 필요는 없습니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5 성능Performance panel1.6…

  • HTML 태그: SPAN 태그와 DIV 태그 차이와 용도

    웹 페이지를 구성할 때 자주 사용되는 태그가 div 태그와 span 태그 그리고 p 태그입니다. p(paragraph)는 단락을 나타내는 의미적 요소입니다. div(division)는 구획 및 구분의 약자로, 문서의 구조를 나누는 데 사용하는 블록 태그입니다. span은 텍스트 일부를 감싸는 데 사용하는 범용 태그입니다. 목차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 다운로드 및 사용법

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

  • [SEO] 구글 서치 콘솔이란 무엇인가? | 기본 용도 및 기능

    블로그를 포함한 인터넷 전자상거래, 회사 소개 웹 사이트 등 모든 종류의 웹 사이트의 중요한 목적은 웹 사이트의 웹 트래픽을 늘리는 것입니다. 전 세계 검색 시장의 높은 점유율을 차지하고 있고 앞으로도 유지할 것으로 보이는 구글에서 운영 중인 구글 서치 콘솔(Google Search Console)은 무엇인지 알아 보겠습니다. Google Search Console이란 웹 마스터가 색인에서 웹사이트의 상태를 모니터링…