DevTools の新機能（Chrome 117）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

[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 サブタイプのレスポンスをプリティ プリントする

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

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

Chromium の問題: 406900

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

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

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

また、[Network] パネルの [Priority] 列でも、チェックボックス。 [Big request rows] 設定が有効になっているときに同じ情報が表示されます。

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

Chromium の問題: 1463901、1380964。

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

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

コードブロックを折りたたむには、ブロックの先頭の横にある行番号にカーソルを合わせて、折りたたみアイコン 折りたたむ。 をクリックします。{...} をクリックすると、ブロックをもう一度開くことができます。

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

この設定により、[Sources] > [[ページ]: タブを切り替えたときにエディタで開く現在のファイルを選択します。

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] >プリロード セクション。以下を調べることができます。

  • 現在のページで見つかったすべてのルールセットをリストする投機ルール。
  • プリロード: ルールセットからプリフェッチされた URL と事前レンダリングされた 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）。
  • アプリケーション >マニフェストに [Window Controls Overlay] セクションが追加されました。これにより、マニフェストに display_override 値が存在するかどうかが確認され、関連ドキュメントへのリンクが表示されます。
  • 出典 >ページツリーで次の処理が行われるようになりました。これには、1442863 が含まれます（ただし、これらに限定されません）。 <ph type="x-smartling-placeholder">
      </ph>
    • すべてのコンテンツが無視リストに含まれている場合は、フォルダがグレー表示されます。
    • フォルダのすべてのコンテンツがソースマップからのものである場合、フォルダはオレンジ色になります。
  • パフォーマンス: キャプチャ設定は、録画を開始すると自動的に非表示になるようになりました（1455498）。
  • 出典 >Editor で、Ctrl+矢印の動作（Win）と Opt+矢印（MacO）が復元されました（1468208）。
  • アニメーション >[すべて一時停止] の切り替えボタンがページを読み込んでも状態が維持されるようになりました（1446046）。
  • アプリケーション >ストレージ >[キャッシュ ストレージ] を [アプリケーション] >ストレージ >キャッシュ セクション（1462622）。
  • 一部の UI テキストとツールチップが改善されました: ハードウェア同時実行ツールチップ、ネットワーク フィルタ テキストとメインメニュー オプション、アプリケーション ツリービューでの大文字アルファベットの使用方法、[ネットワーク] >ヘッダー テキスト、出典 >オーバーライドとファイルシステムのテキスト。

新しい試験運用版機能

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

貴社のウェブサイトのユーザーは、新しい試験運用版 prefers-reduced-transparency CSS メディア機能をデバイスで有効にして、透明な効果を軽減したいという意思を示すことができます。ウェブサイトのアクセシビリティを向上させるために、この設定を検討することをおすすめします。[Rendering] ドロワータブで prefers-reduced-transparency: reduce 設定をエミュレートできるようになりました。これにより、ソリューションのプロトタイピングを行い、このような場合にウェブサイトがどのように動作するかをテストできます。

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

Chromium の問題: 1424879

拡張プロトコル モニター

Chrome DevTools では、Chrome DevTools Protocol（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 に関連するその他のことについて話し合います。

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

DevTools の新機能

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