환경설정

테마 는 DevTools UI의 색상 테마를 설정합니다.

테마:

• 시스템 환경설정
• 밝게
• 어둡게

패널 레이아웃 은 창을 패널로 정렬합니다.

요소 > 스타일 및 관련 탭, 소스 > 디버거 창에 영향을 미칩니다. auto 옵션을 사용하면 레이아웃이 DevTools 너비에 따라 달라집니다.

패널 레이아웃:

• 가로
• 카테고리
• 자동

Language : DevTools UI의 언어를 설정합니다.

이 설정을 적용하려면 DevTools를 새로고침하세요.

언어:

• 브라우저 UI 언어
• 언어 옵션 중 하나(이 예에서는 중국어)

Ctrl/Cmd + 0~9 단축키를 사용하여 패널 전환을 사용하면 키보드를 사용하여 패널을 열 수 있습니다.

이 동영상에서는 해당하는 단축키를 사용하여 탭 간에 전환하는 방법을 보여줍니다.

일시중지 상태 오버레이 사용 중지를 선택하면 코드 실행이 일시중지될 때 표시 영역에서 디버거에서 일시중지됨 오버레이가 숨겨집니다.

각 업데이트 후 새로운 기능 표시: Chrome 업데이트 후 새로운 기능 창 탭이 자동으로 열립니다.

익명 및 콘텐츠 스크립트로 검색을 사용하면 검색 탭을 사용하여 Chrome 확장 프로그램의 파일을 포함하여 로드된 모든 자바스크립트 파일을 검색할 수 있습니다.

이 동영상에서는 확장 프로그램 소스 파일에서 텍스트를 검색하는 방법을 보여줍니다.

사이드바에 자동으로 파일 표시: 편집기에서 탭 간에 전환할 때 소스 > 페이지 창의 파일이 선택됩니다.

이 동영상은 이 옵션을 사용 설정한 상태에서 탭 간에 전환할 때 Sources 패널이 탐색 트리에서 파일을 선택하는 방법을 보여줍니다.

JavaScript 소스 맵 사용 설정을 사용하면 DevTools가 생성되거나 축소된 JavaScript 파일의 소스를 찾을 수 있습니다.

탭 이동 포커스 사용 설정을 사용하면 탭 키가 편집기에 탭 문자를 삽입하는 대신 DevTools 내에서 포커스를 이동합니다.

DevTools를 새로고침해야 합니다.

이 동영상에서는 먼저 Tab 키로 삽입된 탭 문자를 보여줍니다. 그런 다음 이 옵션을 사용 설정하고 DevTools를 새로고침하면 Tab 키를 눌러 포커스를 이동할 수 있습니다.

들여쓰기 감지는 편집기에서 열린 소스 파일의 들여쓰기로 설정합니다.

DevTools를 새로고침해야 합니다.

이 동영상에서는 먼저 공백 8개의 기본 들여쓰기를 보여줍니다. 그런 다음 이 옵션을 사용 설정하면 기본 들여쓰기가 소스 파일의 들여쓰기로 재정의됩니다.

자동 완성을 사용하면 편집기에서 편리한 제안을 할 수 있습니다.

이 동영상에는 처음에 추천이 표시되지 않습니다. 그런 다음 이 옵션을 사용 설정하면 편집기에 명령어 완료 추천이 표시됩니다.

자동 괄호 닫기: 시작 괄호를 입력하면 종료 괄호 또는 태그가 자동으로 추가됩니다.

이 동영상에서는 자동 대괄호 닫기를 사용 설정하기 전과 후의 시작 대괄호 입력을 보여줍니다.

괄호 일치는 편집기에서 대괄호, 중괄호 또는 쌍이 없는 괄호에 밑줄이 표시되고 연한 빨간색으로 강조 표시됩니다.

코드 접기를 사용하면 편집기에서 중괄호로 묶인 코드 블록을 접고 펼칠 수 있습니다.

DevTools를 새로고침해야 합니다.

