【Ayudante News 2026年3月号から抜粋】エンジニアだけのツールじゃない—西村さんに聞くChrome DevTools 実践活用法

西村さん、今日はChrome DevToolsについて教えてください！
最近あまり使いこなせている感じがなくて……初心に帰って、そもそも何ができるツールなんですか？

ブラウザのDevToolsは、Webページの中身や動きをその場で確認できるツールです。
たとえば、文字や色などの見た目（HTML/CSS）、ボタン操作の処理（JavaScript）、通信状況、表示速度の問題、エラー内容などを画面上で確認できます。
基本はエンジニア向けのツールですが、不具合の原因を切り分けたり、画面の崩れを確認したりするときに、非エンジニアでも役立つことがあります。

「詳しい人が使うもの」という印象がありましたが、実際には日々の確認業務にも役立つんですね。

そうですね。全部を使いこなす必要はなくて、まずは「どんな場面で、どのパネルを見るとよいか」がわかるだけでも、かなり使いやすくなります。

DevToolsって、最初にしておかなければいけないことってありますか？
「まずこれだけはやろう！」みたいな設定があると助かります。

ChromeのDevToolsだと、初期設定のようなものは特にないですね。ブラウザに最初から付いていて、すぐに使えるのがよいところです。PCのChromeブラウザで何かのページを開いた状態で、右クリックメニューの「検証」をクリックすると、いつでもDevToolsを呼び出すことができます。

特別な準備がなくても始められるのは、ハードルが低くていいですね。
そしたら西村さんが良く使う機能って何がありますか？

3つ挙げるとするなら、「Performance」「Elements」「Network」の3つの機能です。

Performanceパネルはページのパフォーマンスの確認・改善のために使う機能です。

「Performance」パネルってなんかごちゃごちゃしてよくわからない画面ですよね、
だから見ないようにしているんですよね。

それがですね、少し前からPerformanceパネルの内容が大きく変わって、エンジニア以外でも扱いやすく進化しました。こんな画面、見たことありますか？

見たことがありませんね。今はこんなにわかりやすくなっているんですか？

分かりやすいですよね。この画面だけで、次の3つが分かるようになっています。

Core Web Vitals の調査は以前は拡張機能などのツールにかなり頼っていましたが、今はこれだけで何とかなることも多いです。

一目で、現在の状態、Googleからの評価、さらに原因まで確認できるのは便利ですね。
以前より「何を見ればいいのか」がかなりつかみやすくなっている印象です。

Networkパネルは通信のログが見れるツールだと聞いているのですが、計測確認の場面だと、やはりNetworkパネルが活躍しますか？

はい。GAや広告のタグ設定を行うときは必ず使います。Googleタグマネージャー（GTM）を操作しない方でも方でもタグによる計測がうまくいっているか気になるときがありますよね？そんなときにNetworkパネルは便利な機能です。

たとえば、「タグは発火しているはずなのにGA4にデータが来ない」とか、「コンバージョンが正しく計測されているか不安」といったときですね。

まさにそうです。そういうときにNetworkパネルを見ると、タグが本当に発火してているか、さらに正しい情報を載せて通信しているかまで確認できます。

Networkパネルを開くと情報量が多くて、どこを見ればいいのかわからなくなってしまうこともあります。
まずはここを押さえよう、というポイントはありますか？

詳しくは自分のコラム「Chrome DevToolsの使い方 Networkパネルを使い倒す」を見て頂きたいのですが、まずはフィルタリングを行うテクニックを押さえておきたいですね。Networkパネルには大量の通信が表示されるため、まず検証したい通信だけに絞り込みます。たとえば計測タグには、特定のアカウントから発行された際にのみ付与される固有のIDが含まれています。
GA4であればタグの ‘G-XXXXXXXXX’ のようなIDです。これをフォームに入力してフィルタリングを行います。

すると目的の通信だけを見ることができるので、それっぽい通信ログの行をクリックして通信の内容を確認して、必要な情報を送信できているか確認します。
たとえば、購入完了画面でEコマース情報を送信しているタグであれば、タグの通信内容に受注ID、購入された商品ID、商品単価のような情報が含まれていないといけないですよね。

まずはフィルタリングですね。タグのIDさえわかればDevTools側で確認できるので助かります。

そうですね。Networkパネルは業務で使う機能に絞れば、見るべきポイントはそこまで多くありません。

SEOの仕事だと、Elementsパネルを使う場面も多いですよね。

多いですね。検索エンジンやChatGPTのようなAIにちゃんと見てもらえるページの作りをしているか確認するときは、Elementsパネルを使います。

どういうところを見ることが多いのでしょうか？

たとえば…