Venkman Introduction

図 4
実行待ち状態の停止ボタン

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

図 6
スクリプトビューのアイコン

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

図 9 型アイコン

このビューの列選択ボタン (右上にある 部分) により「型」および「フラグ」列も表示できます。型列にはオブジェクトの型をテキストで表示します。フラグには当該オブジェクトで有効な 1 つ以上のフラグを並べます。フラグは図 8 に一覧しています。

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

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

コールスタックビュー

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

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

現在のコールスタックをクリップボードにコピーしたければコンテクストメニューから [対話セッションにスタックをダンプ] を選ぶか、対話セッションで /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 エンジンは Web ページで読み込まれたスクリプトおよび様々な Mozilla のユーザインターフェイス自体で読み込まれたスクリプトすべてを追跡してコンパイルします。エンジンは認識しているスクリプトを Venkman に伝え、これらのスクリプトはデバッガの「読み込まれているスクリプト」ビューに読み込まれます。

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

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

デバッグの基本

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

1. Venkman を起動

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

2. ブラウザウィンドウを起動して https://wp.netscape.com/fishcam/dhtmltank.html を開いてください。

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

3. デバッガで /break Animator-0.03 121 と入力してください。

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

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

5. デバッガで /break と入力してください。

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

6. fishcam ページで pause リンクを押してください。

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

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

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

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

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

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

8. 7. fishcam ページの「pause」というリンクを再度クリックしてデモを再開させてください。

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

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

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

情報源

• Venkman のブレークポイント使用法: Venkman に関する次の記事
• MDC の Venkman ホームページ