開発者ツールの使い方入門

ページの上で右クリック→「検証」。出てきたごちゃごちゃした画面をそっと閉じたこと、ありませんか？あれは開発者ツール（デベロッパーツール）——Webページの中身をのぞいて、その場でいじれる、Web制作最強の相棒です。機能は山ほどありますが、最初に覚えるのは3つだけでいいです。

開き方は3通り

• ページの上で右クリック→「検証」（調べたい場所の上でやると、その場所が選ばれた状態で開く）
• F12キー
• Mac：⌘+option+I／Windows：Ctrl+Shift+I

閉じるときは右上の「×」か、同じキーをもう一度押します。

その1：Elementsパネル——HTMLと CSSをのぞく

開いてすぐ見えているのがElementsパネル。いま表示しているページのHTMLの中身が木のように表示され、行をクリックすると、ページ側の対応する場所が光って教えてくれます。

下半分のStylesには、選んだ場所に効いているCSSが全部並びます。ここがすごいところで——

• 数字をクリックして書き換えると、その場でページが変わる（余白や文字サイズの試行錯誤が一瞬）
• チェックを外すと、その指定を一時的にオフにできる（「このCSS、何の仕事してるの？」が分かる）
• 打ち消し線がついた指定は、ほかのCSSに負けて効いていない印
• 色の指定の横にある四角い色見本をクリックすると、#rrggbb・rgb()・hsl()の表記を切り替えたり、カラーピッカーで色そのものを変えたりできる

いくらいじっても、再読み込みすれば元どおり。壊れる心配のない砂場なので、遠慮なくいじりましょう。気に入った数字が見つかったら、自分のstyle.cssに書き写せば完成です。

その2：Consoleパネル——エラーとメッセージを読む

Consoleは、ページからの「お知らせ窓口」です。JavaScriptのエラー、console.logで書いたメッセージ、読み込みに失敗したファイル——ぜんぶここに届きます。

「ボタンを押しても動かない」「画像が出ない」——困ったとき最初に見る場所はここです。赤い文字が出ていたら、それが原因のヒント。

その3：デバイスツールバー——スマホでの見た目を確認

左上のスマホとタブレットが重なったアイコン（Mac：⌘+shift+M）を押すと、ページがスマホの画面幅で表示されます。機種を選んだり、幅を自由にドラッグしたりできるので、「スマホで見ると崩れてないかな？」の確認が、スマホを取り出さずにできます。

もう1つ覚えると強い：Networkパネル

「画像が表示されない」「CSSが反映されない」——初心者のつまずきで最も多いこの2つは、ファイルがそもそも届いていないのが原因です。それを白黒つけてくれるのがNetworkパネルです。

1. Networkタブを開く
2. その状態でページを再読み込みする（開く前の通信は記録されないため、この順番が大事）
3. 読みこまれたファイルが一覧で並ぶ

見るところはStatus（状態）の列だけです。

style.css が404なら、CSSの書き方をいくら見直しても直りません。まず届いているかを確かめる、これが遠回りしないコツです。

症状から引く早見表

どのパネルを開けばいいか迷ったときの対応表です。

よく使うショートカット

上達がいちばん速い使い方

好きなサイトを「検証」で分解することです。きれいだなと思ったボタンの上で右クリック→検証。どんな色？余白は何px？角丸は？——プロの技が、ぜんぶ数字で見えます。眺めて、いじって、まねる。開発者ツールは、無料で無限に読める「Webの教科書」です。

まとめ

1. 開き方は右クリック→「検証」。いじっても再読み込みで元どおりの安全な砂場
2. ElementsでHTMLとCSSをのぞき、Stylesの数字をその場で書き換えて試行錯誤する
3. 困ったらConsole。赤いエラーが原因のヒント
4. 画像やCSSが出てこないときはNetworkでStatusを見る。404ならパスのまちがい
5. 直したのに変わらないときは⌘/Ctrl + ⇧ + Rでキャッシュを無視して再読み込み

「検証」を怖がらなくなった日から、Web制作の上達は一気に加速します。