JavaScriptのエラーをConsoleで確認する方法。ブラウザIDEでデバッグ練習

JavaScriptを練習していると、画面が動かないのに原因が分からないことがあります。そんなときは、Previewだけを見るのではなくConsoleも一緒に確認すると、エラーの場所を見つけやすくなります。

Consoleを見る理由

JavaScriptの構文ミス、変数名の間違い、存在しない要素への操作などは、画面だけでは分かりにくいことがあります。Consoleにはエラー文が表示されるため、どの行や処理で止まったのかを推測できます。

AI Work Studioでの確認手順

1. AI Work StudioでJavaScriptタブを開く
2. ボタンやDOM操作のコードを書く
3. Run Previewを押す
4. Consoleタブ、またはSplit表示でエラーを見る
5. 修正後にもう一度Run Previewを押す

よくあるエラー例

const button = document.querySelector(".start");
button.addEventListener("click", function(){
  console.log("clicked");
});

このコードでは、HTML側にclass名startの要素がないと、buttonがnullになりエラーになります。HTMLとJavaScriptの指定が一致しているかを確認しましょう。

AI Reviewも使う

エラー文を読んでも分からない場合は、JavaScriptファイルを開いた状態でAI Reviewを押すと、つまずきやすい点を短く確認できます。HTML/CSS/JavaScriptの基本練習はライブプレビューの記事も参考になります。