このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 113）

Sofia Emelianova

Jecelyn Yeen

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

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

レスポンスヘッダーのオーバーライドを使用すると、さまざまなヘッダーの修正をローカルでプロトタイピングできます（ただしこれらに限定されません）。

ヘッダーをオーバーライドするには、[Network] > [Headers] > [Response Headers] に移動し、ヘッダーの値にカーソルを合わせ、をクリックして編集します。

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

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

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

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

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

Chromium の問題: 1288023

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

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

コンソールのトレースの [さらに N 個のフレームを表示] リンク。
[Sources] > [Call Stack] の [ Show ignore-list framework] の下にあります。

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

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

DevTools チームは、これを実現してくださった Nuxt、Vite、Rollup の各チームに感謝の意を表します。皆様のご協力とご尽力に心より感謝いたします。ご協力に重ねてお礼申し上げます。

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

無効な CSS プロパティと値

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

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

プロパティ名とプロパティ値が無効です。

DevTools チームは、この改善を行った 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 Profiler のサポートを終了する予定です。Node.js と Deno のデベロッパーは、JavaScript の CPU パフォーマンスのプロファイリングに [Performance] パネルを使用します。

DevTools バージョン 113 では、4 フェーズでの JavaScript Profiler のサポート終了のフェーズ 2 が開始されます。このフェーズ中もパネルを開くことはできますが、その UI は利用できなくなります。

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

JavaScript Profiler の非推奨。

Chromium の問題: 1354548。

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

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

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。