Chromeのデベロッパーツールの基本的な使い方
ホームページの表示崩れや、画像が出ない原因を調べるときに役立つのが、Google Chromeの「デベロッパーツール」です。
難しそうに見えますが、基本の使い方を知っておくだけで、確かめられることが大きく増えます。
この記事では、デベロッパーツールの開き方と、よく使う機能を解説します。
1.まず覚えたいのは4つの機能
| 機能 | できること |
|---|---|
| 端末の表示の切り替え | スマートフォンなど、いろいろな画面の大きさで表示を確かめる |
| 要素（Elements） | ページのHTMLと、効いているCSSを確かめる |
| コンソール（Console） | JavaScriptのエラーや、警告を確かめる |
| ネットワーク（Network） | 画像やファイルの読み込みの状態と、かかった時間を確かめる |
開き方
| 方法 | 操作 |
|---|---|
| キーボード（Windows） | F12、または Ctrl ＋ Shift ＋ I |
| キーボード（Mac） | Command ＋ Option ＋ I |
| マウス | ページの上で右クリック → 「検証」 |
2.知っておくとよい理由
表示崩れや、画像が出ない、ボタンが動かないといったトラブルは、見た目だけでは原因が分かりません。デベロッパーツールを使うと、どのファイルが読み込めていないか、どんなエラーが出ているかを、自分で確かめられます。
自分で直せなくても、エラーの内容を伝えられると、制作会社や専門家に相談したときに、原因を早く見つけてもらえます。
デベロッパーツールは、ホームページの「中身」を見て、原因の手がかりを見つけるための道具です。
3.よく使う機能の使い方
1. スマートフォンの表示を確かめる
デベロッパーツールを開き、左上の端末の印のボタンを押します。上に出る欄で、iPhoneなどの端末や、画面の幅を選べます。
2. 要素とCSSを確かめる
左上の矢印の印のボタンを押してから、ページの気になる部分を押すと、その部分のHTMLと、効いているCSSが表示されます。打ち消し線が引かれているCSSは、ほかの指定に上書きされて効いていないものです。
3. エラーを確かめる（コンソール）
「Console」のタブを開くと、赤い文字でエラーが表示されていることがあります。ボタンが動かない、メニューが開かないときは、ここに原因の手がかりがあることが多いです。
4. 読み込みを確かめる（ネットワーク）
「Network」のタブを開いてから、ページを読み込み直すと、読み込んだファイルの一覧が出ます。赤い文字のものは、読み込めなかったファイルです。画像が出ないときの確かめに役立ちます。
※デベロッパーツールで変えた内容は、自分の画面だけの一時的なものです。ページを読み込み直すと元に戻り、ホームページそのものは変わりません。
4.よくある質問
デベロッパーツールで、ホームページを壊してしまいませんか？
デベロッパーツールで変えた内容は、自分の画面だけの一時的なものです。ホームページそのものは変わらないので、安心して試せます。
Chrome以外のブラウザにもありますか？
Edge、Firefox、Safari にも、同じような機能があります。Safari では、設定で開発者向けの機能を有効にする必要があります。
英語ばかりで分かりません。
設定で日本語の表示にできます。分からない場合も、エラーの文字を写して伝えるだけで、相談するときに役立ちます。
スマートフォンの表示は、実機と同じですか？
近い表示になりますが、完全に同じではありません。最後は実際のスマートフォンで確かめましょう。
5.まとめ
Google Chromeのデベロッパーツールを使うと、ホームページの中身を見て、トラブルの原因の手がかりを見つけられます。
- F12 や右クリックの「検証」で開く
- 端末の切り替えで、スマートフォンの表示を確かめる
- 要素で、HTMLと効いているCSSを確かめる
- コンソールでエラー、ネットワークで読み込みを確かめる
まずは、自分のホームページで、端末の切り替えを試してみましょう。表示崩れの確かめ方は、ホームページの表示崩れを確認する方法で解説しています。
デベロッパーツールで見つけたエラーの意味が分からない場合は、浅草Web屋にご相談ください。