JavaScriptの開発に欠かせないconsole.log()を使ったデバッグ方法


JavaScriptを学ぶ初心者の方にとって、コードのデバッグは難しい作業の一つです。
そこで、この記事ではJavaScriptでよく使われるデバッグ方法の一つ、console.log()について紹介します。

console.log()とは

console.log()は、JavaScriptのデバッグ用に用意された関数です。
この関数を使用することで、コード中の特定の箇所で値やメッセージをコンソールに出力することができます。
console.log()を使用することで、コードの動作を理解し、問題を特定することができます。

Chromeのデバッグツールで確認

Chromeを例にconsole.log()をどのように確認するのかを紹介します。
例えば、このように変数の値を確認することができます。

ブラウザ上の右クリックメニューより[検証]をクリックしてデバッグツールを開きます。
そこで、上記画像のように

[Console] – [* info]

という部分でconsole.log()で出力した内容を確認できます。

console.log()の使い方

console.log()を使用するには、以下のように記述します。

console.log("出力するテキスト");

また、変数やオブジェクトを出力する場合は、以下のように記述します。

console.log(変数名);
console.log(オブジェクト名);

また、次のようにして複数の値を出力することができます。

console.log("出力するテキスト", 変数名, オブジェクト名);

console.log()の出力確認

先ほどの例を参考にソースコードと出力を見てみましょう。
nowやopenの変数を確認したい例です。

<script>
	now = /* 何らかの設定 */
	open = /* 何らかの設定 */
	console.log('現在時刻:'+now);
	console.log('オープン時刻:'+open);
</script>

コンソール上では、このように表示されます。

テストコードとして、画面上に表示せずに開発者だけが確認できる便利な機能です。

ぜひ活用してください。

[RelService] [Service]