JSDTとは

JSDT(JavaScript Debug Toolkit)はIE、Firefox、Safari、Chrome、OperaなどさまざまなWebブラウザに対応したJavaScriptデバッガだ。JavaScriptデバッガとしてはFirefoxアドオンであるFirebugなどが有名だが、既存のツールは特定のWebブラウザでしか利用できないものがほとんどだ。JSDTであれば1つのツールで、なおかつブラウザ側に特殊なアドオンをインストールしなくてもJavaScriptのデバッグを行うことができる。

表1 さまざまなJavaScriptデバッガ

JSDTの仕組み

実際にJSDTを試す前に、JSDTがどのように動作しているのかを説明しよう。

JSDTはHTTPプロキシサーバを内蔵しており、デバッグを行うWebブラウザはHTMLやJavaScriptなどのリソースをこのプロキシ経由して参照する。このとき、HTMLやJavaScriptにはプロキシよってJSDTでデバッグを行うために必要なJavaScriptが自動的に挿入される。挿入されたJavaScriptコードはAjaxによってデバッガ側に必要な情報を送信している。

図1 JSDTの仕組み

このような仕組みによってブラウザ側に特別なアドオンをインストールする必要なしに、さまざまなWebブラウザでのデバッグを可能としているのだ。

JSDTを使ってみよう

それでは実際にJSDTを使ってみよう。

JSDTのダウンロードページにはSwingによるスタンドアプリケーションとEclipseプラグインが提供されている。

まずは手軽に利用することができるSwing版を試してみる。jsdt-s0.5.zipをダウンロードして適当なディレクトリに展開し、binディレクトリのjsdt.bat(Linuxの場合はjsdt.sh)を実行すると以下のようなウィンドウが表示される。デバッグするHTMLファイルとWebブラウザの実行ファイルを選択して開始ボタンをクリックするとデバッグを行うことができる。

図2 Swing版のJSDT

図3 Swing版でデバッグしているところ

使い勝手は一般的なデバッガと同様だ。JavaScriptのソースコードがエディタで表示されるので、停止したい位置にブレークポイントを設置することができ、ステップイン、ステップオーバー、ステップアウトが可能だ。変数の値はvariablesタブで確認できるほか、expressionタブでは任意の式を登録しておき、その評価結果を参照することができる。

Eclipseプラグイン版も基本的な使い方は同様だ。ダウンロードページからjsdt-2.1.0.zipをダウンロードして適当な場所に展開したのち、更新マネージャから更新サイトとしてインストールすることができる。Eclipseプラグイン版ではデバッガとしての機能だけではなく、構文のチェック機能などを備えた簡易的なJavaScriptエディタも提供されており、JavaScriptエディタ上で任意の行をクリックすることでブレークポイントを設定することができる。

図4 Eclipseプラグイン版のインストール

Eclipseのワークスペース上でHTMLファイルを選択し、右クリック→「デバッグ」→「JavaScript Debug Tool」でデバッグを開始することができる。

図5 Eclipseプラグイン版のデバッグ設定

図6 Eclipseプラグイン版でデバッグしているところ

まとめ

JSDTはHTTPプロキシによってデバッグコードを埋め込むという手法を用いることでブラウザ側に特殊なアドオンなどを必要とせずにさまざあなWebブラウザでのJavaScriptデバッグを可能としている。また、スタンドアローン版とEclipseプラグイン版が提供されており、開発スタイルにあわせて選択することができる。

ただし、筆者の試したところではJavaScriptコード中に日本語が含まれているとデバッグ中のスクリプトの応答がなくなるという問題があった。そのためすぐに実戦投入することは難しいかもしれないが、その点を差し引いてもJSDTは画期的なJavaScriptデバッガといえる。今後の改善に期待したい。