執筆者
S.G.
Chromeデベロッパーツール（通称：DevTools）
Web開発をしていると「思った通りに動かない」「デザインが崩れている」といった問題に直面します。
そんな時に役立つのが、Chromeデベロッパーツール（通称：DevTools）です。
エンジニアとして働き始めて1年、このツールには何度も助けられてきました。最初は「難しそう」と思っていましたが、基本的な使い方を覚えるだけで開発効率が格段に上がります。
今回は、初心者の方でもすぐに使えるデベロッパーツールの基本機能を紹介します。
デベロッパーツールとは
Chromeデベロッパーツールは、Google Chromeに標準で搭載されている開発者向けのツールです。
特別なソフトウェアをインストールする必要はなく、Chromeさえあれば誰でも使えます。
◆ツールでできること
・Webページの構造（HTML）を確認する
・CSSをリアルタイムで編集する
・JavaScriptのエラーを調べる
・ネットワーク通信の状況を確認する
・ブラウザのストレージを確認、管理する
デベロッパーツールの開き方
01 キーボードショートカット
Windows：［F12］または［Ctrl + Shift + I］
Mac：［Command + Option + I］
02 右クリックメニュー
Webページ上で右クリックして、「検証」を選択します。
03 メニューから開く
Chromeの右上のメニュー（三点リーダー）→「その他のツール」→「デベロッパーツール」
どの方法でも同じツールが開きますが、私は方法1と2を使うことが多いです。
タブを使いこなす
Elementsタブ：HTMLとCSSを確認・編集
◆HTMLの構造を見る
Elementsタブでは、Webページを構成するHTMLの構造を確認できます。
画面左側にHTMLのコードがツリー状に表示されます。
どの要素がどこに配置されているのか、親子関係はどうなっているのか、一目で把握できます。
◆要素を選択する
左上の矢印アイコン（要素選択ツール）をクリックすると、ページ上の要素をマウスでクリックして選択できます。
「このボタンはどのHTMLで書かれているんだろう」と思ったとき、この機能を使えばすぐに該当のコードを見つけられます。
◆CSSをリアルタイムで編集
Elementsタブの右側には、選択した要素に適用されているCSSが表示されます。
ここで色・サイズ・余白などを直接編集できます。
例えば、［color: blue;］と書かれている部分をクリックして［color: red;］に変更すると、ページ上の色が即座に変わります。
「このボタンの色を変えたらどう見えるかな」「余白を広げたらどうなるかな」といった試行錯誤がリアルタイムでできるのが便利です。
ただし、ここでの変更は一時的なものなので、ページをリロードすると元に戻ります。
実際のコードを変更するわけではないので、気軽に試すことができます。
◆レイアウトの確認
要素を選択すると、余白（margin）、枠線（border）、内側の余白（padding）が色分けして表示されます。
「なぜこの要素が思った位置にないのか」「余白が広すぎるのはなぜか」といった疑問を視覚的に確認できます。
Console タブ：JavaScriptのエラーを確認
◆エラーメッセージを読む
JavaScriptでエラーが発生すると、Consoleタブに赤い文字でエラーメッセージが表示されます。
例えば、
［Uncaught ReferenceError: userName is not defined］
と表示されたら、［userName］という変数が定義されていないことがわかります。
エラーメッセージには、どのファイルの何行目でエラーが起きたかも表示されるので原因を特定しやすくなります。
◆JavaScriptを実行してみる
Consoleタブでは、その場でJavaScriptのコードを実行できます。
例えば、
［console.log("Hello");］
と入力してEnterキーを押すと、すぐに結果が表示されます。
変数の中身を確認したい時、関数が正しく動くか試したい時など、Consoleで手軽に検証できます。
Network タブ：通信の状況を確認
◆どんなファイルが読み込まれているか
Webページを開くと、HTMLだけでなく、CSS、JavaScript、画像など様々なファイルが読み込まれます。
Networkタブでは、これらのファイルが正しく読み込まれているかを確認できます。
赤い文字で表示されているファイルは、読み込みに失敗しています。
画像が表示されない、CSSが効いていないといった問題があるときは、Networkタブを確認すると原因がわかることが多いです。
◆APIの通信を確認
LaravelなどでAPIを使った開発をしているとき、「正しいデータが返ってきているか」を確認したい場合があります。
Networkタブで該当のリクエストをクリックすると、送信したデータ（Request）と受信したデータ（Response）を確認できます。
「データが取得できない」「おかしな値が返ってくる」といった問題を調べる際に非常に役立ちます。
Application タブ：ストレージの確認
◆Cookieやストレージの中身を見る
Applicationタブでは、Cookie、Local Storage、Session Storageなどがブラウザに保存されているデータを確認できます。
ログイン機能を作っているときに「ちゃんとCookieが保存されているか」「セッションが切れていないか」をチェックするのに使います。
不要なデータを削除することもできるので、「ログアウトしたのにデータが残っている」といった問題を解決する時にも便利です。
使うから、使いこなす
実際の使用例
◆CSSが思った通りに効かない時
「背景色を変えたのに反映されない」というときに、Elementsタブで該当の要素を確認します。
すると、自分が書いたCSSが別のCSSで上書きされていることがわかりました。
どのCSSが優先されているかを確認することで、問題を解決できます。
◆JavaScriptのエラーを調べる時
「ボタンをクリックしても動かない」というときに、Consoleタブを確認すると［Uncaught TypeError: Cannot read property 'value' of null］というエラーが出ていました。
このエラーメッセージから、存在しない要素にアクセスしようとしていることがわかり、コードを修正できました。
◆APIからデータが取得できない時
「データベースからデータを取得する処理がうまくいかない」というとき、Networkタブで通信内容を確認すると、ステータスコードが500（サーバーエラー）になっていました。
Responseを見ると、エラーの詳細が表示されており、SQLの書き方が間違っていることがわかりました。
使いこなすコツ
◆まずはElementsとConsoleから
デベロッパーツールには多くの機能がありますが、最初はElementsタブとConsoleタブの使い方を覚えるだけで十分だと考えています。この2つだけでも多くの問題を解決できます。
◆エラーメッセージを恐れない
赤い文字でエラーが表示されると、最初は怖く感じるかもしれません。
でも、エラーメッセージは「何が問題か」を教えてくれる大切なヒントです。
丁寧に読めば、なにが原因なのかがわかることが多いです。
◆変更は一時的なので安心して試せる
デベロッパーツールで行った変更はページをリロードすると元に戻ります。
実際のファイルを変更しているわけではないので、安心して色々試すことができます。
総括・まとめ
Chrome デベロッパーツールは、Web開発に欠かせないツールです。
最初は機能が多くて戸惑うかもしれませんが、基本的な使い方を覚えるだけで開発効率が大きく変わります。
・Elementsタブ
HTMLとCSSの確認・編集
・Consoleタブ
JavaScriptのエラー確認・コード実行
・Networkタブ
通信の確認
・Applicationタブ
ストレージの確認
これらの基本機能を使いこなすことで、「なぜ動かないのか」を自分で調べて解決できるようになります。
エラーが出たとき、デザインが崩れたとき、まずはデベロッパーツールを開いてみてください。きっと、問題解決のヒントが見つかるはずです！
