ywork2020.com

Title

コンソールログを使えばプログラムの誤りを見つけることができる

console.logの概要

consoleオブジェクトのlogメソッドを使うと、引数に指定した値をブラウザのコンソールに出力することができます。

プログラム中の任意の場所にこのメソッドを配置しておいて、各所で調べたい変数の値やエラー値を出力して利用します。

プログラムの開発中にエラーが発生することは、普通によくあることです。 また、エラーでなくても、コードの途中で変数の値が予測した通りになっているかを調べることも頻繁にあります。 そのような時にブラウザのコンソールに知りたい値を出力して確認する方法が用いられます。

実機サンプル

※ボタンを押す前に[F12]キーを押すか、手動でブラウザのコンソールを表示して下さい。

このボタンをクリックすると正常にプログラムが動作します。
正常なコード部分[document]

コンソールだけでなく、ここにも結果を表示します。

このボタンをクリックするとエラーが発生します。
誤りのコード部分[Document]

サンプルコード

<body>
	<p>
		このボタンをクリックすると正常にプログラムが動作します。<br>
		<input type="button" value="ボタン1 (正常コード)" onclick="onClick1(1)"> 正常なコード部分[document]
	</p>
	<p id="idAnswer" style="color: blue;">コンソールだけでなく、ここにも結果を表示します。</p>
	<p>
		このボタンをクリックするとエラーが発生します。<br>
		<input type="button" value="ボタン2 (誤りコード)" onclick="onClick2(2)"> 誤りのコード部分[Document]
	</p>
	<script>
		document.open();
		//***************************************************************************************
		function onClick1(btnNum){
			try{
				document.getElementById("idAnswer").innerHTML = '正常コードがクリックされました';				
				console.log(btnNum,'正常コードがクリックされました');
			}
			catch(myErr){	//try{処理}実行中にエラーが発生したら直ちにcatch{処理}に切り替わる
				document.getElementById("idAnswer").innerHTML = myErr;
				console.log(btnNum,'正常コードがクリックされました');
				console.log(myErr);
			}
			finally{	//try{処理}又はcatch{処理}完了後、必ず実行される
				console.log('ボタン1 処理完了しました');
			}
		}
		//***************************************************************************************
		function onClick2(btnNum){
			try{
				Document.getElementById("idAnswer").innerHTML = '誤りコードクリックされました';
				console.log(btnNum,'誤りコードがクリックされました');
			}
			catch(myErr){	//try{処理}実行中にエラーが発生したら直ちにcatch{処理}に切り替わる
				document.getElementById("idAnswer").innerHTML = myErr;
				console.log(btnNum,'誤りコードがクリックされました');
				console.log(myErr);
			}
			finally{	//try{処理}又はcatch{処理}完了後、必ず実行される
				console.log('ボタン2 処理完了しました');
			}
		}
		//***************************************************************************************
		document.close();
	</script>
</body>

サンプルコードの要点

  1. コンソールログに変数の値やエラー内容を表示できる
  2. try{} catch{} finally{} ステートメントでエラーの場合の処理が指定できる