この和訳記事は Mozilla に訳者 dynamis が作成している日本語版 Venkman をインストールした環境を使って書かれており、文中の訳語や和訳と同時に撮り直したスクリーンショットなどは全てそれに応じたものとなっております。従って、内容的な影響は一切ないものの、細部では原文と異なる所がありますのでご了承ください。
最新の日本語版 Venkman やその他 Venkman に関する日本語情報については Venkman Localization をご覧ください。

Netscape 7.x を使用する Web開発者は新たに強力なツールが利用できます。しばらく前から Venkman と呼ばれる JavaScript デバッガが Mozilla ブラウザ、ウェブコミュニティ、スクリプト開発者達に利用されています。この記事では JavaScript デバッガをウェブアプリケーションやウェブページスクリプティングで使用する為の概要を説明すると共に、簡単な実践例を用意しています。この導入は Venkman と JavaScript デバッグについて DevEdge が用意する一連の記事の第一弾です。例えあなたが既に Venkman を使用していても、ここに書かれた機能、処理、手法を知ることで、ウェブ開発やデバッグに一層の自信が持てるようになるはずです。

Venkamn は画面表示とコンソール双方で操作できるデバッガです。ブレークポイント管理、コールスタック監視、変数/オブジェクト監視といった機能は画面上からとコンソールコマンドからどちらからでも利用でき、慣れている方を使って作業できます。対話コンソールでは任意の JavaScript コードを実行させることもできます。 Venkman のキーボードショートカットは既存のビジュアルデバッグ環境に合わせており、gdb のユーザであれば Venkman の break, step, next, finish, frame 及び where コマンドが自然と使えるようになっています。

この JavaScript デバッガは Windows 環境でのビジュアル相互開発環境や他の大規模ウェブ開発ツールよりも優れており、Mac OS や Unix を含めて他のプラットフォームにおいては、ビジュアルデバッグ環境でこれほどまでに柔軟、包括的で強力なものは他にありません。

デバッガの起動

JavaScript デバッガは Mozilla1.0 では自動的にプリインストールされますが、Netscape 7.x や他の Geckoベースブラウザでは追加インストールする必要があります。とはいっても、XPInstall テクノロジにより追加のブラウザモジュールやアプリケーションは単にリンクをクリックするだけで Netscape 7.x にインストールできます。

まだ Venkman を用意できていない或いはアップグレードする場合はVenkman 開発ページで簡単に最新版を入手できます。インストールは 2段階になります。まず、デバッガアプリケーションを搭載したいブラウザで Venkman 開発ページを表示し、最新版の "install" リンクをクリックします。ダウンロードが完了後、ブラウザを再起動して下さい(一部の Windows ユーザはコンピュータの再起動も必要となる場合があります)。これでブラウザのツールメニューの新しい動的生成項目からデバッガを呼び出すことができます。また、デバッガオプションをつけてブラウザを再起動することもできます。

Venmknan 開発ページで配布されている XPI ファイルは英語ロケール(en-US)専用です。各言語毎に対応バージョンのロケールファイルが必要であるため、日本語ロケール(ja-JP)などではロケール設定を英語に戻さなければ正しく動作しません。英語ロケールと日本語ロケールの両対応版は別途訳者が用意しておりますのでご利用ください。

注意: これが書かれている時点で最新バージョンの Venkman は 0.9.37 です。Venkman のバージョンを確かめるには、対話セッションビューで /version と入力して下さい。0.9.37 以前のものが起動されているのであればアップグレードしてみましょう。[訳註] 和訳最終更新時の最新版は 0.9.51 です。

(Venkman は起動時に利用状況を表示することに注目して下さい: "起動回数記録 (ローカル: X、グローバル: YYY)" このデータはアプリケーション内蔵のカウンタによるものであり、このカウンタとに関してより詳しくは Venkman FAQ の項目 2.2 を参照して下さい。)

