ChromeデベロッパーツールはGoogleのChromeブラウザに搭載されたWeb開発を支援するためのツールです。 Google Analyticsのような計測タグの設定やSEOのサイトチェック作業を行う方であれば一度は使ったことがあると思いますが、ツールが持つ様々な便利機能を知れば検証作業の精度と効率を改善できます。 本記事では主にChromeデベロッパーツールの「Networkパネル」を使った通信内容の確認作業に使える便利な機能を広くご紹介します。 Chromeデベロッパーツールの呼び出し方 Networkパネルの基本的な使い方 スマホ向けページの通信を確認する 通信内容をフィルタリングして確認する 特定の通信をブロックする 通信の発生元を確認する Networkパネル内の各コントロールの機能概要 おわりに Chromeデベロッパーツールの呼び出し方 Chromeブラウザで開いている