DevTools の新機能（Chrome 117）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

ローカル オーバーライドが設定されていても無効になっている場合、DevTools はローカル オーバーライドを有効にします。まだ設定していない場合は、上部のアクション バーに 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 を表示しない] をオンにします。

リクエスト テーブルに拡張機能の URL が表示されない。

Chromium の問題: 1257885、1458803。

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

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

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

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

Chromium の問題: 1153956。

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

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

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

Chromium の問題: 406900。

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

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

フェッチ優先度の変更を表示する前と後。

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

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

Chromium の問題: 1463901、1380964。

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

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

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

また、設定] をタップします。 [設定] > [設定] > チェックボックス。 [サイドバーでファイルを自動的に表示する] もデフォルトで有効になりました。

この設定により、タブを切り替えると、[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] フィルタの文言が変更され、ブロックされたレスポンス Cookie のみが表示されることが明確になりました。

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

Chromium の問題: 1458839、1462693、1466310。

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

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

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

  • [投機ルール] には、現在のページで見つかったすべてのルールセットが一覧表示されます。
  • ルールセットからプリフェッチとプリレンダリングされたすべての 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。

その他のハイライト

このリリースにおける主な修正と改善点は次のとおりです。

試験運用版の新機能

新しいレンダリング エミュレーション: 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 コマンド エディタを表示] をクリックし、ターゲットを選択してコマンドの入力を開始し、候補から 1 つ選択します。必要に応じてパラメータ値を指定し、送信する。 [コマンドを送信]（Ctrl/Cmd + Enter）をクリックします。

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

Chromium の問題: 1469345。

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

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

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

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

DevTools の新機能

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