Venkman の初回起動時(スクリーンショットでは64回目ですが…)には基本的なビューが上のスクリーンショットのように配置されていますが、下のビューのカスタマイズ節に書いている通りレイアウトや他のビューの表示を好きなように変更することができます。JavaScript エンジンに既に読み込まれているスクリプトが読み込まれているスクリプトビューに表示されます(Venkmanでスクリプトがどのように読み込まれアクセスされるかについてより詳しくは "デバッガへのスクリプト読み込み" を参照して下さい)。

メニューバー、ツールバー及び全てのビューは折りたたんだり隠したりでき、デバッグ環境を自由に変更できます。ソースコードビューはスクリプトを選択するまでは空であり、対話セッションウィンドウは簡単なスタートアップ情報を表示して起動します。

図 2. ビューコントロール

各ビューには図 2 にあるように ラベル、個別の分離ウィンドウに表示する 分離ボタン、再度表示しようと思うまで消しておく 閉じるボタン があります。

以下の節ではこれらのビューや全体のインターフェイスの中でのそれらの利用について説明します。

ツールバー

ツールバーはデバッガの最上部に表示されています。ツールバーには停止、継続、ステップオーバー、ステップイン、ステップアウト、プロファイル、整形表示コマンドのアイコンが並んでいます。これらのコマンドは停止とプロファイルボタン以外は文字通りで誤解することは無いと思います。停止ボタンは JavaScript の次の行が実行された時に デバッガを停止させるもので、プロファイルボタンはスクリプトの実行時間を記録するのに使用されます。このボタンをクリックしてプロファイルを有効にすると緑のチェックマークがボタンの横に表示され、全関数のプロファイルデータが収集されるようになり、プロファイルメニューの プロファイルデータを保存... でそれを保存できます。

現在 JavaScript が実行されている時に停止ボタンをクリックすると JavaScript が即座に停止することに注意して下さい。JavaScript を動かさずに停止ボタンをクリックすると下図のように "..." が表示されます。これはまだ停止するところがないが、次の命令でデバッガが停止することを示しています。

この即時停止モードは JavaScript デバッグの一般的な状況を想定して用意されました。 DHTML で動的に要素が変更されるページなど、実行中のスクリプトを検査、デバッグするといった状況です。エラーや例外で停止するコマンドも、デバッグメニュー及びコンソールから使用できます。

停止ボタンの右の継続ボタンを押すと停止モードから抜け出し、各文の実行毎に一時停止することなくスクリプトが通常通り実行されるようになります

整形表示ボタンは整形表示モードを切り替えます。整形表示モードにすると、ソースビューには選択した関数をデコンパイルしたソーステキストを表示します。これは Function プロトタイプの toSource メソッドで得られるものとと同じです。デバッグ中のソースフォーマットが汚い場合でも整形表示機能を使えば、改行とホワイトスペースを適切なところに挿入されて読みやすくなります。

整形表示が有効になっている時にはツールバーのボタン上に緑のチェックマークが表示され、メニューアイテムもチェックされます。

読み込まれているスクリプトビュー

読み込まれているスクリプトビュー は初期状態ではウィンドウの左最上部にあります。ブラウザにファイルが読み込まれるとこのビューに追加され、解放されると取り除かれます。ファイルは種類毎に分けられアルファベット順で並べられます。ファイル名はファイル拡張子を示す色つき文字アイコンの後に表示されます。アイコンとファイルタイプの対応は図 6をご覧下さい。これを書いている現時点ではファイル名の順序やグループ分けの変更はできません。

"特別な"関数名 __toplevel__ は実際の関数の一部ではないスクリプトを表すものとして表示されます。ファイル名をクリックするとファイルの最初が表示され、関数名をクリックすると関数の開始部分が表示されます。

アイコン	ファイルタイプ
	.js
	.html, .htm
	.xul
	.xml
	その他全て
	JavaScript 関数

このビューの 行番号 列は各関数が始まる行番号を表します。このビューの列選択ボタン(右上にある

部分)により行数列も表示できます。この列は個々の関数の長さを表します。行番号および行数列は共にファイル名の行では何も表示されません。

