【Web】console.logでJavaScriptのデバッグ (Web勉強記 5日目)

投稿日：2019年8月16日

最終更新日：2019年8月16日

JavaScriptのデバッグの基本：console.log

今回はJavaScriptのconsole.logの機能を使って、ブラウザ上でコードの動作を観察してみる。JavaScriptに限らず、logに値を出力して確認するのはデバッグの定石なので、しっかり使いこなしたい。

使い方は簡単で、対象のコードの中の見たい変数(たとえばaとする)を指定して、コードの中に

console.log(a);

のように書けば、aの値がブラウザのlogに出力される。ためしに作成中のおみくじアプリで、class名を入れた文字列の変数”resultClass”をconsole.logで表示してみる。

	<!DOCTYPE html>
	<html>
	<head>
	<link rel = "stylesheet" href = "omikuji_element.css"/>
	<script>
	function tryFortune() {
	var resultInt = Math.floor(Math.random () * 7)
	switch (resultInt) {
	case 0 : resultText = "大凶"; resultClass = "bad"; break;
	case 1 : resultText = "凶"; resultClass = "bad"; break;
	case 2 : resultText = "末吉"; resultClass = "normal"; break;
	case 3 : resultText = "小吉"; resultClass = "normal"; break;
	case 4 : resultText = "中吉"; resultClass = "good"; break;
	case 5 : resultText = "吉"; resultClass = "good"; break;
	default : resultText = "大吉"; resultClass = "good"; break;
	}
	document.getElementById("result").textContent = resultText;
	document.getElementById("result").className = resultClass;
	console.log(resultClass);
	}
	</script>
	</head>
	<body>
	<h1>HTMLとJavaScriptによるWebおみくじ</h1>
	<button class = "button_omikuji" onclick="tryFortune()">おみくじを引く</button>
	<p id = "result"></p>
	</body>
	</html>

view raw omikuji.html hosted with ❤ by GitHub

今回はGoogle Chromeで試す。ブラウザの右上のボタンから「その他のツール」→「デベロッパー　ツール」を選択すると、画面右側にデベロッパーツール画面が表示される。

ここでConsoleを選んで、おみくじを実行すると、resultClassの値がConsoleに表示された。

今はこの本を読みながらHTML、CSS、JavaScriptの勉強してます。書籍のコードをなぞるだけだと面白味が無いしブログにものっけられないので、本で勉強したことをもとに何かつくり、コードを公開していくスタイルで日記を書いてます。最終的にはWebブラウザ上で動くゲームをつくって公開したい。

今までの勉強記は以下にまとめています。初学者の目線で色々つくったり、試してみたりしてるので、興味があればどうぞ。

【Web】HTML/CSS/JavaScriptでおみくじをつくろう日記

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。