DevTools 맞춤설정

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

이 페이지에는 Chrome DevTools를 맞춤설정하는 방법이 나와 있습니다.

설정

Settings > Preferences에는 DevTools를 맞춤설정하기 위한 많은 옵션이 있습니다.

설정 열기 및 환경설정을 참고하세요.

어두운 테마

설정 또는 명령 메뉴에서 어두운 테마를 사용 설정할 수 있습니다.

어두운 테마

  1. 명령어 메뉴를 엽니다.

  2. dark를 입력하기 시작하고 어두운 테마로 전환 명령어를 선택한 다음 Enter 키를 눌러 명령어를 실행합니다.

    어두운 테마 명령어입니다.

  3. 또는 설정 > 환경설정 > 모양 > 테마에서 테마를 설정할 수 있습니다.

동적 테마

DevTools는 Chrome의 색상 테마와 자동으로 일치할 수 있습니다.

테마를 설정하려면 다음 단계를 따르세요.

  1. 새 탭을 열고 오른쪽 하단에서 Chrome 맞춤설정을 클릭합니다.
  2. 디자인에서 테마 변경을 통해 테마를 선택하거나 색상 팔레트를 선택합니다.

DevTools가 Appearance에서 선택한 색상 테마를 매칭합니다.

동적 테마 설정을 사용 중지하려면 Settings > Preferences > Appearance > Match Chrome color scheme를 선택 해제하고 DevTools를 새로고침합니다.

창

Drawer에는 숨겨진 기능이 많이 포함되어 있습니다.

Esc 키를 눌러 창을 열거나 닫습니다.

창.

도구 더보기를 클릭하여 다른 Drawer 탭을 엽니다.

다른 Drawer 탭을 여는 더 많은 도구 버튼

DevTools 배치 변경

기본적으로 DevTools는 표시 영역의 오른쪽에 고정됩니다. 하단이나 왼쪽에 도킹하거나 DevTools를 별도의 창으로 고정 해제할 수도 있습니다.

두 가지 방법으로 DevTools의 위치를 변경할 수 있습니다.

  • 기본 메뉴: Customize and Control DevTools를 열고 다음을 클릭합니다.
    • 별도의 창으로 고정 해제
    • Dock to left
    • 아래로 고정
    • 오른쪽에 고정

  • 명령어 메뉴:

    1. 명령어 메뉴를 엽니다.
    2. dock를 입력하기 시작하면 하단, 왼쪽, 오른쪽에 고정, 고정 해제 또는 마지막 고정 위치 복원 등의 추천 옵션 중 하나를 선택할 수 있습니다.

명령 메뉴의 추천 도킹 옵션

키보드 단축키를 사용하여 마지막 고정 위치 복원을 전환하려면 다음을 누르세요.

  • Linux 또는 Windows: Control+Shift+D
  • macOS: Command+Shift+D

패널, 탭, 창 재정렬하기

순서를 변경하려면 다음 중 하나를 클릭하고 왼쪽 또는 오른쪽으로 드래그합니다.

  • DevTools 상단의 패널
  • 스타일, 계산됨, 레이아웃 등 요소 패널의 창
  • 페이지, 작업공간, 재정의 등 소스 패널의 창입니다.
  • DevTools 하단의 Drawer 탭

또한 창에서 패널과 탭을 위아래로 이동할 수 있습니다. 이렇게 하려면 패널 또는 탭을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 맨 위로 이동 또는 맨 아래로 이동을 선택합니다.

맞춤 탭 순서는 DevTools 세션 간에 유지됩니다.

패널 레이아웃

기본적으로 DevTools는 창 크기에 따라 패널 레이아웃을 자동으로 재정렬합니다. 자동 재정렬을 사용 중지할 수 있습니다. 설정 > 환경설정 > 모양으로 이동하여 원하는 대로 패널 레이아웃을 업데이트합니다.

예를 들어 화면 크기가 작으면 요소 패널의 스타일 창이 측면에서 하단으로 이동합니다. 스타일 창이 항상 측면에 유지되도록 하려면 패널 레이아웃을 세로로 변경합니다.

패널 레이아웃 변경

DevTools UI 언어 변경

설정 > 환경설정 > 모양 > 언어를 참고하세요.

설정으로 이동한 다음 환경설정에서 언어를 변경합니다.

동기화 설정

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

동기화를 사용 설정하려면 먼저 Chrome 동기화를 사용 설정하세요. 사용 설정하면 DevTools 설정이 기본적으로 동기화됩니다.

Chrome 프로필 동기화

Settings > Sync > Enable settings sync 체크박스를 사용하여 DevTools 설정 동기화를 개별적으로 사용 설정하거나 중지할 수 있습니다.

DevTools 동기화 설정

DevTools는 Workspace, Experiments, Devices 탭 및 기타 몇 가지 일반 설정을 제외한 대부분의 설정을 동기화합니다. 설정 동기화 사용 설정 체크박스의 상태도 기기 간에 동기화됩니다.

예를 들어 다음 모양 설정은 동기화되므로 모든 기기에서 일관된 환경을 사용할 수 있으며 동일한 설정을 다시 정의할 필요가 없습니다.

디자인 설정

그러나 개발자가 여러 사이트에서 디버그할 때 도크 환경설정이 다르므로 도크 설정은 동기화되지 않습니다.

부두요.

단축키 맞춤설정

설정 > 바로가기를 참고하세요.

실험 사용 설정

설정 > 실험을 참고하세요.