환경설정

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

테마:

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

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

Elements > Styles 및 자매 탭과 Sources > Debugger 창에 영향을 미칩니다. auto 옵션을 사용하면 레이아웃이 DevTools 너비에 따라 달라집니다.

패널 레이아웃:

• 가로
• 카테고리
• 자동

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

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

언어:

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

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

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

일시중지 상태 오버레이 사용 중지는 코드 실행이 일시중지될 때 표시 영역에서 디버거에서 일시중지됨 오버레이를 숨깁니다.

각 업데이트 후 새로운 소식 표시는 Chrome 업데이트 후마다 새로운 소식 창 탭을 자동으로 엽니다.

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

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

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

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

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

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

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

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

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

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

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

자동 완성을 사용하면 편집기에서 유용한 추천을 받을 수 있습니다.

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

자동 괄호 닫기는 여는 괄호나 태그를 입력하면 닫는 괄호나 태그를 자동으로 추가합니다.

이 동영상은 자동 괄호 닫기를 사용 설정하기 전과 후에 여는 괄호를 입력하는 모습을 보여줍니다.

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

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

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

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

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

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

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

공백 문자 표시:

• 없음
• 전체(...개)
• 후행

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

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

이 동영상에서는 먼저 중단점에서 일시중지될 때 포커스가 없는 소스 패널을 보여줍니다. 그런 다음 이 옵션을 사용 설정하면 DevTools가 소스 패널에서 편집기를 열고 중단점이 있는 코드 줄을 표시합니다.

축소된 소스에 자동으로 pretty print 적용을 사용하면 소스를 읽을 수 있습니다.

pretty print 적용 시 에디터는 하나의 긴 코드 줄을 여러 줄로 표시할 수 있으며, 이 경우 줄 연속을 나타내는 -가 앞에 표시됩니다.

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

Allow scrolling past end of file을 사용하면 Editor의 마지막 줄보다 더 아래로 스크롤할 수 있습니다.

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

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

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

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

기본 들여쓰기:

• 스페이스 2개
• 스페이스 4개
• 스페이스 8개
• 탭 문자

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

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

자동 줄바꿈은 DOM 트리의 긴 줄을 끊고 다음 줄로 줄바꿈합니다.

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

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

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

상세 검사 도움말 표시는 요소 위로 마우스를 가져가면 검사 모드의 표시 영역에 도움말을 표시합니다.

마우스 오버 시 눈금자 표시: DOM 트리의 요소 위로 마우스를 가져가면 표시 영역에 눈금자가 표시됩니다.

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

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

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

이 동영상에서는 먼저 페이지 새로고침 시 요청 로그가 새로고침된 후 이 옵션을 사용 설정하면 유지되는 모습을 보여줍니다.

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

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

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

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

민감한 정보가 포함된 HAR 생성 허용은 다운로드HAR 내보내기 버튼에 옵션을 추가하여 민감한 정보가 포함되거나 포함되지 않은(정리된) 상태로 내보낼 수 있도록 합니다.

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

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

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

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

Flamechart mouse wheel action 은 Flame Chart를 탐색할 때 마우스 휠에 스크롤 또는 확대/축소 작업을 할당합니다.

Flame Chart 마우스 휠 작업:

• 스크롤
• 확대/축소

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

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

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

Selected context only를 사용하면 Console에 선택한 컨텍스트(상단, iframe, 작업자, 확장 프로그램)의 메시지만 표시됩니다.

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

XMLHttpRequests 로그는 콘솔에서 XHR 및 가져오기 요청을 기록하도록 합니다.

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

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

기록에서 자동 완성을 사용하면 입력할 때 이전에 실행한 명령어가 콘솔에 추천됩니다.

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

Enter 입력 시 자동 완성 추천 수락을 사용하면 Enter를 누를 때 콘솔에서 자동 완성 드롭다운의 선택된 추천을 수락합니다.

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

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

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

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

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

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

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

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

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

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

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

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

탐색 시 로그 보존을 사용하면 콘솔에서 탐색할 때마다 Navigated to 메시지를 로깅하고 모든 페이지에서 로그를 저장합니다.

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

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

링크 처리:

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

로컬 재정의 사용 설정을 사용하면 DevTools에서 페이지 로드 전반에 걸쳐 소스에 적용한 변경사항을 유지합니다.

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

JavaScript 사용 중지를 사용하면 JavaScript가 사용 중지되었을 때 웹페이지가 어떻게 표시되고 작동하는지 확인할 수 있습니다.

페이지를 새로고침하여 로드하는 동안 페이지가 JavaScript에 종속되는지 여부와 방식을 확인합니다.

자바스크립트가 사용 중지되면 Chrome은 주소 표시줄에 해당 아이콘을 표시하고 DevTools는 소스 옆에 경고 아이콘을 표시합니다.

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

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

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

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

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

입력하는 동안 검색을 사용하면 검색어를 입력하는 동안 DevTools가 첫 번째 검색 결과로 '이동'합니다. 사용 중지하면 Enter를 누를 때만 DevTools가 결과로 이동합니다.

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

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

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