開発者ツールでブラウザの中を見る
問題の種類に応じてDevToolsの確認場所を切り替えると、原因を絞り込みやすくなります。
Chrome DevToolsは、ブラウザが読み取ったHTMLやCSS、JavaScriptのエラー、通信したファイルを確認できる開発者向けの機能です。
ページ上で右クリックして「検証」を選ぶと開けます。ショートカットはWindowsがCtrl + Shift + I、macOSがCommand + Option + Iです。詳しい開き方はChrome DevTools公式ドキュメントでも確認できます。
DevToolsで変更しても元ファイルは変わらない
ElementsやStylesでHTML・CSSを変更すると、その場で表示結果を試せます。ただし変更されるのは、ブラウザが現在表示している一時的な状態だけです。ページを再読み込みすると元へ戻ります。
試した値を採用するときは、どのCSSルールを変更したか確認し、Visual Studio Codeで該当するファイルへ同じ変更を書いて保存します。
ElementsでHTMLとCSSを確認する
- 完成したページで「はじめてのWebページ」の見出しを右クリックします。
- 「検証」を選びます。
- Elementsパネルで
<h1>が選ばれていることを確認します。 - Styles欄で
.profile h1のCSSを探します。 font-sizeの値を一時的に変更し、画面が変わることを確認します。
DevToolsで行った変更は確認用であり、元のstyle.cssには保存されません。採用する変更は、必ずVisual Studio Code側のファイルへ書きます。
次の図では、「ElementsでHTMLとCSSを確認する」で行う操作の流れを示しています。
Computedで最終的なCSSを確認する
Stylesには複数のCSSルールが表示されます。打ち消し線がある指定は、別のルールに上書きされています。どの値が最終的に使われているか分からない場合はComputedを開きます。
次の図では、「Computedで最終的なCSSを確認する」で行う操作の流れを示しています。
余白を調べる場合は、要素のBox Modelでmargin、border、padding、contentの大きさを確認します。見た目だけで数値を推測せず、ブラウザが計算した結果を見てください。
ConsoleでJavaScriptのエラーを確認する
Consoleパネルには、JavaScriptのエラーや自分で出力した情報が表示されます。
次の図では、「ConsoleでJavaScriptのエラーを確認する」で行う操作の流れを示しています。
試しにmain.jsのmessageButtonを1か所だけmessageBottonへ変更し、保存してブラウザを更新してください。Consoleに赤いエラーが表示され、エラーが起きたファイル名と行番号を確認できます。
確認後はスペルをmessageButtonへ戻します。エラーが消え、ボタンが再び動くところまで確認してください。
Consoleのエラーを上から読む
エラーが複数表示されている場合は、最初のエラーが後続の処理を止め、その結果として別のエラーが出ていることがあります。まず一番上の赤いエラーから確認します。
次の図では、「Consoleのエラーを上から読む」で行う操作の流れを示しています。
- エラーの種類と説明を読む
- 表示されたファイル名を確認する
- 行番号を押して該当コードを開く
- 変数名、括弧、引用符、セレクターを確認する
- 修正後にページを更新し、同じエラーが消えたか確認する
Consoleへコードを貼り付けるときは、内容を理解できる自分のコードだけにします。Web上で指示された不明なコードを実行しないでください。
Networkで読み込み失敗を確認する
Networkパネルでは、HTMLが読み込もうとしたCSS、JavaScript、画像などを確認できます。
次の図では、「Networkで読み込み失敗を確認する」で行う操作の流れを示しています。
- DevToolsのNetworkパネルを開きます。
index.htmlのCSSパスを一時的にcss/styles.cssへ変更します。- 保存してブラウザを更新します。
- Networkで
styles.cssが赤く表示されていることを確認します。 - パスを
css/style.cssへ戻し、再度更新します。
見た目が反映されない場合は、CSSの書き方だけでなく、ファイル自体を読み込めているかも確認します。
NetworkのStatusとTypeを確認する
Networkでは、ファイル名だけでなくStatusとTypeを確認します。Statusが200なら取得成功、404なら指定した場所にファイルがありません。Typeがstylesheet、script、imageなど意図した種類になっているかも見ます。
ページを開いた後では記録が不足する場合があります。Networkを開いた状態でページを再読み込みし、最初のHTMLからCSS、JavaScript、画像まで順番に確認してください。
画面幅を変えてレスポンシブ表示を確認する
Device Toolbarを有効にすると、ページの表示幅を数値で変更できます。特定の端末名だけでなく、幅を少しずつ動かして、途中で文字や画像がはみ出さないか確認します。
次の図では、「画面幅を変えてレスポンシブ表示を確認する」で行う操作の流れを示しています。
- 320px前後でも横スクロールが出ない
- 文章を拡大しても重ならない
- ボタンやリンクを押せる大きさがある
- 画像が縦横比を保って縮小される
- 表示幅が変わっても読む順番が自然である
原因を切り分ける基本手順
- どの操作で、何が期待と違うかを1文で整理する
- Elementsで必要なHTMLが存在するか確認する
- StylesとComputedでCSSが適用されているか確認する
- ConsoleでJavaScriptエラーを確認する
- Networkで必要なファイルを取得できているか確認する
- 原因を1つ修正し、同じ手順で再確認する
この順番を使うと、勘でコードを書き換える回数を減らせます。STEP 02以降も、表示と動作を確認するときは同じ流れを使います。
次の図では、「原因を切り分ける基本手順」で押さえる違いを左右で比較しています。
