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 は、[表示] で選択したカラーテーマと一致します。

引き出し

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

ドロワーを開閉するには、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 の設定はデフォルトで同期されます。

Chrome プロフィールの同期。

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

DevTools の同期設定

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

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

外観の設定。

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

ホルダー。

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

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

テストを有効にする

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