今回やること
この記事では、ブラウザの開発者ツールを使って、HTML、JavaScriptエラー、通信、保存データを見る最初の手順を確認します。
Webページで何かがおかしい時は、画面だけでなくDevToolsを見ます。
Step 1: DevToolsを開く
ChromeまたはEdgeでページを開き、DevToolsを表示します。
Cmd/Ctrl + Shift + I
Consoleを直接開く場合は次を使います。
Cmd/Ctrl + Shift + J
Step 2: ElementsでHTMLを見る
Elementsパネルでは、ブラウザが解釈したHTMLを確認できます。
確認すること:
- 見出しやボタンが存在するか
- classやidが想定通りか
- CSSが適用されているか
画面上の要素を右クリックして「検証」を選ぶと、その要素を直接確認できます。
Step 3: Consoleでエラーを見る
JavaScriptのエラーはConsoleに表示されます。
例:
Cannot set properties of null
この場合は、取得しようとしたDOM要素が見つかっていない可能性があります。
確認順:
- エラー文を読む
- 行番号を見る
- 該当ファイルを開く
- セレクタや変数名を確認する
Step 4: Networkで読み込みを見る
Networkパネルでは、HTML、CSS、JavaScript、画像、API通信が読み込まれたか確認できます。
手順:
- Networkパネルを開く
- ページを再読み込みする
- 赤い行や404を探す
- CSSやJSが読み込まれているか見る
CSSやJSのパスが間違っていると、Networkに404が出ることがあります。
Step 5: Applicationで保存データを見る
Applicationパネルでは、localStorage、sessionStorage、Cookieなどを確認できます。
JavaScriptでlocalStorageに保存した値があるかを見る時に使います。
localStorage.setItem("theme", "dark");
保存後、Application > Local Storageを確認します。
ポイント: DevToolsでは、Consoleだけでなく、Elements、Network、Applicationを組み合わせて原因を切り分けます。
よくあるエラー
| 症状 | 見る場所 | よくある原因 |
|---|---|---|
| CSSが効かない | Network / Elements | CSSのパス違い |
| JSが動かない | Console / Network | エラー、読み込み失敗 |
| APIが返らない | Network | URL、CORS、ステータスコード |
| 保存値が残る | Application | localStorageやCookie |
次にやること
READMEとMarkdownで学習記録を書く で、作ったものを説明する文章を整えます。
まとめ
DevToolsは、Webページの状態を調べるための必須ツールです。ElementsでHTMLとCSS、ConsoleでJavaScriptエラー、Networkで通信、Applicationで保存データを確認します。
