DevTools のカスタマイズ

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

設定

[設定] >[Preferences] には、DevTools をカスタマイズするための多くのオプションが含まれています。

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

ダークモード

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

ダークモード。

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

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

    ダークモード コマンド。

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

動的テーマ

DevTools は Chrome のカラーテーマに自動的に適合します。

テーマを設定するには:

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

DevTools の色は、[外観] で選択したカラーテーマと一致します。

ドロワー

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

Esc キーを押すと、ドロワーを開いたり閉じたりできます。

引き出し。

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

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

DevTools の配置を変更する

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

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

  • メインメニュー: [DevTools の設定とカスタマイズ] を開き、以下をクリックします。
    • 固定を解除して別ウィンドウに表示
    • 左に固定
    • 下部に固定
    • 右に固定

  • コマンド メニュー:

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

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

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

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

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

並べ替えを変更するには、次のいずれかを左または右にドラッグします。

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

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

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

パネル レイアウト

デフォルトでは、DevTools はウィンドウ サイズに応じてパネル レイアウトを自動的に再配置します。自動並べ替えはオフにできます。アプリ [設定] >[設定] >[デザイン] を選択し、必要に応じてパネル レイアウトを更新します。

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

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

DevTools の UI の言語を変更する

[] > [設定] >[設定] >デザイン >言語。

言語を変更するには、[設定]、[設定] の順に移動します

同期設定

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

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

Chrome プロファイルの同期。

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

DevTools の同期設定

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

たとえば、以下の [デザイン] 設定は同期されるため、デバイス間で一貫したエクスペリエンスを提供でき、同じ設定を再度定義する必要はありません。

表示設定。

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

ホルダー。

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

[設定 >ショートカット。

テストを有効にする

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