内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
JavaScriptのデバッグ(consoleとalert)
js_debug
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{tag>JavaScript}} [[start]]>[[programming_start]] ====== JavaScriptのデバッグ(consoleとalert) ====== プログラムが正常に動作しない場合は、alertとconsoleを使って動作状況を確認すると良いです。 ---- <html> <style>.b1{border:1px solid #000;}</style> </html> ===== alertの使い方 ===== alertは実行されるとアラートダイアログが表示されユーザーがダイアログを閉じるまで処理が止まります。通常はエラー表示などで使用しますが、意図的にプログラムを止める事ができるのでプログラムの問題がある付近に複数設置する事でどの処理まで正常なのでどこから異常なのか順番に確認できる簡易ブレークポイントとして使えます。(ブラウザで開発者ツールやデベロッパーツールが使えるならそちらのブレークポイントを使った方がより便利な場合もあります) HTMLを表示し「アラートテスト」を押すと手順1完了の確認画面・押すと手順2完了の確認画面を経て画面に「Hello,World!」と表示されます。 <file javascript 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> </file> 動作確認 <html> <div class="b1"> <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> </div> </html> ---- ===== consoleの使い方 ==== コンソールはブラウザに搭載されたコンソール画面に状態を出力します。(Edgeなら「メニュー→開発者ツール→コンソールのタブ」/Chromeなら「メニュー→その他ツール→デベロッパーツール→Consoleのタブ」)。 コンソールが表示された状態で、HTMLを表示し「コンソールテスト」を押すとコンソールに手順1完了→手順2完了と表示され画面に「Hello,World!」と表示されます。 alertでは1手順ごと確認画面が表示され処理が止まりますがconsoleは止まることなく処理が進みます。 <file javascript 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> </file> 動作確認 <html> <div class="b1"> <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> </div> </html> コンソールにはログ以外にも、エラー・警告・情報など分類分けして出力する事ができます。 * ログ・・・console.log(); * 情報・・・console.info(); * 警告・・・console.warn(); * エラー・・・console.error(); ---- [[start]]>[[programming_start]]
js_debug.txt
· 最終更新: 2018/05/19 18:41 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