이 동영상에서는 이 옵션을 사용 설정할 때 코드 블록을 접는 방법을 보여줍니다.

공백 문자 표시 : 편집기에 공백 문자를 표시합니다.

DevTools를 새로고침해야 합니다. 옵션은 다음 작업을 실행합니다.

• 모두는 모든 공백 문자를 점(...)으로 표시합니다. 또한 편집기는 탭 문자를 선(—)으로 표시합니다.
• 후행은 줄 끝에 있는 공백 문자를 연한 빨간색으로 강조 표시합니다.

공백 문자 표시:

• 없음
• 전체(...개)
• 트레일링

디버깅 중 인라인으로 변수 값 표시는 실행이 일시중지된 동안 할당 문 옆에 변수 값을 표시합니다.

중단점 트리거 시 소스 패널 포커스: 실행을 일시중지한 중단점이 있는 줄에서 Sources > Editor를 엽니다.

이 동영상에서는 먼저 중단점에서 일시중지되었을 때 소스 패널이 포커스가 맞지 않는 모습을 보여줍니다. 그런 다음 이 옵션을 사용 설정하면 DevTools가 Sources 패널에서 Editor를 열고 중단점이 있는 코드 줄을 표시합니다.

최소화된 소스에 자동으로 pretty print 적용을 통해 소스를 읽을 수 있습니다.

pretty-printed인 경우 Editor는 여러 줄로 된 긴 코드 줄을 표시할 수 있으며, 그 앞에 -가 표시되어 줄 연속임을 나타냅니다.

CSS 소스 맵 사용 설정을 사용하면 DevTools에서 생성된 CSS 파일(예: .scss)의 소스를 찾아 표시할 수 있습니다.

파일 끝을 지나 스크롤 허용을 선택하면 편집기의 마지막 줄보다 더 스크롤할 수 있습니다.

이 옵션을 사용 설정할 때 파일 끝을 지나 스크롤하는 방법을 보여주는 동영상입니다.

DevTools가 원격 파일 경로에서 소스 맵과 같은 리소스를 로드하도록 허용합니다. 보안상의 이유로 기본적으로 사용 중지되어 있습니다.

사용 중지된 상태로 두면 DevTools에서 다음과 유사한 메시지를 콘솔에 로깅합니다.

기본 들여쓰기 를 사용하면 탭 키가 편집기에 삽입하는 공백 수를 선택할 수 있습니다.

기본 들여쓰기:

• 공백 2개
• 공백 4개
• 공백 8개
• 탭 문자

이 예에서는 기본 들여쓰기를 먼저 8개의 공백으로 설정한 다음 탭 문자로 설정하는 방법을 보여줍니다.

사용자 에이전트 shadow DOM 표시: DOM 트리에 shadow DOM 노드를 표시합니다.

단어 줄바꿈은 DOM 트리에서 긴 줄을 줄바꿈하고 다음 줄로 줄바꿈합니다.

HTML 주석 표시는 DOM 트리에 HTML 주석을 표시합니다.

마우스 오버 시 DOM 노드 표시: 검사 모드에서 뷰포트의 요소 위로 마우스를 가져가면 DOM 트리에서 해당 노드가 선택됩니다.

이 동영상에서는 먼저 DOM 트리에서 DOM 노드가 선택되지 않는 것을 보여줍니다. 그런 다음 이 옵션을 사용 설정하면 마우스 오버 시 요소 패널에서 노드를 선택합니다.

상세 검사 도움말 표시: 요소 위로 마우스를 가져가면 검사 모드의 뷰포트에 도움말이 표시됩니다.

마우스 오버 시 눈금자 표시: DOM 트리에서 요소 위로 마우스를 가져갈 때 표시 영역에 눈금자를 표시합니다.

CSS 문서 도움말 표시: 스타일 창에서 속성 위로 마우스를 가져가면 간단한 설명이 포함된 도움말이 표시됩니다.

자세히 알아보기 링크를 클릭하면 속성에 대한 MDN CSS 참조로 이동합니다.