関数がその内部にブレークポイントを持っている場合には、小さな赤い点が関数アイコン及び親のファイルアイコンの上に表示されます。

ローカル変数ビュー

ローカル変数ビュー は初期状態ではウィンドウの左側中央にあります。デバッガが停止するとローカル変数ビューは現在の関数に於ける値を表示します。scope オブジェクトには全ての引数とローカル変数が納められており、this オブジェクトは this キーワードの値となります。

e	列挙可能プロパティ
r	変更不可プロパティ
p	永続 (`delete` 不可)
A	他のプロパティの別名
a	関数の引数
v	`var` 宣言された変数

図 8.
プロパティフラグ

scope 及び this オブジェクトのプロパティは共に、データ型毎に分けられアルファベット順に並べられます。アイコンとデータ型の対応は図 9をご覧下さい。

Object 型のプロパティはその値として中括弧で囲んだコンストラクタ関数名を表示しています。そのプロパティのコンテクストメニューから "コンストラクタを検索" を選択すると、コンストラクタのソースコードを表示できます。"クリエータを検索" コマンドでは、オブジェクトがインスタンスとして生成された場所を知ることができます。初期状態では表示領域を節約する為に function 型のプロパティは表示されませんが、関数も表示したければビューのコンテクストメニューで "関数を含める" をチェックして下さい。この設定変更は参照したいオブジェクトのツリーを一度閉じてから再度開いた時に反映されます。

太字の灰色フォントで表示されているプロパティはプロトタイプチェーンによって定義されているもので、現に調べているオブジェクト自体のものではなりません。オブジェクトのプロトタイプ及び親のチェーンを調べたければ、ビューのコンテクストメニューで "ECMA プロパティを含める" をチェックして下さい。太字の赤いフォントで表示されているプロパティは、Venkman がその値を読み取ろうとした際に例外が発生したものです。例外オブジェクトがそのプロパティの値として表示されます。

このビューの列選択ボタン(右上にある

部分)により型及び フラグ列も表示できます。型列にはオブジェクトの型をテキストで表示します。フラグには当該オブジェクトで有効な一つ以上のフラグを並べます。フラグは図 8 に一覧しています。

対話セッションビューによりローカル変数ビューに表示されている項目が変更された場合、その変更は即座にローカル変数ビューに反映されます。

これを書いている時点ではローカル変数ビューの初期ソート順やグループ分けは調整できません。

コールスタックビュー

アイコン	データ型	アイコン	テータ型
	無効(未定義)		Null値
	真偽値		文字列値
	整数値		倍精度数値
	オブジェクト値		関数値

コールスタックビュー は初期状態ではウィンドウの左下部に表示されます。デバッガが停止するとコールスタックビューには動作中の関数一覧が表示されます。コールスタックビューで一番上の関数がデバッガが停止した関数であり、以降の関数はその呼び出し元、呼び出し元の呼び出し元… です。これらの項目はスタックフレームと呼ばれるものです。

スタックフレーム上でダブルクリックすると"現在の"フレームが変更されます。これにより、ソースコードビューにはその関数のソースが表示され、ローカル変数ビューには選択されたスタックフレームに置かれた変数が表示され、対話セッションビューで評価されるスクリプトは当該フレームに関連づけられます。

現在のコールスタックをクリップボードにコピーしたければコンテクストメニューから "対話セッションにスタックをダンプ" を選ぶか、対話セッションで /where と入力して下さい。こうすることでダンプしたテキストを対話セッションからコピーできます。

以降特定のスタックで Venkman を停止させたくないのであれば、当該スタックフレームのコンテクストメニューで "デバッグしない" をチェックして下さい。

ソースコードビュー

ソースコードビューは表示のみのファイルビューアです。スクリプトビューで適当なファイルや関数を選択することでファイルや特定の関数の中身を表示することができます。

スクリプト実行がデバッガによって中断されると、ファイルの中断された行がソースコードビューに自動的に表示されます。当該行は見つけやすいように黄色で強調表示されます。

