DevTools 맞춤설정

Sofia Emelianova
Sofia Emelianova

이 페이지에는 Chrome DevTools를 맞춤설정할 수 있는 방법이 나열되어 있습니다.

설정

설정 페이지. Settings > Preferences에는 DevTools를 맞춤설정하기 위한 여러 옵션이 포함되어 있습니다.

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

어두운 테마

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

어두운 테마

  1. 명령어 메뉴를 엽니다.
  2. dark를 입력하다가 어두운 테마로 전환 명령어를 선택한 다음 Enter를 눌러 명령어를 실행합니다.

    어두운 테마 명령어

  3. 또는 설정 페이지. 설정 > 환경설정 > 모양 > 테마에서 테마를 설정합니다.

동적 테마

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

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

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

DevTools가 Appearance에서 선택한 색상 테마와 일치합니다.

에는 숨겨진 기능이 많이 있습니다.

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

서랍

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

다른 창 탭을 여는 도구 더보기 버튼입니다.

DevTools 배치 변경

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

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

  • 기본 메뉴: 자세히 알아보기 위해 Customize And Control DevTools를 열고 다음을 클릭합니다.
    • 도킹 해제를 탭합니다. 별도의 창으로 고정 해제
    • 왼쪽에 고정 왼쪽에 고정
    • 하단에 고정 하단에 고정
    • 오른쪽에 고정 오른쪽에 고정
  • 명령어 메뉴:

    1. 명령어 메뉴를 엽니다.
    2. dock을(를) 입력한 후 추천 옵션 중 하나를 선택합니다. 아래쪽, 왼쪽, 오른쪽, 도킹 해제, 마지막 도크 위치 복원 중에 한 가지를 선택할 수 있습니다.

명령 메뉴에 권장되는 고정 옵션

단축키로 마지막 도크 위치 복원으로 전환하려면 다음을 누르세요.

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

패널, 탭, 창 재정렬하기

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

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

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

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

패널 레이아웃

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

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

패널 레이아웃 변경

DevTools UI 언어 변경

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

설정 > 환경설정으로 이동하여 언어를 변경하세요.

동기화 설정

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

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

Chrome 프로필 동기화를 탭합니다.

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

DevTools 동기화 설정

DevTools는 작업공간, 실험, 기기 탭에 있는 설정과 몇 가지 기타 일반 설정을 제외한 대부분의 설정을 동기화합니다. 설정 동기화 사용 체크박스의 상태도 기기 간에 동기화됩니다.

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

디자인 설정

하지만 개발자마다 다른 사이트에서 디버깅할 때 도크 환경설정이 다르기 때문에 도크 설정은 동기화되지 않습니다.

도크

단축키 맞춤설정

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

실험 사용 설정

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