Chrome DevTools の [Network] パネルは、ウェブページのネットワーク アクティビティに関する有益な分析情報を提供する、最もよく使われるツールの一つです。
この記事では、Ioana Forfota 氏と Silvia Eremia 氏が STEP インターンシップで実施した [Network] パネルの改善について説明します。これらの改善は、Chromium の Issue Tracker の膨大なバックログから慎重に選ばれたものです。こうした改善は、パネルをよりアクセスしやすく、直感的に、有益な情報を提供するものとなっています。
デベロッパーは、[ネットワーク] パネルでこれらの新機能を使用して次のことができます。
- 関連するネットワーク リクエストのみに集中します。
- 外部参照を必要とせずに HTTP ステータス コードを理解する。
- リクエスト エラーをすばやく特定して対処できます。
- JSON サブタイプのレスポンスについて理解する。
全詳細をお読みください。
Chrome 拡張機能のリクエストをフィルタする
Chrome 拡張機能は独自のネットワーク リクエストを送信できます。これは、[ネットワーク] パネルにページのリクエストと一緒に表示されます。拡張機能の開発を積極的に行っていない場合、これらの要求はおそらく自分には関係ありません。これまでは、-scheme:chrome-extension フィルタを使用するか、シークレット モードでデバッグすることでした。
Chrome 117 以降、この機能がさらに使いやすくなりました。[Network] パネルを整理するために、Chrome 拡張機能のリクエストを除外するチェックボックスが DevTools に追加されました。
この機能のデフォルト状態については、現在も議論が続いています。当初は、この機能をデフォルトで有効にすることを検討し、大多数のユーザーのエクスペリエンスを向上させられると考えました。ただし、この方法では 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 ステータス コードを表示することでゲームを強化しました。これにより、ネットワーク リクエストの問題の原因を簡単に把握できるようになりました。」- TribalIdeas on X
「最近、すごく役に立っています。特に、広告ブロッカーと文法拡張機能を含むフォームの処理についてです。」- MrAhmadAwais on X
新機能の詳細を確認してみましょう。Chrome DevTools にアクセスして、強化された [Network] パネルを実際に体験してください。ぜひ、デバッグをご活用ください。
プレビュー チャネルをダウンロードする
Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。
Chrome DevTools チームへのお問い合わせ
投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。
- crbug.com からご提案やフィードバックをお送りください。
- DevTools の問題を報告するには、DevTools でその他のオプション アイコン
> [ヘルプ] > [DevTools の問題を報告する] を選択します。 - @ChromeDevTools にツイートします。
- 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。