3-4.デバックしてみる

デバックにはブラウザの開発者用ツールが使える

samplejpg

前節では15パズルゲームを動作させてみました。 サンプルページに掲載したゲームは正しく動作した筈ですが、これはサイト管理者がデバックを済ませた上で掲載していたからです。

通常は、書いたプログラムが何の問題も無く動作する事はマズありません。動作させるためにはデバックが必要になります。

本節では、JavaScriptのデバックに関連した注意点等を記しておきます。

まず、知っておくべきこと

プログラムを最初に実行した時に最初に発生する問題は、書き間違いによる文法エラーかもしれません。 このようなエラーが発生した場合、通常は、ブラウザは何の警告もなく、プログラムの実行を停止してしまいます。 このため、正しく動作していない事だけは判っても、何が問題なのかは全く判らない状況に追いやられます。

C++のようなコンパイラ言語を使ってプログラムを組む場合には、コンパイル作業中に文法上の問題は全てチェックされ、問題箇所の報告も行われるため、問題点の修正は容易です。 しかし、JavaScriptは基本的にはインタプリタ言語であるため、書き間違えによる文法エラーは、そのコードが実行されるまで顕在化しません。 その上、動作を停止する場合にも、通常は、ブラウザは問題がある箇所を報告してくれません。

JavaScriptを使ってプログラムを組むのはC++を使ってプログラムを組むよりも簡単、というような話を聞く事も多いかもしれませんが、デバックが必要になるような複雑なプログラムを組む場合には、状況は全く異なります。 デバック効率まで考慮すると、C++のようなコンパイラ言語を使ってプログラムを組んだ方が作業効率は上がる筈です。

ブラウザの開発者用ツールを使う

前述のように、JavaScriptを使ってプログラムを書き、デバックするのは大変な作業になりますが、最近では少し状況は改善されて来ています。 主要なブラウザでは開発者用ツールが使用できるようになり、問題が発生した場合には、その箇所と問題の内容を知る事が出来るようになってきています。 また、ブラウザによっては、プログラムの特定箇所にブレイクポイントを張ったり、変数の値を見たりすることも可能になっています。

ただし、ブラウザの開発者用ツールは普通にHTMLページを閲覧している状況では使用できません。 これらを使用できるようにするためには、ブラウザのオプション設定を変更したり、特別なコマンドを実行したりする必要があります。

このため、デバックを開始するに当たっては、まず最初に、使用しているブラウザの開発者用ツールを使えるようにしておくのが得策です。

2011年1月の時点では、各ブラウザで開発者用ツールを使うためには以下のような操作が必要になります。

IE9        F12キーを押す
Firefox    アドオン(Firebug)を追加
Safari     「設定」-「詳細」で「・・・開発メニューを表示」をチェック
Chrome     「ツール」-「デベロッパーツール」を実行
Opera      「表示」-「開発者用ツール」-「Opera Dragonfly」を実行

上記では、Firefoxのみアドオン追加が必要となっているため、Firefoxは開発には向かないと思う人もいるかもしれません。 しかし、Firefoxには「ツール」-「エラーコンソール」というコマンドがあり、エラーコンソールを表示させていると、文法上のエラー等が検出された場合にはそこに内容が表示されます。

複雑なプログラムのデバック時には、ブレイクポイントや変数内容の閲覧機能が便利になる事もありますが、多くの場合、Firefoxが標準で装備しているようなエラーコンソール機能があれば、デバックは十分に行えます。 より高度なデバック機能を装備した開発者用ツールは使いこなすための労力が必要になりますので、逆に作業効率を低下させる場合もあります。

注意すべきこと

ブラウザが提供している開発者用ツールを使うと文法上の間違いや例外の発生を報告してくれるためデバック作業はかなり楽になります。 しかし、それらのツールは文法的に問題の無いバグは検出してくれません。

JavaScriptでプログラムを組んでいてありがちなバグは、変数のスコープに関するものです。 JavaScriptではC++等とは違って変数は宣言しなくても使用できてしまいます。 このため、変数名を書き間違っていた場合、開発者用ツールではエラーは報告されないのに、プログラムが正しく動作しない状況が発生します。

また、ローカル変数にしたつもりが宣言を書き忘れたためにグローバル変数になり、別関数で値が書き換えられて動作に支障が出るようなケースもあり得ます。

このように、変数名やスコープの問題がある場合には、開発者用ツールもあまり役には立ちません。 また、前述のように、JavaScriptはインタプリタ言語であるため、コードが実際に実行されるまでは問題が顕在化しません。 このため、開発者用ツールで問題が指摘されない場合にも、未実行のコードに文法上の問題が無い事は保障されません。

開発者用ツールを使えばデバック効率はかなり向上します。しかし、まだ十分とは言えません。 このため、JavaScriptでプログラムを書く場合には、デバックが大変になる事を考慮した上で、より慎重な記述を心がけるのが肝要かもしれません。