DevTools の新機能（Chrome 113）

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

ネットワーク レスポンス ヘッダーをオーバーライドする

[ネットワーク] パネルでレスポンス ヘッダーをオーバーライドできるようになりました。以前は、HTTP レスポンス ヘッダーを試すにはウェブサーバーにアクセスする必要がありました。

レスポンス ヘッダーのオーバーライドを使用すると、次のようなさまざまなヘッダーの修正をローカルでプロトタイピングできます。

ヘッダーをオーバーライドするには、[ネットワーク] > [ヘッダー] > [レスポンス ヘッダー] に移動し、ヘッダーの値にカーソルを合わせて 編集] をクリックします。 をクリックして編集します。

ヘッダーのオーバーライドによって CORS エラーが修正されました。

カスタム ヘッダーを追加することもできます。

カスタム ヘッダーを追加します。

すべてのオーバーライドを 1 か所で編集するには、[Sources] > [Overrides] で .headers ファイルを編集します。[オーバーライド ルールを追加] をクリックして、ワイルドカード（*）を使用して複数のリクエストをオーバーライドすることもできます。

すべてのオーバーライドを編集します。

Chromium の問題: 1288023。

Nuxt、Vite、Rollup のデバッグの改善

デバッグ中に問題をより迅速に特定できるように、拡張されたスタック トレースでは、Nuxt 3.3 以降で生成されたソースから取得されたフレームが非表示になります。DevTools はこのようなフレームをスキップします。

  • コンソールのトレースで、[N 個のフレームをさらに表示] リンクの下。
  • [ソース] > [コールスタック] の [チェックボックス。 無視リストに登録されたフレームを表示] で確認できます。

サードパーティの無視リストを有効にする前後のスタック トレース。

これらの改善を実現するため、DevTools、Nuxt、Vite、Rollup の各チームが連携して x_google_ignoreList ソースマップ拡張機能を採用しました。

DevTools チームは、この機能を可能にしてくれた Nuxt、Vite、Rollup の各チームに感謝いたします。この実装の成功に不可欠なご尽力とご協力に感謝いたします。ご協力いただき、誠にありがとうございました。

[要素] > [スタイル] の CSS の改善

無効な CSS プロパティと値

CSS の問題を迅速に診断できるよう、[スタイル] ペインで次の項目が取り消し線で表示されるようになりました。

  • CSS プロパティが無効な場合、CSS 宣言全体（プロパティと値）。
  • CSS プロパティは有効だが値が無効な場合の値のみ。

プロパティ名が無効、プロパティ値が無効。

この改善を実現してくれた Yisi（一丝）に感謝します。

アニメーションのショートハンド プロパティのキーフレームへのリンク

animation 短縮形 CSS プロパティに、対応する @keyframes @ 規則へのリンクが含まれるようになりました。これにより、[スタイル] ペインをよりすばやく移動できます。

アニメーションのショートハンド プロパティ内のキーフレームへのリンク。

Chromium の問題: 1420656。

新しいコンソール設定: Enter キーで予測入力

前のバージョン（112）以降では、Enter キーを押したときにオートコンプリート候補を適用するように DevTools のコンソールを構成できます。

デフォルトでは、予測入力の候補を確定するには Tab または Arrow right を押します。Enter での自動補完も有効にするには、設定] をタップします。 [設定] > [コンソール] > チェックボックス。 [Enter キーで自動補完候補を確定する] を有効にします。

設定の対応するチェックボックス。

また、別の設定のテキストが チェックボックス。 [コード評価をユーザー アクションとして扱わない] に変更され、よりわかりやすくなりました。

Chromium の問題: 1276960。

コマンド メニューで作成したファイルを強調表示

コマンド メニューのクイック オープン ダイアログで、無視リストに登録されているサードパーティ ファイルがグレー表示されるようになり、ユーザーが作成したファイルがより強調表示されるようになりました。

変更前後のクイック オープン ダイアログで無視リストに登録されたスクリプト。

Chromium の問題: 1424345。

JavaScript プロファイラの非推奨化: 第 2 段階

Chrome 58 の時点で、DevTools チームは最終的に JavaScript プロファイラを非推奨とし、Node.js と Deno のデベロッパーが JavaScript CPU パフォーマンスのプロファイリングに パフォーマンス パネルを使用するようにする計画を立てていました。

DevTools バージョン 113 では、4 段階の JavaScript プロファイラのサポート終了の第 2 段階が開始されます。このフェーズでは、パネルを開くことはできますが、UI は使用できなくなります。

CPU パフォーマンスをプロファイリングするには、[パフォーマンス パネルに移動] をクリックします。

JavaScript プロファイラの非推奨化。

Chromium の問題: 1354548。

その他のハイライト

このリリースでの重要な修正は次のとおりです。

  • [ソース] パネルのプリティ プリントで、Unicode 文字を含む変数名が正しく処理されないバグを修正しました（1425055）。
  • [問題] タブに、標準外の HTML 値に関する自動入力の問題についての新しいメッセージ（1399414）が追加されました。

プレビュー チャネルをダウンロードする

Chrome の Canary、Dev、Beta をデフォルトの開発ブラウザとして使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーがサイトの問題を発見する前に、問題を特定することもできます。

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容の一覧。