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 では、[デザイン] で選択したカラーテーマが照合されます。

動的テーマ設定をオフにするには、 [設定] > [設定] > [外観] > [Chrome のカラーパターンに合わせる] をオフにして、DevTools を再読み込みします。

ドロワー

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

Esc キーを押して、ドロワーを開閉します。

引き出し。

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

その他のツールボタン: 他のドロワータブを開きます。

DevTools の配置を変更する

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

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

  • メインメニュー: [Customize And Control DevTools] を開き、以下をクリックします。
    • 固定を解除して別ウィンドウに表示
    • 左に固定
    • 下部に固定
    • 右に固定

  • コマンド メニュー:

    1. コマンド メニューを開きます。
    2. dock と入力し、下、左、右に固定、固定解除、最後に固定した位置に戻すなどの候補のいずれかを選択します。

コマンド メニューの推奨ドッキング オプション。

キーボード ショートカットで [前回の固定位置を復元] を切り替えるには、次のキーを押します。

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

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

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

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

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

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

パネル レイアウト

デフォルトでは、DevTools はウィンドウのサイズに応じてパネルのレイアウトを自動的に並べ替えます。自動並べ替えはオフにできます。 [設定] > [設定] > [外観] に移動し、設定に応じてパネルのレイアウトを更新します。

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

パネルのレイアウトを変更する

DevTools の UI の言語を変更する

設定 > 設定 > 外観 > [言語] を参照してください。

[設定]、[各種設定] の順に選択して言語を変更します。

同期設定

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

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

Chrome プロファイルの同期。

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

DevTools の同期設定

DevTools では、[Workspace]、[Experiments]、[Devices] タブの設定と、その他の一般的な設定を除き、ほとんどの設定が同期されます。[設定の同期を有効にする] チェックボックスの状態もデバイス間で同期されます。

たとえば、次の外観設定は同期されるため、デバイス間で一貫したエクスペリエンスが提供され、同じ設定を再度定義する必要がなくなります。

表示設定。

ただし、デベロッパーが異なるサイトのデバッグ時に設定するドックは異なるため、ドックの設定は同期されません。

ホルダー。

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

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

試験運用版を有効にする

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