DevTools の新機能（Chrome 113）

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

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

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

すべてのオーバーライドを 1 か所で編集するには、[ソース] > [.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 プロパティは有効であるのに、値が無効である場合の値のみ。

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

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 の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。