目次

ここは旧トップページ＞日曜プログラミング

JavaScriptのデバッグ(consoleとalert)

プログラムが正常に動作しない場合は、alertとconsoleを使って動作状況を確認すると良いです。

alertの使い方

alertは実行されるとアラートダイアログが表示されユーザーがダイアログを閉じるまで処理が止まります。通常はエラー表示などで使用しますが、意図的にプログラムを止める事ができるのでプログラムの問題がある付近に複数設置する事でどの処理まで正常なのでどこから異常なのか順番に確認できる簡易ブレークポイントとして使えます。（ブラウザで開発者ツールやデベロッパーツールが使えるならそちらのブレークポイントを使った方がより便利な場合もあります）

HTMLを表示し「アラートテスト」を押すと手順1完了の確認画面・押すと手順2完了の確認画面を経て画面に「Hello,World!」と表示されます。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"> 
  </head>
<body>
  <script>
    function demo_alert(){
      var str1="Hello,";
      alert('手順1完了 '+str1);
      var str2="World!";
      alert('手順2完了 '+str2);
      document.getElementById("output_alert").innerHTML=str1+str2;
    }
  </script>
  <p><a href="javascript:void(0)" onclick="javascript:demo_alert();return false;">アラートテスト</a></p>
  <p id='output_alert'></p>
  </body>
</html>

動作確認

アラートテスト

consoleの使い方

コンソールはブラウザに搭載されたコンソール画面に状態を出力します。(Edgeなら「メニュー→開発者ツール→コンソールのタブ」／Chromeなら「メニュー→その他ツール→デベロッパーツール→Consoleのタブ」)。

コンソールが表示された状態で、HTMLを表示し「コンソールテスト」を押すとコンソールに手順1完了→手順2完了と表示され画面に「Hello,World!」と表示されます。

alertでは1手順ごと確認画面が表示され処理が止まりますがconsoleは止まることなく処理が進みます。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"> 
  </head>
<body>
  <script>
    function demo_console(){
      var str1="Hello,";
      console.log('手順1完了 '+str1);
      var str2="World!";
      console.log('手順2完了 '+str2);
      document.getElementById("output_console").innerHTML=str1+str2;
    }
  </script>
  <p><a href="javascript:void(0)" onclick="javascript:demo_console();return false;">コンソールテスト</a></p>
  <p id='output_console'></p>
  </body>
</html>

動作確認

コンソールテスト

コンソールにはログ以外にも、エラー・警告・情報など分類分けして出力する事ができます。

ここは旧トップページ＞日曜プログラミング