DevTools の新機能（Chrome 117）

Sofia Emelianova
Sofia Emelianova
GitHub

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

ローカルでウェブ コンテンツをより迅速にオーバーライドする

ローカル オーバーライド機能が合理化され、リモート リソースのレスポンス ヘッダーとウェブ コンテンツにアクセスしなくても、[ネットワーク] パネルから簡単にモックできます。

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

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

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

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

オーバーライドが設定されると、DevTools の [Sources] > [Overrides] > [Editor] でウェブ コンテンツをオーバーライドできます。

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

[Network] パネルのリクエストの横にあるオーバーライド アイコン。

Chromium の問題: 1465785、1470532、1469359。

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

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

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

Chromium の問題: 792101、1469776。

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

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

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

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

Chromium の問題: 1257885、1458803。

人間が判読できる HTTP ステータス コード

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

人間が読める HTTP ステータス コードの表示前と表示後。

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

Chromium の問題: 1153956。

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

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

ネットワーク レスポンス プレビューで、application/json サブタイプを解析する前と解析した後。

Chromium の問題: 406900。

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

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

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

また、[ネットワーク] パネルの [優先度] 列でも、チェックボックス。 [大容量リクエスト行] 設定を有効にして同じ情報を確認できます。

[ネットワーク] パネルの [優先度] 列。

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 の問題。

また、[Network] パネルの チェックボックス。 [Blocked response cookies] フィルタの表現を変更し、ブロックされたレスポンス Cookie のみが表示されることを明確にしました。

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

Chromium の問題: 1458839、1462693、1466310。

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

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

こちらのデモページの [Application] > [Preloading] セクションで、以下を確認できます。

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

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

Chromium の問題: 1410709。

新しい色

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

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

このバージョン（117）では、DevTools の UX がさらに改善されています。UI テキストの改善など、すでに説明した内容と、以下に記載する内容の両方で改善されています。

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）。
  • [Application] > [Manifest] に [Window Controls Overlay] セクションが追加されました。このセクションでは、マニフェストに display_override 値が存在するかどうかを確認し、関連するドキュメントへのリンクを提供します。
  • [ソース] > [ページ] ツリーが、次のように動作するようになりました（1442863）（ただし、これらに限定されません）。
    • フォルダ内のコンテンツがすべて無視リストに登録されている場合は、そのフォルダがグレー表示されます。
    • フォルダ内のコンテンツがすべてソースマップから取得されている場合は、オレンジ色で表示されます。
  • パフォーマンス: キャプチャ設定は、録画を開始すると自動的に非表示になるようになりました（1455498）。
  • [ソース] > [エディタ] で、Ctrl+矢印（Windows）と Opt+矢印（MacOs）の動作が復元されました（1468208）。
  • [アニメーション] > [すべて一時停止] の切り替えボタンの状態がページの読み込み間で保持されるようになりました（1446046）。
  • [アプリケーション] > [ストレージ] > [キャッシュ ストレージ] は [アプリケーション] > [ストレージ] > [キャッシュ] セクションに移動しました（1462622）。
  • ハードウェア同時実行ツールチップ、ネットワーク フィルタ テキストとメインメニュー オプション、アプリケーション ツリービューでの大文字 / 小文字、[Network] > [Headers texts]、[Sources] > [Overrides and Filesystem texts] の UI テキストとツールチップが改善されました。

新しい試験運用版の機能

新しいレンダリング エミュレーション: 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 によってコマンドとそのパラメータが提案されます。

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

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

Chromium の問題: 1469345。

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

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

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

次のオプションを使用して、DevTools の新機能、更新、その他のトピックについて話し合います。

DevTools の新機能

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