このビューの左の余白をクリックすると、その行にブレークポイントが設定されます。ブレークポイントがちゃんと設定されれば赤い背景の文字 "B" を余白に表示し、読み込まれているスクリプトビュー及び対話セッションビューに反映されます。ブレークポイントはその余白("B"の上)を再度クリックすることで削除することができます。ブレークポイントは空行やコメント行など実行可能なコードを含まない行には設定することができません。これらの行では対話セッションビューにブレークポイントが設定できないことを説明するエラーメッセージが表示されます。

ブレークポイントは対話セッションビューからも break や fbreak コマンドにより設定及び削除できます。 break コマンドではファイルパターンと行番号を指定します。要求された行番号が実行可能行であるファイルパターンにマッチする読み込まれているファイル全てにブレークポイントが設定されます。ファイルパターン或いは行番号にマッチするファイルがなければ、エラーメッセージがコンソールに出力され、コマンドは失敗します。 fbreak コマンドはパターンや行番号にファイルがマッチしなかった場合に "予定ブレークポイント" が記録されることを除いて同じものです。パターン及び行番号にマッチするファイルが次に読み込まれた時、ブレークポイントが設定されます。このように動作するため fbreak を使えば、まだ読み込まれていないファイルの読み込み時点で即座にブレークポイントが動作するように設定することができます。

対話セッションビュー

Venkman 最後の基本ビューこそ、対話セッションビューです。このビューはコマンドラインによってデバッガと対話することができます。

コマンドはテキストボックスに入力し、応答が出力の末尾に追記されます。利用可能な全コマンドを一覧表示するには入力欄(テキストボックス)に /commands と入力して下さい。個別のコマンドについてさらなる情報を得るには /help を使用してください。例えば、next コマンドの使用法を知るには /help next と入力してください。

入力欄ではコマンド履歴やコマンド名のタブ補完をサポートしています。コマンド履歴は最後に入力された 20コマンドを記憶します。上および下矢印キーによって以前のコマンドを再表示させることができます。タブ補完により、コマンドの初めの一部を入力してタブキーを 2回押すことで、適合するコマンドを確認することができます。マッチするコマンドが1つだけであれば、1度目のタブで自動補完されます。

ビューのカスタマイズ

Venkman ではアプリケーション中のビューの配置や表示をほぼ完全に制御できます。デバッガは、ドラッグアンドドロップ、サイズ変更、利用ビューの切り替え、更にはデバッガの新しいビューやモジュールの生成を好みに応じて行うことができるフレームワークとして構築されています。最後のものは高度な内容であり、今後の記事で扱われるものですが。

Venkman からビューを取り除くには、単にビューの右上の閉じるボタンをクリックしてください。ビューが再び必要になったら、例えば読み込まれたスクリプトビューからソースファイルを開いてソースを表示したくなった時、ビューは最後に位置していた場所に再表示されます。明示的にビューを再表示するには、デバッガの 表示->表示/非表示 メニューから選択してください。ビューを個別の分離したウィンドウとして表示することもできます。ビューを分離するには、ビューの左上の分離ボタンをクリックしてください。

表示メニューの 表示/非表示 サブメニューから全ての基本ビューにアクセスできます。個々に表示されるリストは Venkman の基本ビュー全てを表します。どのビューが表示され UI の何処にあるのかを変更するのに応じて設定が保存され、セッションを通して維持されます。

デバッガへのスクリプト読み込み

Mozilla スイートのスタートアップ時に Venkman を最初に起動しようとブラウザコンポーネントを最初に起動しようと、JavaScript エンジンはウェブページで読み込まれたスクリプト及び様々な Mozilla のユーザインターフェイス自体で読み込まれたスクリプト全てを追跡してコンパイルします。エンジンは認識しているスクリプトを Venkman に伝え、これらのスクリプトはデバッガの "読み込まれているスクリプト" ビューに読み込まれます。

新たにスクリプトを読み込みたければ、例えばトラブルシュートしようとしているウェブページから読み込みたければ、単にウェブページを 通常のブラウザウィンドウに 開くだけで読み込むことができます。この時コンパイラは JavaScript のソースを取得し、新しい項目を読み込まれているスクリプトウィンドウに追加します。

