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

DevTools の新機能（Chrome 113）

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

Chromium の問題: 1288023

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

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

コンソールのトレースの [Show N moreframe] リンク。
[Sources] > [Call Stack] の [Show ignore-listframe] で、

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

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

DevTools チームは、これを実現してくれた Nuxt、Vite、Rollup の各チームに感謝の意を表します。この実装を成功に導くうえで、皆様のご協力とご協力に感謝いたします。ご投稿いただきありがとうございました。

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

無効な CSS プロパティと値

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

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

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

DevTools チームは、この改善を達成してくれた Yisi(一丝) に感謝の意を表します。

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

animation 短縮 CSS プロパティに、対応する @keyframes at-rules へのリンクが含まれるようになりました。これにより、[Styles] ペインをすばやく操作できます。

アニメーションの短縮プロパティのキーフレームへのリンク。

Chromium の問題: 1420656。

コンソールの新しい設定: Enter 入力時のオートコンプリート

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

デフォルトでは、オートコンプリートの候補を採用するには、Tab または Arrow right を押します。Enter を使用してオートコンプリートも行うには、 [設定] > [コンソール] > [Enter キーでオートコンプリートの候補を受け入れる] を有効にします。

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

また、別の設定のテキストがよりユーザーフレンドリーになりました。 コード評価をユーザーアクションとして処理します。

Chromium の問題: 1276960。

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

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

Chromium の問題: 1424345

JavaScript Profiler のサポート終了: ステージ 2

Chrome 58 以降、DevTools チームは最終的に JavaScript Profiler のサポートを終了する予定です。これにより、Node.js と Deno のデベロッパーは、JavaScript の CPU パフォーマンスのプロファイリングに [Performance] パネルを使用できるようになりました。

DevTools バージョン 113 では、JavaScript Profiler の 4 フェーズによるサポート終了のフェーズ 2 が開始されます。このフェーズの間もパネルを開くことはできますが、UI は使用できません。

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

JavaScript Profiler の非推奨。

Chromium の問題: 1354548。

その他のハイライト

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

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

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

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

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

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

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。