|
Web開発では、「Webブラウザで動くJavaScript」でプログラムを開発します。このWebブラウザ上のJavaScriptでデバッグを行う（実行時のデバッグ情報を出力する）方法をまとめてみました。 コンソールにJavaScriptからデバッグ情報を出力するPC版のWebブラウザなら、簡単です。デバッグ機能としてブラウザの動作状況を表示するコンソールを持っていますので、まずはそれを開きましょう。 Firefoxならメニューの「開発ツール」から「ブラウザコンソール」を、IEなら「開発者ツール」を開けばコンソールが表示されます。 このコンソールには、HTMLやネットワーク、JavaScriptに関する警告やエラーが表示されるので、動作検証の際には目を離さないようにしたいですね。また、JavaScriptの「console」オブジェクトから、任意の文字列やオブジェクトの情報を表示することができます。 ブラウザコンソールを出した状態で、以下のJavaScriptコードを実行してみましょう。 log()は、引数に指定された文字列をそのままコンソールに出力します。デバッグ時にconsole.log()で引数の値や計算結果を出力すれば、実際にどんな値として処理されているか、確認できるわけです。 consoleには、JavaScriptのオブジェクトのプロパティを確認できる機能もあります。こちらも試してみましょう。a/b/cという3つのプロパティに1/2/3という値を入れたオブジェクトを作成し、console.dir()に渡してみます。 ブラウザのコンソールにプロパティの値が表示されましたね。 デバッグ出力用の領域を作るコンソールだと、連続的に変化する値を監視しにくい場合もあります。また、スマートフォン上で動かす場合など汎用性という点でも問題になることが。そんな時は、ページ上のHTMLでデバッグ出力を行う領域を作成しておくのも手です。 出力領域は、他の部分になるべく影響を与えないよう一番下に確保するか、あるいはabsoluteポジションでページ本体から浮かせてもよいでしょう。 確保したデバッグ表示領域には、innerHTMLプロパティを通して文字列を設定します。 alert()でダイアログ表示JavaScriptには、指定文字列をダイアログ（独立ウインドウ）として出力するalert関数が用意されています。 このalert()で文字列をダイアログ表示させる方法も、有効です。alert()によるダイアログは、スマートフォンでも問題なく表示され、HTML構造に手を加える必要もありません。手軽にちょっとした情報を確認するのには便利な方法です。 ただ、alert()を出せばJavaScriptの実行は止まってしまいますし、setTimeout()で駆動される関数内で連続してalertを出し続ければ収拾がつかなくなってしまうので、使う場面には注意しましょう。 |