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