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

DevTools の新機能（Chrome 117）

Sofia Emelianova

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

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

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

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

リクエストのプルダウンメニューのオーバーライドオプション。

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

フォルダを選択し、上部のアクションバーでフォルダへのアクセスを許可します。

オーバーライドを設定すると、DevTools で [ソース] > [オーバーライド] > [エディタ] に移動し、ウェブコンテンツをオーバーライドできます。

オーバーライドされたリソースは、[Network] パネルにと表示されます。アイコンにカーソルを合わせると、オーバーライドされる項目が表示されます。

Chromium に関する問題: 1465785、1470532、1469359。

XHR およびフェッチリクエストの内容をオーバーライドする

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

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

Chromium に関する問題: 792101、1469776。

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

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

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

リクエストテーブルで非表示になっている拡張機能の URL。

Chromium の問題: 1257885、1458803。

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

リクエストのヘッダーの [Status Code] で、HTTP ステータスコードの横に人が読めるテキストが表示されるようになったため、リクエストの状況をすばやく把握できます。

人が読める形式の HTTP ステータスコードを表示する前と後。

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

Chromium の問題: 1153956。

JSON サブタイプのレスポンスのプリティプリント

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

ネットワークレスポンスのプレビューでの application/json サブタイプの解析前と解析後。

Chromium の問題: 406900。

パフォーマンス: ネットワークイベントの取得優先度の変化を確認

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

取得優先度の変更を表示する前と後。

また、[ネットワーク] パネルの [優先度] 列にも同じ情報が表示されます。この場合、[大きなリクエストの行] の設定を有効にします。

[Network] パネルの [Priority] 列。

Chromium の問題: 1463901、1380964。

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

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

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

さらに、 [設定] > [設定] > [サイドバーにファイルを自動的に表示] もデフォルトで有効になりました。

この設定により、[ソース] > [ページ] のファイルツリーで、タブを切り替えると現在のファイルがエディタで開くようになります。

Chromium に関する問題: 1459193、1336599。

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

よりプライバシーに配慮したウェブを構築する取り組みと、他のブラウザによる更新と並行して、Chrome ではプライバシーサンドボックスのイニシアチブを導入しました。この取り組みは、ウェブにおけるプライバシーを根本的に強化し、サードパーティ Cookie の時代遅れという形で、広告に支えられた健全なウェブを維持することを可能にします。プライバシーサンドボックスでは、変化にスムーズに適応できるよう、段階的な廃止スケジュールを設けています。

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

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

今後の段階的廃止に関する互換性を破る変更に関する警告
サードパーティ Cookie に関する問題。

既存の Chrome ユーザーとして今後の段階的廃止に関する Cookie に関する警告を表示するには、このチェックボックスをオンにします。

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

[問題] タブで報告されたサードパーティ Cookie の問題。

また、[ネットワーク] パネルの [ブロックされたレスポンス Cookie] フィルタが言い換えられ、ブロックされたレスポンス Cookie のみが表示されます。

チェックボックスが有効になっており、レスポンス Cookie がブロックされたリクエストのみが表示されます。

Chromium に関する問題: 1458839、1462693、1466310。

[Application] パネルでのプリロードのデバッグ

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

このデモページの [Application] > [Preloading] セクションで、以下を調べることができます。

Speculation Rules: 現在のページで検出されたすべてのルールセットをリストします。
プリロード: ルールセットからプリフェッチされた URL と事前レンダリングされた URL をすべて一覧表示します。
このページ: 現在のページの事前レンダリング済みステータスが一覧表示されます。

詳しくは、投機ルールのデバッグに関する投稿をご覧ください。

Chromium の問題: 1410709。

新しい色

すでにお気づきかもしれませんが、DevTools は Chrome に合わせてデザインが一新されました。その要因の一つが新しいカラーパターンです。

新しい色を適用する前と適用後。

このバージョン（117）では、すでに述べたとおり、すでに述べたとおり、UI テキストの改善など、DevTools の UX の改善が行われています。

Chromium の問題: 1456677。

Lighthouse 10.4.0

[Lighthouse] パネルでは Lighthouse 10.4.0 が実行されます。特筆すべきは、以下の機能に対する新しいユーザー補助監査が追加されたことです。

次に例を示します。

リンクの色が区別できなくなり、チェックに失敗しました。

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

Chromium の問題: 772558。

DevTools 用の C/C++ WebAssembly デバッグ拡張機能がオープンソースに

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

拡張機能のビルド、実行、テスト方法を学び、ぜひご協力ください。

Chromium の問題: 1410709。

その他のハイライト

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

CSS のネスト: [要素] パネルに、ネストされた子のセレクタチェーン全体が表示されるようになりました。（1172985）
[アプリケーション] > [マニフェスト] に [ウィンドウコントロールオーバーレイ] セクションが追加されました。このセクションでは、マニフェストに display_override 値が存在するかどうかをチェックし、関連ドキュメントへのリンクを確認できます。
[ソース] > [ページ] ツリーで次の処理を行います（1442863）。
- すべてのコンテンツが無視リストに登録されている場合、フォルダはグレー表示されます。
- すべてのコンテンツがソースマップからのものである場合、フォルダをオレンジ色で色付けします。
パフォーマンス: 録画を開始すると、キャプチャ設定が自動的に非表示になりました（1455498）。
[Sources] > [Editor] で、Ctrl+矢印キー（Win）と Opt+Arrow（MacOs）の動作を復元しました（1468208）。
[アニメーション] > [すべて一時停止] の切り替えボタンで、ページの読み込み後も状態が保持されるようになりました（1446046）。
[アプリケーション] > [ストレージ] > [キャッシュストレージ] を [アプリケーション] > [ストレージ] > [キャッシュ] セクションに移動しました（1462622）。
一部の UI テキストとツールチップが改善されました（ハードウェア同時実行ツールチップ、ネットワークフィルタテキストとメインメニューオプション、アプリケーションツリービューでの大文字の使用、[Network] > [Headers texts]、Sources > Overrides and Filesystem texts）。

新しい試験運用版の機能

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

ウェブサイトのユーザーは、デバイス上で新しい試験運用版の prefers-reduced-transparency CSS メディア機能を有効にすることで、透明度の影響を軽減したいという希望を伝えることができます。ウェブサイトのアクセシビリティを向上させるために、この設定を考慮することをおすすめします。[レンダリング] ドロワータブで prefers-reduced-transparency: reduce 設定をエミュレートできるようになりました。これにより、ソリューションのプロトタイプを作成し、この場合のウェブサイトの動作をテストできます。

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

Chromium の問題: 1424879。

拡張プロトコルモニター

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

プロトコルモニターのインターフェースが新しくなり、CDP コマンドの作成と送信が簡単になりました。これにより、ドキュメントでコマンドとそのパラメータを検索する必要がなくなり、DevTools によってコマンドが提案されます。

[プロトコルモニター] ドロワーのタブの右下にある [Show CDP command editor] をクリックし、ターゲットを選択してコマンドの入力を開始します。必要に応じて、パラメータ値を指定して [ Send command]（Ctrl/Cmd+Enter キー）をクリックします。

CDP コマンドを指定して送信する。

Chromium の問題: 1469345。

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

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

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

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

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