JavaScript【 console.log 】 ~ デバッグの方法

プログラムが 意図した通りに動かない場合に、どこで不具合が起こっているかを探し出して、原因を取り除くことをデバッグといいます。
今回は、JavaScript でデバッグをする方法について紹介します。

目次

 
1.デバッグとは
2.alert でデバッグ
3.console.log でデバッグ

1.デバックとは

 
プログラムの不具合について、その原因を探し出して取り除くことを「 デバッグ 」といいます。

因みに、プログラムの不具合の原因となる欠陥や誤りを「 バグ 」とよびます。
バグは 虫のことなので、プログラムに付いている害虫のイメージだと思います。

JavaScript は、手軽に組み込めるのがメリットのプログラム言語で、複雑なロジック等を使うことはあまりないので、他の言語と比べて デバッグの必要性は高くはありません。
ですが、少なくとも 意図した通りにプログラムが動かない場合には、デバッグを行って、バグを除去する必要があります。

▲目次へ戻る

 

2.alert でデバッグ

 
プログラムが意図した通りに動かない場合は、デバッグで、変数に きちんと値が代入されているかを確認したり、ソースコードのどの行から読み込みが止まっているかを確認したりします。

このようにしてデバッグを行いますが、確認する場所が少ない場合は、alert メソッドを使用して、アラート表示をすることで デバッグを行うことができます。
 

次のサンプルは、入力内容を表示するプログラムを作る途中の段階で、うまく表示ができていないものです。


  
 
 

 
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    var str = document.getElementById("dat2").value;
    document.getElementById("dat").value = str;
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <input type="text" id="dat" placeholder="ここに入力して下さい"> 
    <nobr><input type="button" value="表示" onClick="disp()"></nobr>  
    <input type="text" id="dat2" placeholder="入力内容をここに表示します"> 
</div>

 
入力内容を変数str に代入しているので、次のように alert メソッドを使用して、変数str の中身を表示してみます。

function disp() {
    var str = document.getElementById("dat2").value;

alert("str=" + str);

    document.getElementById("dat").value = str;
}

 
デバッグ用の「 alert(“str=” + str); 」は、後ほど忘れずに削除しないといけないので、インデント等を工夫して、目立つようにしておいた方が良いです。
自分以外の人がソースコードを見る可能性がある場合は、「 //デバッグ用アラート 」等のコメントを付けることをお勧めします。
 
 
文字等を入力して、表示ボタンをクリックしてみて下さい。


  
 
 

 
文字等を入力して、表示ボタンをクリックすると、「 str= 」とアラート表示され、入力内容が 変数str に代入されていないことが確認できると思います。

そこで、入力内容を 変数str に代入している「 var str = document.getElementById(“dat2″).value; 」の部分をよく見ると、ユーザが入力するためのテキストボック「 <input type=”text” id=”dat” placeholder=”ここに入力して下さい”> 」は、id 名 が「 dat 」であるため、「 var str = document.getElementById(“dat”).value; 」と記述すべきところ、id 名を「 dat2 」と誤って指定していることが分かります。
 
 
id 名を「 dat 」に修正すると、次のようになります。
文字等を入力して、表示ボタンをクリックしてみて下さい。


  
 
 

 
バグを修正して、正常な動きが確認できたら、デバッグのための「 alert(“str=” + str); 」を削除することを忘れないように注意して下さい。

▲目次へ戻る

 

3.console.log でデバッグ

 
alert メソッドを使用したデバッグは 手軽で便利ですが、変数の数 や 確認したい位置 が多い場合には、処理が煩雑になってしまいます。

このような場合には、console オブジェクトの log メソッド( console.log )を使用してデバッグを行う方法が適しています。

console.log メソッドは、ブラウザのコンソールにメッセージを出力します。

console.log メソッドは、次のように記述して使用します。

console.log( 出力内容 )

また、カンマ「 , 」区切りで複数の値を出力することもできます。

console.log( 出力内容1 , 出力内容2 , 出力内容3 , ... )

 

Google Chrome など、デベロッパーツールを持っているブラウザでは、Windowsの場合、F12キーを押すとデベロッパーツールが表示され、コンソールへの出力内容が確認できます。
( Macの場合は、Command+Option+Iキーでデベロッパーツールが表示されます。 )

console.log("コンソール出力テスト!")

上記のコードを実行すると、コンソールに 次のようなログ出力が確認できます。
7096colmun_image8181_01

ログのみを表示すると、このようになります。
7096colmun_image8181_02
 
 
画面からの入力内容をコンソールにログで出力します。
文字等を入力して、表示ボタンをクリックしてみて下さい。

  
  

 
コンソールにこのようなログの出力が確認できたでしょうか。
(「テスト入力」と入力しました。)
7096colmun_image8181_03

ソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    var str = document.getElementById("dat").value;
    console.log("入力内容:" + str);
}
//-->
</script>

<div style="background-color : #CCC;">
    <div style="display:inline-flex; align-items: center;">
        <input type="text" id="dat" placeholder="ここに入力して下さい">  
        <input type="button" value="ログ出力" onClick="disp()">  
    </div>
</div>

 
console.log メソッドを使用してデバッグを行うと、各ログを一括して出力することができるので、確認したい変数の数が多い場合や、ソースコードが長い場合等に便利です。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です