DevTools の新機能（Chrome 117）

ネットワーク パネルの改善

ウェブ コンテンツをローカルでさらにすばやくオーバーライドする

ローカル オーバーライド機能が合理化され、ネットワーク パネルからリモート リソースのレスポンス ヘッダーとウェブ コンテンツを簡単にモックできるようになりました。

ウェブ コンテンツをオーバーライドするには、[ネットワーク] パネルを開き、リクエストを右クリックして [コンテンツをオーバーライド] を選択します。

ローカル オーバーライドが設定されていても無効になっている場合、DevTools はローカル オーバーライドを有効にします。まだ設定していない場合は、上部のアクション バーにメッセージが表示されます。オーバーライドを保存するフォルダを選択し、DevTools にそのフォルダへのアクセスを許可します。

オーバーライドを設定すると、DevTools は [Sources] > [Overrides] > [Editor] に移動し、ウェブ コンテンツをオーバーライドできるようになります。

オーバーライドされたリソースは、[ネットワーク] パネルで で示されます。アイコンにカーソルを合わせると、オーバーライドされた内容が表示されます。

Chromium の問題: 1465785、1470532、1469359。

XHR リクエストと fetch リクエストのコンテンツをオーバーライドする

レスポンス ヘッダーに加えて、XHR リクエストと fetch リクエストのコンテンツをオーバーライドできるようになりました。このようなオーバーライドを使用すると、バックエンドと API の準備がまだ整っていない場合でも、API レスポンスをモックしてウェブページをデバッグできます。

現在、デベロッパー ツールでは、画像（avif、png など）、フォント、fetch と XHR、スクリプト（css と js）、ドキュメント（html）のリクエスト タイプでコンテンツのオーバーライドがサポートされています。サポートされていないタイプの場合、[コンテンツをオーバーライド] オプションがグレー表示されるようになりました。

Chromium の問題: 792101、1469776。

Chrome 拡張機能のリクエストを非表示にする

ネットワーク パネルに新しいフィルタが追加されました。これにより、作成したコードに集中し、Chrome にインストールした拡張機能から送信された無関係なリクエストを除外できます。

chrome-extension:// URL に送信されたすべてのリクエストを除外するには、 [拡張機能の URL を表示しない] をオンにします。

Chromium の問題: 1257885、1458803。

人間が読める HTTP ステータス コード

リクエストのヘッダーの [ステータス コード] に、HTTP ステータス コードの横に人間が読めるテキストが表示されるようになりました。これにより、リクエストに何が起こったかをより迅速に把握できます。

リクエスト テーブルのステータス コードにカーソルを合わせると、同じテキストが表示されます。

Chromium の問題: 1153956。

JSON サブタイプのレスポンスを書式付きで出力する

application/[subtype]+json MIME サブタイプ（ld+json、hal+json など）を含むリクエストの [レスポンス] タブで、レスポンスが正しく解析され、整形できるようになりました。

Chromium の問題: 406900。

パフォーマンス: ネットワーク イベントのフェッチ優先度の変更を確認する

[パフォーマンス] パネルの [ネットワーク] トラックのイベントの [概要] に、優先度だけでなく、初期優先度と（最終的な）優先度の 2 つの優先度フィールドが表示されるようになりました。この追加フィールドを使用すると、イベントのフェッチ優先度が変更されたかどうかを確認し、ダウンロードの順序を調整できます。詳細については、Fetch Priority API を使用してリソースの読み込みを最適化するをご覧ください。

また、[ネットワーク] パネルの [優先度] 列でも同じ情報を確認できます。この場合は、[ 大きなリクエストの行] 設定が有効になっている必要があります。

Chromium の問題: 1463901、1380964。

デフォルトで有効になっているソース設定: コードの折りたたみとファイルの自動表示

[Settings] > [Preferences] > [Code folding] オプションがデフォルトで有効になりました。このオプションを使用すると、コードブロックを折りたたむことができます。

