学び始めのうちは、うまくいかないと手が止まってしまいます。でも実は、ブラウザには原因を教えてくれる道具が最初から入っています。検証ツール（デベロッパーツール）です。使えるようになると、詰まる時間が桁違いに短くなります。

開き方

  • Windows … F12 キー、または Ctrl + Shift + I
  • Mac … Command + Option + I
  • どの環境でも … 調べたい部分を右クリックして「検証」を選ぶ

おすすめは3つ目の右クリックです。見ている部分がいきなり選択された状態で開くので、目的の場所をすぐ確認できます。

最初に見るのは2つのタブだけ

Elements（要素）— CSSがなぜ効かないかが分かる

選んだ要素に、いまどのCSSが当たっているかが一覧で表示されます。ここで見るポイントは2つです。

  • 打ち消し線の付いた指定 … 別の指定に上書きされて、効いていない状態
  • そもそも自分の書いた指定が出てこない … セレクタが違っていて、この要素に届いていない

「書いたのに効かない」と悩んだとき、この画面を見れば、上書きされているのか届いていないのかが一目で分かります。原因の半分はここで判明します。

Console（コンソール）— JavaScriptのエラーが出る

JavaScriptが動かないときは、まずここを見ます。赤い文字でエラーが出ていれば、その内容が原因そのものです。英語ですが、初心者がよく出会うものは数種類しかありません。

  • Cannot read properties of null … 要素が見つかっていない。id や class の綴り、defer を確認
  • is not defined … 変数や関数の名前が間違っている、または定義される前に使っている
  • Unexpected token … 括弧やクォートの閉じ忘れ。だいたい表示された行の少し前が原因

その場で書き換えて試せる

Elements タブでは、CSSの値をその場で書き換えて結果を確かめられます。数字を選んでキーボードの上下キーを押すと、1ずつ変わって即座に反映されます。余白やサイズの調整は、この方法で当たりを付けてからエディタに書き写すと早いです。

ただし、ここでの変更はページを再読み込みすると消えます。あくまで試す場所であって、保存先ではないことだけ覚えておいてください。

スマホ表示も確認できる

検証ツールの上部にあるスマホのアイコンを押すと、画面幅を変えた表示を確認できます。メディアクエリが効いているかを確かめるときに使います。実機とまったく同じではありませんが、崩れの発見には十分です。

この道具を使えるようになると、質問の仕方も変わります。「動きません」ではなく「コンソールにこのエラーが出ています」と言えるようになるので、検索してもAIに聞いても、返ってくる答えの精度が上がります。