ブラウザの開発者ツールの使い方｜要素・Console・スマホ表示

ブラウザの開発者ツールの使い方とは

開発者ツールは、主要なブラウザに最初から入っている「ページの中身を調べる道具」です。HTML の構造、要素に当たっている CSS、JavaScript のエラー、読み込んだファイルの一覧、スマホでの見え方まで確認できます。

Web 制作で「表示がおかしい」「動かない」と感じたときに最初に開くのが、この道具です。インストールは不要で、無料で使えます。この記事では、初心者がまず覚えたい4つの使い方（要素・Console・Network・スマホ表示）を、手順つきで整理します。

基本（開き方と主なパネル）

開き方はブラウザによって少し違います。MDN では次の方法が紹介されています。

方法 Windows Mac
キーボード Ctrl＋Shift＋I または F12 Command＋Option＋I
右クリック 調べたい場所を右クリックして「検証」「要素を調査」など 同じ（Ctrl＋クリックでも可）

ノートパソコンで F12 を押しても音量などが変わるときは、Fn キーを押しながら F12 を押します。キーで開かないときは、メニューから開けます。Edge は右上の「…」→「その他のツール」→「開発者ツール」、Chrome は右上の「︙」→「その他のツール」→「デベロッパー ツール」です。

主なパネルの役割です（名前はブラウザや設定により、日本語か英語で表示されます）。

パネル 何が分かるか よく使う場面
要素（Elements／インスペクター） HTML の構造と、当たっている CSS 余白や色が思ったとおりにならない
Console（コンソール） JavaScript のエラーとメッセージ ボタンを押しても動かない
Network（ネットワーク） 読み込んだファイルと結果（200／404 など） 画像や CSS が出ない
デバイスの切り替え スマホやタブレットの幅での見え方 スマホで崩れていないか

具体例（よくある症状と、見るパネル）

症状 見るパネル 手がかり
画像が出ない Network 画像の行が 404 なら、パスかファイル名の間違い
CSS が全く効かない Network → 要素 CSS ファイルが 404 か、<link> のパスが違う
一部の CSS だけ効かない 要素 打ち消し線が付いたルールがあれば、別のルールに負けている
ボタンが反応しない Console Cannot read properties of null なら、要素が見つかっていない
スマホで横にはみ出す デバイスの切り替え 幅を固定した要素を、要素パネルで探す

ブラウザの開発者ツールの使い方の実践ステップ

  1. 調べたいページを開き、F12 キー（Mac は Command＋Option＋I）で開発者ツールを開きます。
  2. 要素を調べる： 左上の矢印アイコン（要素を選択）を押してから、ページの見出しをクリックします。HTML の該当行が選ばれ、右側に当たっている CSS が表示されます。CSS の値をその場で書き換えると、すぐに画面に反映されます（再読み込みで元に戻ります）。
  3. Console を見る： Console タブを開き、赤いエラーが出ていないかを見ます。エラーの右端に出るファイル名と行番号をクリックすると、該当の行に移動できます。
  4. Network を見る： Network タブを開いた状態でページを再読み込みし、404 の行がないかを確かめます。
  5. スマホ表示を試す： Edge は開発者ツールの左上の並び（アクティビティ バー）にある「デバイス エミュレーションの切り替え」ボタン、Chrome は「デバイス ツールバーの切り替え」ボタン（どちらもスマホとタブレットの形のアイコン）を押します。ページの上に出たバーの幅の入力欄に 375 などと入れて見え方を確かめ、もう一度ボタンを押すと元に戻ります。

ブラウザの開発者ツールの使い方の注意点

  • 開発者ツールで書き換えた HTML や CSS は、自分の画面だけ・一時的です。ファイルは変わらないので、良い値が見つかったらエディタでファイルを直します。
  • デバイスの切り替えは、画面の幅をまねるものです。文字の見え方や操作感は実機と違うことがあるので、公開前には実際のスマホでも確かめます。
  • Console に、自分が書いていない拡張機能のメッセージが出ることがあります。まず自分のファイル名が書かれたエラーから読みます。

ブラウザの開発者ツールの使い方でよくあるミス

  • エラーを読まずに、コードを書き直し始める： Console のエラー文には、原因の種類と行番号が書かれています。英語でも、null・undefined・404 などの単語を拾うだけで、かなり絞り込めます。
  • キャッシュで古いファイルを見ている： 直したのに変わらないときは、再読み込みします。開発者ツールの Network に「キャッシュを無効化」の設定があるブラウザもあります。
  • 開発者ツールで直して満足する： 一時的な変更なので、ファイルに反映し忘れます。

ブラウザの開発者ツールの使い方のチェックリスト

  • [ ] キーボードで開発者ツールを開ける
  • [ ] 要素パネルで、要素に当たっている CSS を確認できる
  • [ ] Console の赤いエラーから、ファイル名と行番号を読める
  • [ ] Network で 404 のファイルを見つけられる
  • [ ] スマホの幅で表示を確かめられる

ブラウザの開発者ツールの使い方のFAQ（よくある質問）

Q. どのブラウザの開発者ツールを使えばいいですか？

A. ふだん使っているブラウザで十分です。主要なブラウザには、同じような機能がそろっています。

Q. 開発者ツールでほかの人のサイトを書き換えても大丈夫ですか？

A. 変わるのは自分の画面の表示だけで、相手のサーバーのファイルは変わりません。学習のために構造を調べるのは問題ありませんが、表示を書き換えた画面を本物のように見せる使い方はしないでください。

Q. Console に console.log と書くと何が起きますか？

A. JavaScript の中で console.log('確認') と書くと、その文字が Console に表示されます。プログラムがその行まで動いたか、変数に何が入っているかを確かめる基本の方法です。

筆者の見解（ブラウザの開発者ツールの使い方）

初心者のうちは、エラーが出ると「自分には分からない」と閉じてしまいがちですが、私は開発者ツールこそ、最初の週から開く習慣を付けるべき道具だと考えます。特に Network の 404 と Console の null の2つが読めるだけで、表示されない・動かないトラブルの多くは自分で原因に近づけます。エラー文は、あなたを責めるものではなく、ブラウザからの道案内だと捉えると気が楽になると思います。

ブラウザの開発者ツールの使い方の関連項目

出典（一次情報）

タイトルとURLをコピーしました