[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

  • SSL보안인증서 법규정

    Published:jarvis

    SSL보안인증서는 개인정보를 취급하는 모든 웹사이트에 의무적으로 구축하도록 대한민국 법 규정에 정해져 있습니다. SSL보안인증서 법규정은 로그인이 필요한 개인정보가 있는 웹사이트와 (회원정보가 없어도)결제 모듈이 구축된 개인정보를 취급하는 쇼핑몰에 SSL보안인증서 설치가 필수라는 것입니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때…

  • 워드프레스 테마 확인(&플러그인) 감지 사이트

    Published:jarvis

    사이트가 xe 또는 워드프레스로 만들어졌는지 궁금할 때가 있습니다. 개인적으로 xe보다는 더 많은 확장이 가능한 플러그인과 많은 종류의 테마, 그리고 더 안정적인 사이트 및 서버 관리가 가능한 워드프레스가 더 관리하기 편하다고 생각합니다. 워드프레스 테마 확인 사이트에 대해 알아보겠습니다. 왜냐하면 워드프레스 블로그를 운영하다 보면, 다른 워드프레스로 운영되는 홈페이지는 어떤 플러그인과 어떤 테마를 사용하는지 궁금할 때가…

  • [SEO] 링크 교환이란? | 상호링크, 백링크 교환

    Published:jarvis

    검색 엔진 최적화를 위해 온페이지 SEO만으로는 많은 시간이 소요될 수 있습니다. 오프페이지 SEO 중 하나인 백링크를 생각하게 되며, 링크 빌딩을 위한 링크 교환에 대해 생각하게 됩니다. 링크 교환(Link-Exchange)이란 각각의 다른 웹사이트가 링크를 교환함으로써 링크 주스(점수)를 보내는 것입니다. 상호 링크, 상호 백링크라고도 부릅니다. 목차1. 크롬 개발자도구 기능1.1 요소Elements panel1.2 콘솔Console panel1.3 소스Sources panel1.4 네트워크Network panel1.5…

  • [SEO] 이미지 메타 데이터가 SEO에 미치는 영향 및 수정 방법

    Published:jarvis

    웹 사이트를 운영하면서 비용이 발생하지 않는 유기적인 트래픽을 획득하려면 웹 사이트 속도, 백링크, 이미지 대체 텍스트 등 다양한 방법을 적용하며 운영하게 됩니다. 웹 사이트 SEO에 약간의 점수를 더 얻고 싶다면 이미지 메타 데이터에 대한 고려를 생각해 볼 수 있습니다. 생성한 콘텐츠가 첫 페이지에 뜨지만 1~3번째 노출하기 위한 여러가지 방법이 있지만 작문 실력 외에…

  • [구글 렌즈] 구글 이미지 검색 방법(PC&모바일 앱)

    Published:jarvis

    PC 또는 모바일에서 가지고 있는 이미지와 비슷한 이미지를 찾아야 하는 경우에 보통 구글 렌즈를 이용한 이미지 검색 기능을 활용합니다. 구글 이미지 검색을 하는 이유는 보통 특정 장소의 동·식물, 미술품과 같은 작품에 대해 텍스트로 물어볼 수 없는 이유가 있습니다. 이를테면 식물원에 갔는데 어떤 식물인지 궁금하지만 텍스트로 검색해서 확인할 수 없는 경우에 모바일 크롬의 구글…

  • [SEO] 구글 검색 상태 대시보드(2023년 8월)

    Published:jarvis

    구글이 2023년 8월 Google Search Status Dashboard(구글 검색 상태 대시보드) 업데이트를 발표 했습니다. 구글에서 검색 진행 시 최신 순위 업데이트 중 ‘웹사이트 소유자’와 관련된 업데이트가 표시된다고 합니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때구글 검색 상태 대시보드에…