デベロッパーツール | プログラミング入門ナビ by Proglus（プログラス）

JavaScriptを学習していて、プログラムが期待したとおりに動かなくて困ったことはありませんか？

そんなときはコンソールを開いて、エラーがないか確認してみましょう。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

WebブラウザのGoogle Chrome を利用して説明します。

動画でJavaScriptのエラーを自力で解決するための方法を学習する

エラーを表示するコンソールは、Google Chromeに標準で搭載されているデベロッパーツールの機能を使います。

デベロッパーツールを起動するには、

ブラウザの表示領域で右クリック > 検証をクリック

Consoleタブをクリックして選択します。

JavaScriptのプログラムを実行します。
ここでは、Hello World!とConsoleに出力する簡単なプログラムを記述します。

・・・略・・・

<script>
   console.log('Hello World!');
</script>

・・・略・・・

このように表示されます。
Hello World!と表示されています。

console.log('Hello World!');

↓とすべきところをあえて、間違えて実行します(c->k)

konsole.log('Hello World!');

Consoleにエラーメッセージが表示されています。

Uncaught ReferenceError : konsole is not defined

日本語だと次のような意味になります。

エラーがある行の数も表示されているので、参考にします。

これで、9行目のkonsoleの部分なにか間違いがあると、あたりを付けることができました。

MDNにエラーのリストが掲載されているので必要に応じて参照することができます。

この記事では、JavaScriptでエラーを自力で解決するための方法について学習しました。

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう