환경설정

Sofia Emelianova
Sofia Emelianova
GitHub

설정을 탭합니다. 설정 > 환경설정을 사용하여 DevTools 및 패널의 모양과 동작을 구성합니다. 이 탭에는 일반 맞춤설정 옵션과 패널별 맞춤설정 옵션이 모두 표시됩니다.

환경설정을 설정하려면 설정을 탭합니다. 설정 > 환경설정을 열고 다음에 설명된 섹션 중 하나로 스크롤합니다.

환경설정 탭의 모양 섹션

각 설정의 기능을 확인하려면 이 페이지에서 설정 이름을 검색하고 설명을 펼치세요.

이 참조에서는 다음 아이콘으로 다양한 설정을 나타냅니다.

  • 체크박스입니다. 체크박스
  • 드롭다운 목록 드롭다운
  • 지원 중단되었습니다. 지원 중단됨

기본 환경설정을 복원하려면 환경설정 탭의 끝까지 스크롤하여 기본값 복원 및 새로고침을 클릭합니다.

디자인

이 섹션에는 DevTools 모양을 맞춤설정하는 옵션이 나열되어 있습니다.

테마: DevTools 테마를 시스템 환경설정에서 어둡게에서 밝게로 변경합니다.
  • 시스템 환경설정
  • 밝게
  • 어둡게

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

패널 레이아웃: 요소의 패널 레이아웃을 가로에서 세로로 변경합니다.
  • 가로
  • 카테고리
  • 자동

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

언어: 중국어로 된 설정 패널
  • 브라우저 UI 언어
  • 언어 옵션 중 하나입니다(이 예에서는 중국어).

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

소스

이 섹션에는 소스 패널을 맞춤설정하는 옵션이 나와 있습니다.

이 동영상에서는 이 옵션을 사용 설정하면 탭 간에 전환할 때 소스 패널이 탐색 트리에서 파일을 선택하는 방법을 보여줍니다.
소스 패널에는 상태 표시줄에 축소된 파일의 링크가 표시됩니다.

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

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

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

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

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

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

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

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

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

  • 모두는 모든 공백 문자를 점 (...)으로 표시합니다. 또한 편집기는 탭 문자를 선 (—)으로 표시합니다.
  • 후행: 줄 끝의 공백 문자를 연한 빨간색으로 강조 표시합니다.
공백 문자 표시: 선택한 옵션: 전체 및 후행.
  • 없음
  • 전체(...개)
  • 후행

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

예쁘게 출력하면 편집기에 긴 코드 한 줄이 여러 줄로 표시될 수 있으며, 줄 연속임을 나타내기 위해 앞에 -이 표시됩니다.

소스 패널의 멋진 형식의 코드
소스 패널에는 탐색 트리의 작성자 섹션에 .scss 파일이 표시됩니다. 요소 패널의 스타일 창에는 CSS 규칙 옆에 .scss 소스로 연결되는 링크가 표시됩니다.

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

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

보안상의 이유로 원격 파일 경로에서 로드하는 것이 금지된다는 내용의 콘솔 메시지
기본 들여쓰기: 재정의 옵션을 사용 중지하고 기본 들여쓰기를 공백 2개에서 8개로 변경한 다음 Tab 키로 변경합니다.
  • 공백 2개
  • 공백 4개
  • 공백 8개
  • 탭 문자

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

요소

이 섹션에는 요소 패널을 맞춤설정하는 옵션이 나와 있습니다.

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

네트워크

이 섹션에는 네트워크 패널을 맞춤설정하는 옵션이 나열되어 있습니다. 대부분의 옵션은 패널의 설정과 동일합니다.

로그 보존과 동일합니다. 페이지 로드 전반에서 요청을 저장합니다.

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

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

네트워크 패널의 '네트워크 로그 기록' 버튼

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

캐시 사용 중지와 동일합니다. 브라우저 캐시를 사용 중지합니다.

캐시 사용 중지 체크박스

프레임별로 그룹화와 동일합니다. 이 옵션은 인라인 프레임에서 시작된 요청을 그룹화합니다.

인라인 프레임별로 요청이 그룹화된 네트워크 요청 로그입니다.

성능

이 섹션에는 실적 패널을 맞춤설정하는 옵션이 나와 있습니다.

Flame 차트 마우스 휠 작업: 플레임 차트의 마우스 휠 작업을 스크롤에서 확대/축소로 변경합니다.
  • 스크롤
  • 확대/축소

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

콘솔

이 섹션에는 Console을 맞춤설정하는 옵션이 나와 있습니다. 대부분의 옵션은 콘솔 설정과 동일합니다.

콘솔과 설정의 유사한 옵션

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

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

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

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

CORS 오류가 표시됩니다.

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

콘솔에 CORS 오류가 표시됩니다.

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

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

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

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

확장

이 섹션에는 Chrome DevTools 확장 프로그램의 링크 처리를 맞춤설정하는 옵션이 나와 있습니다.

링크 처리: 링크를 열 때 사용할 옵션을 선택합니다.
  • 자동. 기본적으로 소스 패널에서 파일을 엽니다.
  • DevTools 확장 프로그램에서 추가할 수 있는 임의 옵션입니다.

지속성

이 섹션에는 DevTools에서 변경사항을 저장하는 방법을 제어하는 옵션이 나와 있습니다.

Debugger

이 섹션에는 디버거 동작을 제어하는 옵션이 나와 있습니다.

JavaScript가 사용 중지된 경우 웹페이지가 어떻게 표시되고 작동하는지 확인할 수 있습니다.

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

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

주소 표시줄의 아이콘과 DevTools의 소스 옆에 있는 경고 아이콘

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

호출 스택의 비동기 작업입니다.

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

전역

이 섹션에는 DevTools에 전역적으로 영향을 미치는 옵션이 나와 있습니다.

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

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

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

동기화

이 섹션에서는 기기 간의 설정 동기화를 설정할 수 있습니다.