よくあるWebサイトの「なぜか動かない」をChrome DevToolsで解消する手順
Webサイトを開発していると、「なぜかボタンがクリックできない」「要素が表示されない」「スタイルが適用されない」といった、「なぜか動かない」「なぜか表示されない」という状況に頻繁に直面します。特に開発経験が浅い段階では、どこに原因があるのか見当もつかず、長時間悩んでしまうことも少なくありません。
しかし、これらの問題の多くは、ブラウザに標準搭載されている強力なデバッグツールである「Chrome DevTools」を適切に活用することで、効率的に原因を特定し、解決することができます。
この記事では、ジュニアWeb開発者の方が遭遇しやすい具体的な「なぜか動かない・表示されない」シナリオを取り上げ、Chrome DevToolsの様々な機能を組み合わせて問題を解決していくための実践的な手順を解説します。この記事を読むことで、バグの発見・特定にかかる時間を短縮し、エラー解決のスキルを向上させる一助となることを目指します。
デバッグの第一歩：原因切り分けの重要性
デバッグの最も重要なステップは、「何が原因で問題が発生しているのか」を切り分けることです。問題が発生している箇所を特定するために、以下の点を常に意識しましょう。
- 意図したコードは実行されているか？ JavaScriptの場合、関数が呼ばれているか、イベントリスナーが正しく設定されているか。
- エラーが発生していないか？ コンソールにエラーメッセージが出ていないか。
- データは正しいか？ 変数の値や、APIから取得したデータは期待通りか。
- DOM構造は正しいか？ HTML要素が期待通りに生成されているか、属性は正しいか。
- スタイルは正しく適用されているか？ CSSルールが効いているか、他のスタイルに上書きされていないか。
- リソースは正しく読み込まれているか？ JavaScriptファイル、CSSファイル、画像などが404エラーになっていないか。
これらの疑問を解決するために、Chrome DevToolsの各パネル（タブ）が役立ちます。
シナリオ1: JavaScriptが期待通りに動作しない
例えば、「ボタンをクリックしても何も起こらない」という場合を考えてみましょう。HTMLにボタンがあり、JavaScriptでそのボタンにクリックイベントリスナーを設定したはずなのに、処理が実行されない状況です。
この場合、以下のステップでChrome DevToolsを使って原因を探ります。
ステップ1: Consoleパネルでエラーを確認する
まず、最も基本的なデバッグ手法として、Consoleパネル（またはConsoleタブ）を開きます。JavaScriptの実行時エラーや警告が表示されます。
- 画面右クリック > 「検証」を選択し、DevToolsを開きます。
- 上部メニューから「Console」タブを選択します。
もし、Uncaught ReferenceError（参照エラー）、TypeError（型エラー）、SyntaxError（構文エラー）などが表示されていれば、JavaScriptコード自体に問題がある可能性が高いです。エラーメッセージに表示されているファイル名と行数を確認し、コードを修正します。
例えば、「myButton.addEventListener is not a function」といったエラーが出ている場合、myButtonという変数が期待する要素（ボタン要素）ではなく、undefinedや他の型の値になっていることが考えられます。
ステップ2: Sourcesパネルで実行を確認する（ブレークポイントとステップ実行）
Consoleにエラーが表示されていない場合、JavaScriptコードは実行されているが、期待する箇所まで到達していないか、ロジックに問題がある可能性があります。この場合は、Sourcesパネルを使ってコードの実行フローを確認します。
- 上部メニューから「Sources」タブを選択します。
- 画面左側のパネルで、問題のJavaScriptファイルを選択して開きます。
- クリックイベントリスナーのコールバック関数が始まる行など、実行を確認したい行番号の左側をクリックしてブレークポイントを設定します。（青いマーカーが表示されます）
- Webサイトに戻り、問題のアクション（今回の例ではボタンクリック）を実行します。
コードの実行がブレークポイントで一時停止します。
ブレークポイントで停止した状態で、右側のパネル（スコープパネルなど）や、行にカーソルを合わせることで、その時点での変数や式の値を確認できます。これにより、例えばボタン要素を正しく取得できているか（myButton変数がnullやundefinedではないか）などを確認できます。
さらに、ブレークポイントで停止中に、右上のコントロールパネル（|| 再開、-> ステップオーバー、<-| ステップイン、|<- ステップアウトなど）を使用して、コードを一行ずつ実行したり（ステップ実行）、特定の関数の中に入ったり（ステップイン）、関数から抜けたり（ステップアウト）することができます。
これにより、コードがどの順番で実行され、どこで意図しない分岐やエラーが発生しているのかを詳細に追跡できます。
ステップ3: Elementsパネルで要素を確認する
JavaScriptで要素を取得している場合、そもそもその要素がHTML上に存在しない、あるいはIDやクラス名が間違っているといった可能性も考えられます。
- 上部メニューから「Elements」タブを選択します。
- 問題の要素（例：ボタン）をDOMツリー内で探すか、画面左上の要素選択ツール（矢印アイコン）を使って該当要素をクリックします。
これにより、その要素のHTML構造が確認できます。JavaScriptコードで指定したIDやクラス名が、実際のHTML要素と一致しているかを確認しましょう。また、要素が非表示になっていないか（display: none;など）、予期せず削除されていないかなども確認できます。
シナリオ2: 要素が表示されない、スタイルが適用されない
次に、「HTMLに要素を書いたのに画面に表示されない」「CSSで指定したスタイルが効かない」という場合を考えてみましょう。
ステップ1: ElementsパネルでDOM構造とスタイルを確認する
表示されない要素がある場合や、スタイルが期待通りに適用されていない場合は、Elementsパネルが中心的なツールとなります。
- 上部メニューから「Elements」タブを選択します。
- 問題の要素をDOMツリー内で探します。要素が存在しない場合、そもそもHTMLに書き忘れているか、JavaScriptで生成する際に失敗している可能性があります。JavaScriptが関わっている場合は、シナリオ1の手順でJavaScriptの実行を確認します。
- 要素がDOMツリーに存在する場合、その要素を選択します。
- 右側のパネルにある「Styles」タブを選択します。ここには、その要素に適用されているCSSルールの一覧が表示されます。
「Styles」タブでは、要素に適用されているCSSルールが詳細に確認できます。
- ルールの確認: どのセレクタ（例:
div p,.my-class,#my-id）のどのプロパティ（例:color: red;,display: none;）が適用されているかを確認できます。 - 上書き（打ち消し）の確認: 打ち消し線が表示されているプロパティは、他のより詳細な（または後に宣言された）CSSルールによって上書きされています。打ち消し線のないルールが最終的に適用されているスタイルです。なぜ上書きされているのかを知るには、打ち消し線のあるルールの下に表示されている、それを上書きしているルールを確認します。
- 計算済みスタイル（Computed）の確認: 「Computed」タブを選択すると、すべてのCSSルールが計算された結果の最終的なスタイル値を確認できます。例えば、
width: 100px;と指定したはずが、親要素のスタイルやパディング、ボーダーなどによって最終的な表示幅が異なる場合に役立ちます。ここでdisplay: none;やvisibility: hidden;、opacity: 0;などが適用されていないか確認することも重要です。 - Box Modelの確認: 「Computed」タブの下部には、要素のコンテンツ、パディング、ボーダー、マージンの値が表示されるBox Model図があります。これにより、要素のサイズや他の要素との間隔が意図通りになっているかを確認できます。
ステップ2: Networkパネルでリソースの読み込みを確認する
CSSファイルや画像などが読み込まれていないために表示がおかしい場合もあります。
- 上部メニューから「Network」タブを選択します。
- ページをリロードします。
- DevToolsを開いた状態でページをロードし直すと、そのページを構成するHTML、CSS、JavaScript、画像などのすべてのリソースに対するHTTPリクエストとレスポンスが表示されます。
- リストの中にステータスコードが「404 Not Found」や「500 Internal Server Error」となっているものがないか確認します。CSSファイルや画像ファイルが404になっている場合、それらが読み込まれていないため表示に問題が出ます。
- ファイル名をクリックすると、リクエストとレスポンスの詳細を確認できます。「Preview」タブで内容を確認したり、「Response」タブでサーバーからの生のレスポンスを確認したりできます。
デバッグを効率化するその他のテクニック
console.log()の活用: 特定の変数やコードの実行タイミングを確認したい場合に、console.log(変数名);やconsole.log("ここに到達しました");などをコードに一時的に挿入して出力する手法は、シンプルながら非常に効果的です。ブレークポイントを設定するほどではないが、サッと値を確認したい場合などに便利です。- DOMの変更を監視する: Elementsパネルで要素を右クリックし、「Break on...」>「subtree modifications」（子孫要素の変更）、「attributes modifications」（属性の変更）、「node removal」（ノードの削除）を選択すると、要素のDOM構造や属性がJavaScriptによって変更された際にSourcesパネルで実行が一時停止します。これにより、予期しないDOM操作を行っているJavaScriptコードを特定できます。
- イベントリスナーの確認: Elementsパネルで要素を選択し、右側のパネルの「Event Listeners」タブを選択すると、その要素に設定されているすべてのイベントリスナーを確認できます。これにより、イベントが正しく設定されているか、あるいは意図しないイベントリスナーが設定されていないかを確認できます。クリックイベントが設定されていない場合や、二重に設定されている場合などの特定に役立ちます。
まとめ
Webサイトの「なぜか動かない」「表示されない」といった問題の多くは、Chrome DevToolsの様々な機能を組み合わせることで原因を特定し、解決に導くことができます。
JavaScriptの動作確認にはConsoleとSourcesパネル、DOM構造やスタイル確認にはElementsパネル、リソース読み込み確認にはNetworkパネルが中心となります。これらのパネルの基本的な使い方と、ブレークポイント、ステップ実行、要素のスタイル確認、ネットワークリクエストの監視といった機能を組み合わせることが重要です。
デバッグは開発スキルの一部であり、経験を積むことでより効率的に、より複雑な問題にも対応できるようになります。今回紹介した手順を参考に、積極的にChrome DevToolsを活用し、自信を持ってバグと向き合っていただければ幸いです。