コードブロックを折りたたむには、ブロックの先頭の横にある行番号にカーソルを合わせ、 折りたたみアイコンをクリックします。{...} をクリックすると、ブロックが再び展開されます。

また、 [Settings] > [Preferences] > [Automatically reveal files in the sidebar] もデフォルトで有効になりました。

この設定により、タブを切り替えると、[Sources] > [Page] のファイルツリーで、[Editor] で開いている現在のファイルが選択されます。

Chromium の問題: 1459193、1336599。

サードパーティ Cookie の問題のデバッグを改善

プライバシーが強化されたウェブの構築を支援するため、また他のブラウザによる更新と並行して、Chrome はプライバシー サンドボックス イニシアチブを導入しました。この取り組みは、ウェブのプライバシーを根本的に強化し、サードパーティ Cookie の使用廃止に向けた取り組みとして、広告によるウェブのエコシステムを健全に持続できるという結論に至りました。プライバシー サンドボックスには、変更に無理なく対応できるよう、段階的な廃止のタイムラインが用意されています。

サードパーティ Cookie の段階的廃止後の Chrome の動作は、すでにテストできます。これを行うには、--test-third-party-cookies-phaseout フラグを指定して コマンドラインから Chrome を実行します。このフラグの機能については、Cookie のデバッグをご覧ください。

Chrome の実行方法（フラグの有無）にかかわらず、[問題] タブの [ サードパーティ Cookie の問題を含める] チェックボックスが、すべての新しい Chrome ユーザーに対してデフォルトで有効になり、次のレポートが表示されるようになります。

• 今後のフェーズアウトに関する互換性を破る変更の警告。
• サードパーティ Cookie に関連する問題。

既存の Chrome ユーザーとして、今後の廃止に関する Cookie の警告を表示する場合は、このチェックボックスをオンにしてください。

これをテストするには、こちらのデモページで Cookie を検査します。

また、[ネットワーク] パネルの [ブロックされたレスポンス Cookie] フィルタの文言が変更され、ブロックされたレスポンス Cookie のみが表示されることが明確になりました。

Chromium の問題: 1458839、1462693、1466310。

[アプリケーション] パネルでプリロードをデバッグする

Chrome チームは、ユーザーが次に閲覧する可能性が高いページの完全なプリレンダリングを復活させています。このデバッグを可能にするため、DevTools の [アプリケーション] パネルに [プリロード] セクションが追加されています。新しいプリフェッチとプリレンダリング（総称して「ナビゲーション プリロード」）では、リンクベースのリソースヒントではなく、Speculation Rules API が使用されます。

このプリレンダリングのデモページの [アプリケーション] > [プリローディング] セクションで、次の項目を検査できます。

• [投機ルール] には、現在のページで見つかったすべてのルールセットが一覧表示されます。
• ルールセットからプリフェッチとプリレンダリングされたすべての URL を一覧表示する Preloads。
• 現在のページのプリレンダリング ステータスを一覧表示する [このページ]。

詳細については、投機的実行ルールのデバッグに関する専用の投稿をご覧ください。

Chromium の問題: 1410709。

新しい色

DevTools のデザインが新しくなり、Chrome との整合性が高まったことにお気づきかもしれません。その要因の一つは、新しいカラーパターンです。

このバージョン（117）では、すでに説明した内容や後述する内容を含め、DevTools の UX がさらに改善されています。また、UI テキストも多数改善されています。

Chromium の問題: 1456677。

Lighthouse 10.4.0

[Lighthouse] パネルで Lighthouse 10.4.0 が実行されるようになりました。特に、このバージョンでは、次の項目に関する新しいアクセシビリティ監査が追加されています。

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

次に例を示します。

変更点の完全なリストもご覧ください。DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 772558。

DevTools の C/C++ WebAssembly デバッグ拡張機能がオープンソースになりました

