DevTools のカスタマイズ

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

このページでは、Chrome DevTools をカスタマイズする方法について説明します。

設定

[Settings] > [Preferences] には、DevTools をカスタマイズするための多くのオプションがあります。

設定を開くと設定をご覧ください。

ダークモード

ダークモードは [設定] またはコマンド メニューで有効にできます。

1. コマンド メニューを開きます。

2. 「dark」と入力し、[ダークモードに切り替える] コマンドを選択して、Enter キーを押してコマンドを実行します。

   

3. または、 [設定] > [設定] > [デザイン] > [テーマ] でテーマを設定します。

動的テーマ

DevTools では、Chrome のカラーテーマを自動的に調整できます。

テーマを設定するには:

1. 新しいタブを開き、右下にある編集 [Chrome をカスタマイズ] をクリックします。
2. [デザイン] で壁紙の [テーマを変更] からテーマを選択するか、カラーパレットを選択します。

引き出し

ドロワーには、多くの隠れた機能が含まれています。

ドロワーを開閉するには、Esc キーを押します。

[その他のツール] をクリックして、他の [ドロワー] タブを開きます。

DevTools の配置を変更する

デフォルトでは、DevTools はビューポートの右側にドッキングされています。下部または左側にドッキングしたり、DevTools のドッキングを解除して別のウィンドウでドッキングしたりすることもできます。

DevTools の配置は、次の 2 つの方法で変更できます。

• メインメニュー: Customize And Control DevTools を開き、次のいずれかをクリックします。
  • ホルダーから別のウィンドウで表示
  • 左に固定
  • 下部に固定
  • 右に固定

• コマンド メニュー:

  1. コマンド メニューを開きます。
  2. 「dock」と入力し、提案されたオプション（下、左、右、固定解除、最後の固定位置に戻す）から 1 つを選択します。

キーボード ショートカットで [ホルダーの最後の位置に戻す] を切り替えるには、以下のキーを押します。

• Linux または Windows: Ctrl+Shift+D
• macOS の場合: Command+Shift+D

パネル、タブ、ペインを並べ替える

順序を変更するには、次のいずれかをクリックして左右にドラッグします。

• DevTools の上部にあるパネル。
• [要素] パネルのペイン（[スタイル]、[計算済み]、[レイアウト] など）。
• [ページ]、[ワークスペース]、[オーバーライド] などの [ソース] パネルのペイン。
• [ドロワー] タブ。

また、ドロワーとの間でパネルやタブを上下に移動することもできます。移動するには、パネルまたはタブを右クリックして、プルダウン メニューから [一番上に移動] または [一番下に移動] を選択します。

カスタムタブの順序は、DevTools のセッションをまたいで維持されます。

パネル レイアウト

デフォルトでは、DevTools はウィンドウ サイズに応じてパネル レイアウトを自動的に再配置します。自動再配置を無効にできます。[設定] に移動し、必要に応じてパネル レイアウトを更新します。

たとえば、画面サイズが小さい場合は、[要素] パネルの [スタイル] ペインが横から下に移動します。スタイルペインを常に横にしておくには、パネル レイアウトを垂直に変更します。

DevTools の UI 言語を変更する

[設定] > [設定] > [デザイン] > [言語] をご覧ください。

同期設定

DevTools の設定は複数のデバイス間で同期できます。

同期を有効にするには、まず Chrome 同期を有効にします。有効にすると、DevTools の設定はデフォルトで同期されます。

[設定] > [同期] > [設定の同期を有効にする] チェックボックスを使用すると、DevTools の設定の同期を個別に有効または無効にできます。

DevTools では、[ワークスペース] タブ、[テスト] タブ、[デバイス] タブとその他のいくつかの全般設定を除き、ほとんどの設定が同期されます。[設定の同期を有効にする] チェックボックスの状態は、デバイス間でも同期されます。

たとえば、次の [表示形式] の設定は同期されているため、すべてのデバイスで一貫したエクスペリエンスを提供でき、同じ設定を再定義する必要はありません。

ただし、デベロッパーがサイトでデバッグする際のホルダーの設定が異なるため、ホルダーの設定は同期されません。

キーボード ショートカットをカスタマイズする

[設定] > [ショートカット] をご覧ください。

テストを有効にする

詳しくは、[設定] > [テスト] をご覧ください。