[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

  • 페이오니아: 가입, 수취 계좌 등록, 현지 은행 계좌 연결 방법(데스크탑)

    Published:macbeth

    페이오니아는 미국에 본사를 둔 글로벌 금융 서비스 기업으로, 주된 목적은 국제 온라인 송금, 글로벌 결제 처리, 프리랜서·기업을 위한 현지 통화 계좌 제공입니다. 예를 들어 아마존 어소시에이트 등을 할 때 연동이 필요한 경우 페이오니아를 사용할 수 있습니다. 해외 클라이언트로부터 대금을 받을 때, 혹은 글로벌 플랫폼(예: 아마존, 업워크, 피버 등)의 수익금을 인출할 때 페이오니아는 합리적인…

  • 아이폰 화면꺼짐 설정(시간30초부터~안함까지)

    Published:jarvis

    아이폰을 처음 산 후 사용하다 보면 화면 꺼짐으로 인한 불편함을 겪게 됩니다. 불편함을 없애기 위해 아이폰 화면꺼짐 설정 기능을 해제하거나 시간 설정을 하는 방법에 대해 알아보겠습니다. 먼저 아이폰의 설정 화면에서 디스플레이 및 밝기 탭으로 접속합니다. 접속 후 자동잠금 설정으로 접속합니다. [아이폰 화면꺼짐 설정 방법] – 디스플레이 및 밝기 -> 자동잠금 -> 시간 설정(아예…

  • 윈도우 이모티콘(이모지) 사용 방법 2가지&아이폰

    Published:jarvis

    윈도우 이모티콘은 이모지로도 부릅니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때1. 윈도우(or크롬) 이모티콘 단축키 윈도우 단축키는 윈도우와 크롬 2가지가 있습니다. 1.1 윈도우 단축키 윈도우 단축키는 윈도우 키 + ;(세미콜론)입니다. Window 키 + ;(세미콜론) 1.2 윈도우 단축키 크롬…

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

    Published:jarvis

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

  • SSL 보안등급 확인 사이트

    Published:I-var uknew

    내 웹사이트에 설정된 SSL 보안등급이 몇 등급인지 확인해 보도록 하겠다. SSL (Secure Sockets Layer)은 웹 콘텐츠, 이메일 또는 기타 유형의 정보를 전송하는 다른 상위 수준의 프로토콜을 통한 데이터 전송을 암호화하기 위한 네트워크 프로토콜이다. 오늘날 SSL 새로운 TLS (Transport Layer Security) 프로토콜 제품군으로 대체되었다. TLS는 클라이언트와 서버 간 네트워크로 통신 중 발생할 수 있는…

  • [WP] 올바른 워드프레스 플러그인 삭제 방법: 3가지 요소로 보기

    Published:jarvis

    워드프레스 CMS가 전 세계 점유율의 43%를 차지할 수 있는 이유는 다양한 테마와 플러그인에 이유가 있습니다. 개발자들은 워드프레스 관리자의 수요에 맞게 플러그인을 만들며 워드프레스는 5만 여 개 이상의 플러그인이 만들어졌습니다. 목차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 버튼으로 개발자 도구가 열리지 않을 때 워드프레스…