Venkman から ファイル->ファイルを開く を使用すればデバッガでローカルファイルを開き、ファイル->Web から開く を使用すれば要求ページの HTML コンテント全てを開いて表示します。とはいえ恐らくどちらも必要ないでしょう。ブラウザがウェブページを開くと JavaScript エンジンは自動的にデバッガの読み込まれているスクリプトリストに JavaScript を追加するので、通常はデバッグしようと考えているスクリプトを含むサイトを単に ブラウズするだけ で十分なのです。

デバッグの基本

この節では基本的なコマンドとデバッガの操作に慣れてもらう為に、簡単なセッションのデバッグ例を示します。

注: 一時期デバッガはデバッグしたいスクリプトより前に起動しておく必要がありましたが、現在では JavaScript コンパイラがブラウザによってアクセスするあらゆるスクリプトをデバッガからアクセスできるようにしているので、この制限はなくなりました。Venkman のスクリプト検出と読み込みについて更に詳しくは、デバッガへのスクリプト読み込みを参照してください。

注: デバッガはアプリケーションスイートの他のコンポーネント同様に Window メニューを含んでいます。このメニューからブラウザ、メール、その他のアプリケーションにアクセスできます。

コンソールコマンド "/break" はブレークポイントの設定に使用されます。第1パラメータはブレークしたい JavaScript を含んでいるファイルの名前で、第2パラメータは行番号です。完全なファイル名を指定する必要はありません。この例ではブレークポイントをブラウザが DHTML fishcam ウィンドウをスタートした時に呼び出される pause 関数に設定しています。

コマンドを使用するのではなく、Animator-0.03.js を読み込まれているスクリプトビューから選択し、119行目の pause 関数を探し出して左の余白をクリックすることでブレークポイントを設定することもできます。このようにしてブレークポイントを設定するのはコンソールで /break コマンドを使用するのと同じことです。どちらにせよ、赤いブレークポイントアイコンがソースコードビューに現れます。

図 13. (ステップ 5)
ブレークポイントで停止しています。

/break コマンドに引数を与えなければ全てのブレークポイントが対話セッションビューに一覧表示されます。

ステップ 3 で設定したばかりのブレークポイントに出くわします。

対話セッションのラベルに "[コンテクスト: Animator-0.03.js, スコープ: [pause]]" と表示されます。また、対話セッションにファイル名、行番号、停止箇所のコード断片と共に赤色で "ブレークポイントで停止しました。" と出力されます。

6. 対話セッションの入力フィールドに "this.fPaused" と入力してください。

Venkman が式を評価し [boolena] false を返します。関数のデバッグが終了するまでステップインを押して処理を追いかけてください。デバッグから抜けると、お魚さんが止まってしまっています。

JavaScript の1行を実行して停止するステップインに加えて、次行の関数呼び出しを纏めて実行してその呼び出しから帰ったところでコントロールをデバッガに戻すステップオーバーも使用できます。ステップアウトは現在の関数呼び出しから抜け出るまで実行します。

7. fishcam ページの pause リンクを再度クリックしてデモを再開させて下さい。

クリックすると先程とは別の start() のコードによって DHTML がスタートし、お魚さんが再び泳ぎ始めます。

見ての通り、これは JavaScript デバッガの機能性とスクリプトの複雑性の、とてもささやかな導入に過ぎません。ですが、まだデバッガを使ったことがなければここに書かれた例によりデバッガの大まかな感覚をつかみ、これ以降続く記事中のより面白くて実用的な事例の下支えとなります。

Venkman について知る最良の方法は、勿論、いじり回すことです。自分の好きなように設定し、スクリプトを読み込んでブレークポイントを設定し、対話セッションビューで式を評価し、スクリプト実行時に変更される変数の値を監視し、プロファイルデータを収集するのです。

情報源

Venkman についての更なる情報は以下のリンク先をご覧下さい: