Chrome DevTools で最もよく使用されるツールの一つが、ウェブページのネットワーク アクティビティに関する有益な分析情報を提供する [Network] パネルです。
この記事では、Ioana Forfota と Silvia Eremia が STEP インターンシップ期間中に行った、ネットワーク パネルの改善点について説明します。これらの改善は、Chromium の問題トラッカーの膨大なバックログから慎重に選ばれたものです。パネルの使い勝手を向上させ、直感的にわかりやすく、有益な情報を提供できるようにしています。
これらの新機能により、ウェブ デベロッパーは [ネットワーク] パネルで次のことができます。
- 関連するネットワーク リクエストのみに焦点を当てます。
- 外部リファレンスを使用せずに HTTP ステータス コードを理解する。
- リクエスト エラーをすばやく特定して対処します。
- JSON サブタイプのレスポンスを理解する。
詳細をお読みください。
Chrome 拡張機能のリクエストをフィルタする
Chrome 拡張機能は独自のネットワーク リクエストを実行できます。これらのリクエストは、ページのリクエストとともに [ネットワーク] パネルに表示されます。拡張機能の開発を積極的に行っている場合を除き、これらのリクエストは関連性が低い可能性があります。これまで、非表示にする唯一の方法は、-scheme:chrome-extension フィルタを使用するか、シークレット モードでデバッグを行うことでした。
Chrome 117 以降、この操作が簡単になりました。ネットワーク ペインを整理するため、Chrome 拡張機能のリクエストを除外するチェックボックスが DevTools に追加されました。
この機能のデフォルト状態に関する議論は継続中です。当初、Google は、この機能が大多数のユーザーの利便性を高めると考え、デフォルトで有効にすることを検討していました。ただし、この方法では、Chrome 拡張機能の URL がリクエストをトリガーする可能性があることをユーザーが認識していない可能性があります。これは拡張機能のデベロッパーにとっても課題となる可能性があります。そのため、デフォルトの状態は「無効」に設定されています。
このチェックボックスをオンにすると、リクエスト リストが整理され、不要な情報が表示されなくなります。また、最も重要なリクエストに集中できるため、デバッグがより快適になります。
HTTP レスポンス ステータス テキスト
効果的なデバッグを行うには、HTTP ステータス コードを理解することが不可欠です。ただし、常に意味を検索するのは不便です。DevTools に便利な機能が追加されました。リクエストリストのステータス コードにポインタを合わせると、ステータス テキスト（意味を明確にする説明的なタイトル）がツールチップに即座に表示されます。
ステータス テキストは、ヘッダー ビューのコードの横にも表示されます。これまでは HTTP/1.1 でのみ利用可能でしたが、これらの機能は HTTP/2 と HTTP/3 にも拡張されました。こうした小さな調整は大きな影響を与え、時間を節約し、コードの意味を探すのではなくデバッグに集中できます。
エラーの可視性の向上
パネルを深く掘り下げることなく、エラーをすばやく見つけ、対処できるようになりました。そのため、エラー メッセージをテキストの色を変えてハイライト表示するだけでなく、ステータス コード 404 などのリクエスト エラーに注意を向けさせるためのアイコンを追加しました。これらの目立たないインジケーターは、エラーを目立たせ、重要な問題を見逃さないようにします。
JSON サブタイプの書式設定
ウェブ開発では JSON レスポンスを検査することがよくありますが、未加工の未フォーマット JSON を読むのは非常に不便です。このようなレスポンス（特に ld+json、hal+json、sparql-results+json などのサブタイプ）を処理するのは、1 行に表示されるなどの理由で、面倒な場合があります。より簡単に確認できるように、DevTools では JSON サブタイプをよりユーザー フレンドリーで折りたたみ可能な形式で表示できるようになりました。これらのレスポンスがフォーマットされるため、デベロッパーが外部ツールに依存する必要がなくなります。この再設計により、シンプルで読みやすい表示が可能になりました。
コミュニティからの好意的なフィードバック
これらの機能はまだ導入の初期段階ですが、コミュニティからのフィードバックは圧倒的に好意的です。実装が成功したことで、多くのユーザーが改善に満足し、エクスペリエンスが大幅に向上しました。回答の一部は X でご覧いただけます。
「それは便利ですね。ChromeDevTools が人間が判読できる HTTP ステータス コードを表示するようになり、ネットワーク リクエストで何が問題だったのか簡単に確認できるようになりました。」- X の TribalIdeas
「最近とても役立っています。特に、広告ブロッカーや文法拡張機能が有効になっているフォームの処理が遅くなります。」-X の MrAhmadAwais
これらの新機能を試すには、Chrome DevTools で、強化された [ネットワーク] ペインをお試しください。デバッグをお楽しみください。
プレビュー チャネルをダウンロードする
デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta を使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。
Chrome DevTools チームに問い合わせる
次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。
- フィードバックや機能リクエストは crbug.com から送信してください。
- DevTools で [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
- @ChromeDevTools にツイートします。
- DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。