DevTools の新機能（Chrome 113）

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

ヘッダーのオーバーライドで CORS エラーを修正しました。

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

カスタム ヘッダーの追加。

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

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

Chromium の問題: 1288023。

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

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

  • コンソール トレースでは、[Show N more frames] リンクの下にあります。
  • [ソース] > [呼び出しスタック] の チェックボックス。 [無視リストに登録されたフレームを表示] をクリックします。

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

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

DevTools チームは、この実現に貢献した Nuxt、Vite、Rollup の各チームに感謝いたします。この実装の成功に不可欠であった皆様のご協力に感謝いたします。ご協力いただきありがとうございました。

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

無効な CSS プロパティと値

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

  • CSS プロパティが無効な場合、CSS 宣言全体（プロパティと値）
  • CSS プロパティが有効で、値が無効な場合のみ、値のみが返されます。

無効なプロパティ名と無効なプロパティ値。

この改善を実現してくれた Yisi（一丝） 様に、DevTools チームより感謝の意を表します。

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

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 Profiler のサポート終了のフェーズ 2 が開始されます。この段階では、パネルは開くことができますが、UI は使用できなくなります。

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

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

Chromium の問題: 1354548。

その他のハイライト

このリリースで修正された主な点は次のとおりです。

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

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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