로그 보존은 네트워크 패널의 로그 보존과 동일합니다. 페이지 로드 전체 요청 저장

이 동영상에서는 페이지 새로고침 시 요청 로그를 새로고침한 후 이 옵션을 사용 설정할 때 유지되는 요청 로그를 보여줍니다.

네트워크 로그 기록은 네트워크 패널의 네트워크 로그 기록과 동일합니다. 네트워크 로그에서 요청 기록을 시작하거나 중지합니다.

네트워크 요청 차단 사용 설정은 네트워크 요청 차단 창의 패턴과 일치하는 요청을 차단합니다.

이 동영상에서는 먼저 요청이 차단되지 않았음을 보여줍니다. 이 옵션을 사용 설정하면 네트워크 요청 차단 창의 패턴이 이를 차단합니다.

DevTools가 열려 있는 동안 캐시 사용 중지는 Network 패널의 캐시 사용 중지와 동일합니다. 브라우저 캐시를 사용 중지합니다.

민감한 정보가 포함된 HAR을 생성하도록 허용을 선택하면 다운로드HAR 내보내기 버튼에 민감한 정보가 있거나 없는 (삭제됨) 옵션이 추가됩니다.

민감한 정보는 Cookie, Set-Cookie, Authorization 헤더에 있는 데이터입니다.

색상 코드 리소스 유형은 네트워크 로그의 Waterfall 열에 있는 유형에 따라 요청을 서로 다른 색상으로 강조 표시합니다.

프레임별로 네트워크 로그 그룹화는 네트워크 패널의 프레임별 그룹화와 동일합니다. 이 옵션은 인라인 프레임에서 시작된 요청을 그룹화합니다.

이 사이트에서 광고 차단 강제 실행은 DevTools가 열려 있는 동안 페이지에서 감지된 광고를 차단합니다.

Flamechart 마우스 휠 작업 는 플 flamechart를 탐색할 때 마우스 휠에 스크롤 또는 확대/축소 작업을 할당합니다.

Flame 차트 마우스 휠 작업:

• 스크롤
• 확대/축소

이 예에서는 성능 패널의 플레임 차트에서 스크롤 및 확대/축소 마우스 휠 작업을 모두 보여줍니다.

네트워크 메시지 숨기기: 콘솔에서 네트워크 메시지를 숨깁니다.

이 동영상에서는 설정과 콘솔 설정에서 이 옵션을 사용하여 네트워크 메시지를 숨기는 방법을 보여줍니다.

선택된 컨텍스트만을 선택하면 콘솔에 선택한 컨텍스트(상단, iframe, 작업자 또는 확장 프로그램)의 메시지만 표시됩니다.

이 동영상은 설정과 콘솔 > 설정에서 이 옵션을 사용 설정하고 콘솔에서 컨텍스트를 선택하는 방법을 보여줍니다.

Log XMLHttpRequests는 Console에서 XHR 및 가져오기 요청을 로깅하도록 합니다.

이 동영상에서는 설정 및 콘솔 > 설정에서 이 옵션을 사용 설정하고 XHR finished loading 메시지를 콘솔에 로깅하는 방법을 보여줍니다.

타임스탬프 표시를 사용하면 콘솔에 메시지 옆에 타임스탬프가 표시됩니다.

기록에서 자동 완성을 사용하면 Console에서 입력하는 동안 이전에 실행한 명령어를 추천합니다.

콘솔 > 설정에서도 동일한 옵션을 찾을 수 있습니다.

Enter 입력 시 자동 완성 추천 수락을 선택하면 Enter 키를 누르면 Console에서 자동 완성 드롭다운에서 선택한 추천을 수락합니다.

이 동영상은 이 옵션을 사용 설정하기 전과 후에 Enter 키를 누르면 어떻게 되는지 보여줍니다.

콘솔에서 유사한 메시지 그룹화를 사용하면 콘솔에서 유사한 메시지를 그룹화합니다.

콘솔 > 설정에서도 동일한 옵션을 찾을 수 있습니다.

