{{tag>JavaScript}}
[[start]]＞[[programming_start]]
====== JavaScriptのデバッグ(consoleとalert) ======
プログラムが正常に動作しない場合は、alertとconsoleを使って動作状況を確認すると良いです。
----
===== alertの使い方 =====
alertは実行されるとアラートダイアログが表示されユーザーがダイアログを閉じるまで処理が止まります。通常はエラー表示などで使用しますが、意図的にプログラムを止める事ができるのでプログラムの問題がある付近に複数設置する事でどの処理まで正常なのでどこから異常なのか順番に確認できる簡易ブレークポイントとして使えます。（ブラウザで開発者ツールやデベロッパーツールが使えるならそちらのブレークポイントを使った方がより便利な場合もあります）
HTMLを表示し「アラートテスト」を押すと手順1完了の確認画面・押すと手順2完了の確認画面を経て画面に「Hello,World!」と表示されます。
アラートテスト
動作確認
----
===== consoleの使い方 ====
コンソールはブラウザに搭載されたコンソール画面に状態を出力します。(Edgeなら「メニュー→開発者ツール→コンソールのタブ」／Chromeなら「メニュー→その他ツール→デベロッパーツール→Consoleのタブ」)。
コンソールが表示された状態で、HTMLを表示し「コンソールテスト」を押すとコンソールに手順1完了→手順2完了と表示され画面に「Hello,World!」と表示されます。
alertでは1手順ごと確認画面が表示され処理が止まりますがconsoleは止まることなく処理が進みます。
コンソールテスト
動作確認
コンソールにはログ以外にも、エラー・警告・情報など分類分けして出力する事ができます。
* ログ・・・console.log();
* 情報・・・console.info();
* 警告・・・console.warn();
* エラー・・・console.error();
----
[[start]]＞[[programming_start]]