DevTools 用の C/C++ WebAssembly デバッグ拡張機能がオープンソースになり、DevTools フロントエンド リポジトリに配置されました。この拡張機能により、WebAssembly にコンパイルされた C++ プログラムの DevTools でデバッグ機能が有効になります。詳細については、C/C++ WebAssembly のデバッグをご覧ください。

拡張機能をビルド、実行、テストする方法を学習し、お気軽に貢献してください。

Chromium の問題: 1410709。

その他のハイライト

このリリースにおける注目すべき修正と改善点は次のとおりです。

• CSS ネスト: [要素] パネルに、ネストされた子要素のセレクタ チェーン全体が表示されるようになりました（1172985）。
• [Application] > [Manifest] に [Window Controls Overlay] セクションが追加され、マニフェストに display_override 値が存在するかどうかを確認し、関連するドキュメントへのリンクを提供します。
• [ソース] > [ページ] ツリーで、次のような操作ができるようになりました（1442863）。
  • フォルダ内のすべてのコンテンツが無視リストに含まれている場合、フォルダをグレー表示します。
  • すべてのコンテンツがソースマップからのものである場合、フォルダをオレンジ色で表示します。
• パフォーマンス: 録画を開始すると、キャプチャ設定が自動的に非表示になるようになりました（1455498）。
• ソース > エディタで、Ctrl+矢印キー（Windows）と Opt+矢印キー（macOS）の動作が復元されました（1468208）。
• [アニメーション] > [すべて一時停止] の切り替えが、ページ読み込み後も状態を維持するようになりました（1446046）。
• [アプリケーション] > [ストレージ] > [キャッシュ ストレージ] が [アプリケーション] > [ストレージ] > [キャッシュ] セクションに移動しました（1462622）。
• 一部の UI テキストとツールチップが改善されました。ハードウェアの同時実行性に関するツールチップ、ネットワーク フィルタのテキストとメインメニュー オプション、アプリケーション ツリービューでの大文字と小文字の区別、[ネットワーク] > [ヘッダー] のテキスト、[ソース] > [オーバーライド] と [ファイルシステム] のテキスト。

試験運用版の新機能

新しいレンダリング エミュレーション: prefers-reduced-transparency

ウェブサイトのユーザーは、透明効果を減らす設定をデバイスで有効にすることで、新しい試験運用版の prefers-reduced-transparency CSS メディア機能を有効にすることができます。この設定を考慮して、ウェブサイトのアクセシビリティを高めることを検討してください。この問題を解決するため、[レンダリング] ドロワー タブで prefers-reduced-transparency: reduce 設定をエミュレートできるようになりました。これにより、ソリューションのプロトタイプを作成し、この場合のウェブサイトの動作をテストできます。

Chrome でこの機能をテストするには、chrome://flags で試験運用版のウェブ プラットフォームの機能を有効にします。

Chromium の問題: 1424879。

拡張プロトコル モニター

Chrome DevTools は、Chrome DevTools Protocol（CDP）を使用して、Chrome ブラウザの計測、検査、デバッグ、プロファイリングを行います。Chromium または DevTools のデベロッパーの場合、プロトコル モニターを使用すると、DevTools によって行われたすべての CDP リクエストとレスポンスを表示し、CDP コマンドを送信できます。

プロトコル モニターに新しいインターフェースが追加され、CDP コマンドの作成と送信が容易になりました。コマンドとそのパラメータをドキュメントで調べる必要はありません。DevTools が提案してくれます。

[プロトコル モニタ] ドロワー タブの右下にある [CDP コマンド エディタを表示] をクリックし、ターゲットを選択してコマンドの入力を開始し、必要に応じて候補から 1 つを選択してパラメータ値を指定し、 [コマンドを送信]（Ctrl/Cmd + Enter）をクリックします。

Chromium の問題: 1469345。

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

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

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

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

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他 > ヘルプ > DevTools の問題を報告を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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