이 페이지에는 Chrome DevTools를 맞춤설정할 수 있는 방법이 나와 있습니다.
설정
설정 > 환경설정에는 DevTools 맞춤설정을 위한 많은 옵션이 있습니다.
어두운 테마
설정 또는 명령어 메뉴에서 어두운 테마를 사용 설정할 수 있습니다.
- 명령어 메뉴를 엽니다.
dark를 입력하기 시작하고 어두운 테마로 전환 명령어를 선택한 다음 Enter 키를 눌러 명령어를 실행합니다.
또는 설정 > 환경설정 > 디자인 > 테마.
동적 테마
DevTools는 Chrome의 색상 테마를 자동으로 일치시킬 수 있습니다.
테마를 설정하려면 다음 단계를 따르세요.
- 새 탭을 열고 오른쪽 하단에서 Chrome 맞춤설정을 클릭합니다.
- 디자인에서 테마 변경을 통해 테마를 선택하거나 색상 팔레트를 선택합니다.
창
창에는 숨겨진 여러 기능이 포함되어 있습니다.
Esc 키를 눌러 창을 열거나 닫습니다.
도구 더보기를 클릭하여 다른 창을 엽니다. 탭
DevTools 위치 변경
기본적으로 DevTools는 표시 영역 오른쪽에 도킹되어 있습니다. 하단 또는 왼쪽에 도킹하거나 DevTools를 별도의 창으로 도킹 해제할 수도 있습니다.
두 가지 방법으로 DevTools의 위치를 변경할 수 있습니다.
- 기본 메뉴: Customize and Control DevTools를 열고 다음을 클릭합니다.
- 별도의 창으로 고정 해제
- Dock to left
- 아래에 고정
- 오른쪽에 고정
명령어 메뉴:
- 명령어 메뉴를 엽니다.
dock를 입력하고 추천 옵션(아래에 고정, 왼쪽, 오른쪽에 고정, 고정 해제 또는 마지막 고정 위치 복원) 중 하나를 선택합니다.
단축키로 마지막 도크 위치 복원으로 전환하려면 다음을 누르세요.
- Linux 또는 Windows: Control+Shift+D
- macOS: Command+Shift+D
패널, 탭, 창 재정렬
순서를 변경하려면 다음 중 하나를 클릭하고 왼쪽 또는 오른쪽으로 드래그합니다.
- DevTools 상단의 패널
- 스타일, 계산됨, 레이아웃 등 요소 패널의 창
- 페이지, 작업공간, 재정의 등 소스 패널의 창입니다.
- 창 탭이 있습니다.
또한 창에서 패널과 탭을 위아래로 이동할 수 있습니다. 이렇게 하려면 패널이나 탭을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 맨 위로 이동 또는 맨 아래로 이동을 선택합니다.
맞춤 탭 순서는 DevTools 세션 간에 유지됩니다.
패널 레이아웃
기본적으로 DevTools는 창 크기에 따라 패널 레이아웃을 자동으로 재정렬합니다. 자동 재정렬을 사용 중지할 수 있습니다. 설정 > 환경설정 > 모양으로 이동하여 원하는 대로 패널 레이아웃을 업데이트합니다.
예를 들어 화면 크기가 작으면 요소 패널의 스타일 창이 측면에서 하단으로 이동합니다. 스타일 창이 항상 측면에 배치되도록 하려면 패널 레이아웃을 세로로 변경합니다.
DevTools UI 언어 변경
설정 > 환경설정 > 모양 > 언어를 참고하세요.
동기화 설정
여러 기기에서 DevTools 설정을 동기화할 수 있습니다.
동기화를 사용 설정하려면 먼저 Chrome 동기화를 사용 설정합니다. 일단 사용 설정하면 DevTools 설정이 기본적으로 동기화됩니다.
Settings > Sync > Enable settings sync 체크박스를 사용하여 DevTools 설정 동기화를 개별적으로 사용 설정하거나 중지할 수 있습니다.
DevTools는 Workspace, Experiments, Devices 탭 및 기타 몇 가지 일반 설정을 제외한 대부분의 설정을 동기화합니다. 설정 동기화 사용 체크박스의 상태도 기기 간에 동기화됩니다.
예를 들어 다음 모양 설정은 동기화되므로 모든 기기에서 일관된 환경을 사용할 수 있으며 동일한 설정을 다시 정의할 필요가 없습니다.
하지만 개발자가 여러 사이트에서 디버깅할 때 도크 환경설정이 다르기 때문에 dock 설정은 동기화되지 않습니다.
단축키 맞춤설정
설정 > 바로가기를 참고하세요.
실험 사용 설정
설정 > 실험을 참조하세요.