Webページが重い・崩れる・原因がわからない。
そんな時に使うのがデベロッパーツールです。
このツールを使うと、
PageSpeed Insightsで指摘された内容を
実際にどこで起きているか確認できます。
このページでは、
デベロッパーツールの
「概要・起動方法・できること」をまとめています。
デベロッパーツールとは
デベロッパーツール（開発者ツール）とは、ブラウザに標準搭載されている、
Webページを解析・検証するための開発支援ツールです。
グーグルクロムのデベロッパーツールでは、
- Webページの表示
- 通信の内容
- JavaScriptの動作
などを確認・デバッグすることができます。
これがないと、「PageSpeed Insights」に表示される改善点を、
実際にどこをどう直せばいいのかわかりません。
デベロッパーツールで確認できること
デベロッパーツールでは、主に次のようなことを確認できます。
- 構造を見る（HTML/CSS）
- 動作を見る（JS）
- 通信を見る（Network）
- 速度を見る（Performance / Lighthouse）
- 表示確認（レスポンシブ）
つまり、「見た目・動き・速さ」を全部チェックできるツールです。
デベロッパーツールの起動方法
デベロッパーツールの起動方法は、解析したいページを開いた状態で、
- F12キーを押す
- または、右クリックで「検証」を選択
これだけです。
デベロッパーツールでできること
このページでは、私が実際に使って覚えた
「デベロッパーツールでできること」を、
今後ひとつずつ追加していこうと思います。
ネットワークタブ
ネットワークタブで確認できること。
※この内容は
ブログについての一部です。
→ ハブページはこちら
コメント