콘솔에 CORS 오류 표시를 사용하면 콘솔에 로깅된 CORS 오류가 표시됩니다.

Console > Settings에서도 동일한 옵션을 찾을 수 있습니다.

조기 평가를 사용하면 명령어를 입력할 때 콘솔에 출력 미리보기가 표시됩니다.

콘솔 > 설정에서도 동일한 옵션을 찾을 수 있습니다.

이 동영상에서는 다양한 출력 미리보기를 보여줍니다.

코드 평가를 사용자 작업으로 취급을 사용하면 콘솔에서 실행하는 모든 명령어를 사용자 상호작용으로 전환할 수 있습니다.

즉, 평가 시 navigator.userActivation.isActive를 true로 설정합니다. Console > Settings에서도 동일한 옵션을 찾을 수 있습니다.

이 동영상은 이 옵션을 사용 설정하기 전과 후의 navigator.userActivation.isActive 평가 결과를 보여줍니다.

console.trace() 메시지 자동 펼치기를 사용하면 콘솔에서 로그를 기록할 때 펼쳐진 console.trace() 메시지를 표시합니다.

탐색 시 로그 보존을 사용하면 Console이 모든 탐색 시 Navigated to 메시지를 기록하고 모든 페이지에 로그를 저장합니다.

Console > Settings에서도 동일한 옵션을 찾을 수 있습니다.

링크 처리 는 소스 파일의 링크를 클릭할 때 파일을 여는 옵션을 설정합니다(예: 요소 > 스타일 창에서).

링크 처리:

• 자동. 기본적으로 소스 패널에서 파일을 엽니다.
• DevTools 확장 프로그램에서 추가할 수 있는 임의의 옵션입니다.

로컬 재정의 사용 설정을 사용하면 DevTools에서 페이지를 새로고침할 때 소스에 적용한 변경사항이 유지됩니다.

자세한 내용은 로컬 재정의를 참조하세요.

JavaScript 사용 중지를 사용하면 JavaScript가 사용 중지되었을 때 웹페이지의 디자인과 동작을 확인할 수 있습니다.

페이지를 새로고침하여 페이지가 로드되는 동안 JavaScript에 종속되는지, 그리고 어떻게 종속되는지 확인합니다.

JavaScript가 사용 중지되면 Chrome의 주소 표시줄에 해당하는 아이콘이 표시되고 DevTools의 Sources 옆에 경고 아이콘이 표시됩니다.

비동기 스택 트레이스 사용 중지는 호출 스택에서 비동기 작업의 '전체 내용'을 숨깁니다.

기본적으로 디버거는 사용 중인 프레임워크에서 이러한 추적을 지원하는 경우 비동기 작업을 추적하려고 시도합니다.

자세한 내용은 비동기 스택 트레이스 보기를 참고하세요.

팝업에 대해 DevTools 자동 열기를 선택하면 새 탭을 여는 링크를 클릭하면 DevTools가 열립니다. 즉, target=_blank가 있는 모든 링크입니다.

이 동영상에서는 먼저 DevTools를 사용하지 않고 링크를 클릭하여 새 탭을 여는 방법을 보여줍니다. 그런 다음 이 옵션을 사용 설정하면 DevTools가 *있는* 새 탭이 열립니다.

입력과 동시에 검색을 사용하면 검색어를 입력할 때 DevTools가 첫 번째 검색 결과로 '이동'합니다. 사용 중지된 경우 Enter 키를 누를 때만 DevTools에서 결과로 이동합니다.

이 동영상은 먼저 사용자가 검색어를 입력할 때 DevTools가 '점프'하는 방식을 보여줍니다. 이 옵션을 사용 설정한 경우 Enter를 누르면 DevTools에서 첫 번째 결과로 이동합니다.

설정 동기화 사용을 사용하면 여러 기기에서 DevTools 설정을 동기화할 수 있습니다.

이 설정을 사용하려면 먼저 Chrome 동기화를 사용 설정하세요. 자세한 내용은 동기화 설정을 참고하세요.