Firefox、Mozilla Suite、Netscape 7.x など、多くの Mozilla ベースの製品を使用する Web 開発者は新たに強力なツールが利用できます。しばらく前から「Venkman」と呼ばれる JavaScript デバッガが Mozilla ブラウザ、Web コミュニティ、スクリプト開発者に利用されています。この記事では JavaScript デバッガを Web アプリケーションや Web ページスクリプティングで使用するための概要を説明すると共に、簡単な実践例を用意しています。この導入は Venkman と JavaScript デバッグについての一連の記事の第一弾です。例えあなたが既に Venkman を使用していても、ここに書かれた機能、処理、手法を知ることで、Web 開発やデバッグに一層の自信が持てるようになるはずです。
Venkman は画面表示とコンソール双方で操作できるデバッガです。ブレークポイント管理、コールスタック監視、変数/オブジェクト監視といった機能は画面上からとコンソールコマンドから
どちらからでも
利用でき、慣れている方を使って作業できます。対話コンソールでは任意の JavaScript コードを実行させることもできます。 Venkman のキーボードショートカットは既存のビジュアルデバッグ環境に合わせており、gdb のユーザであれば Venkman の break, step, next, finish, frame および where コマンドが自然と使えるようになっています。
この JavaScript デバッガは Windows 環境でのビジュアル相互開発環境や他の大規模 Web 開発ツールよりも優れており、Mac OS や Unix を含めて他のプラットフォームにおいては、ビジュアルデバッグ環境でこれほどまでに柔軟、包括的で強力なものは他にありません。
訳注：この和訳記事は Mozilla に訳者 dynamis が作成している日本語版 Venkman をインストールした環境を使って書かれており、文中の訳語や和訳と同時に撮り直したスクリーンショットなどはすべてそれに応じたものとなっております。従って、内容的な影響は一切ないものの、細部では原文と異なる所がありますのでご了承ください。
最新の日本語版 Venkman やその他 Venkman に関する日本語情報については Venkman Localization をご覧ください。
JavaScript デバッガは Mozilla 1.x では自動的にプリインストールされますが、Firefox や他の Gecko ベースの製品 (Thunderbird、Netscape 7.x など) では追加インストールする必要があります。とはいっても、XPInstall テクノロジにより、追加のアプリケーションモジュールは単にリンクをクリックするだけで Firefox にインストールできます。
まだ Venkman を用意できていないあるいはアップグレードする場合は Firefox Add-ons で簡単に最新版を入手できます。インストールは 2 段階になります。まず、デバッガアプリケーションを搭載したいブラウザで Firefox Add-ons を表示し、最新版の「インストール」リンクをクリックします。ダウンロードが完了後、ブラウザを再起動してください (一部の Windows ユーザはコンピュータの再起動も必要となる場合があります)。これでブラウザのツールメニューの新しい動的生成項目からデバッガを呼び出すことができます。また、デバッガオプションをつけてブラウザを再起動することもできます。
訳注: Firefox Add-ons で配布されている XPI ファイルは英語版です。英語ロケールと日本語ロケールの両対応版は別途 訳者が用意しております のでご利用ください。
Venkman のバージョンを確かめるには、対話セッションビューで /version と入力してください。改良点や最新版に関する詳細は Venkman 開発ページ をご覧ください。
デバッガの起動方法には 2 通りあります。
-venkman コマンドラインオプションを付けてブラウザを起動することができ、その場合、アプリケーションフロントエンドでななく Venkman が最初に起動されます。(Venkman は起動時に「起動回数記録 (ローカル: X、グローバル: YYY)」といった利用状況を表示することに注目してください。このデータはアプリケーション内蔵のカウンタによるものであり、このカウンタとに関してより詳しくは Venkman FAQ の 項目 2.2 を参照してください。)
Venkman の初回起動時 【訳注: スクリーンショットでは 64 回目ですが】 には基本的なビューが上のスクリーンショットのように配置されていますが、下の ビューのカスタマイズ 節に書いている通りレイアウトや他のビューの表示を好きなように変更することができます。JavaScript エンジンに既に読み込まれているスクリプトが「読み込まれているスクリプトビュー」に表示されます (Venkman でスクリプトがどのように読み込まれアクセスされるかについてより詳しくは デバッガへのスクリプト読み込み を参照してください)。
メニューバー、ツールバーおよびすべてのビューは折りたたんだり隠したりでき、デバッグ環境を自由に変更できます。ソースコードビュー はスクリプトを選択するまでは空であり、対話セッションウィンドウ は簡単なスタートアップ情報を表示して起動します。
各ビューには図 2 にあるように「ラベル」、個別の分離ウィンドウに表示する「分離ボタン」、再度表示しようと思うまで消しておく「閉じるボタン」があります。以下の節ではこれらのビューや全体のインターフェイスの中でのそれらの利用について説明します。
ツールバーはデバッガの最上部に表示されています。ツールバーには停止、継続、ステップオーバー、ステップイン、ステップアウト、プロファイル、整形表示 コマンドのアイコンが並んでいます。これらのコマンドは停止とプロファイルボタン以外は文字通りで誤解することは無いと思います。停止ボタンは JavaScript の次の行が実行された時に デバッガを停止させるもので、プロファイルボタンはスクリプトの実行時間を記録するのに使用されます。このボタンをクリックしてプロファイルを有効にすると緑のチェックマークがボタンの横に表示され、全関数のプロファイルデータが収集されるようになり、プロファイルメニューの [プロファイルデータを保存...] でそれを保存できます。
図 4
実行待ち状態の停止ボタン
現在 JavaScript が実行されている時に停止ボタンをクリックすると JavaScript が即座に停止することに注意してください。JavaScript を動かさずに停止ボタンをクリックすると、図 4 のように「...」が表示されます。これはまだ停止するところがないが、次の命令でデバッガが停止することを示しています。
この即時停止モードは JavaScript デバッグの一般的な状況を想定して用意されました。DHTML で動的に要素が変更されるページなど、実行中のスクリプトを検査、デバッグするといった状況です。エラーや例外で停止するコマンドも、デバッグメニューおよびコンソールから使用できます。
停止ボタンの右の継続ボタンを押すと停止モードから抜け出し、各文の実行毎に一時停止することなくスクリプトが通常通り実行されるようになります。
整形表示ボタンは整形表示モードを切り替えます。整形表示モードにすると、ソースビューには選択した関数をデコンパイルしたソーステキストを表示します。これは Function プロトタイプの toSource メソッドで得られるものと同じです。デバッグ中のソースフォーマットが汚い場合でも整形表示機能を使えば、改行とホワイトスペースを適切なところに挿入されて読みやすくなります。
整形表示が有効になっている時にはツールバーのボタン上に緑のチェックマークが表示され、メニューアイテムもチェックされます。
「読み込まれているスクリプトビュー」は初期状態ではウィンドウの左最上部にあります。ブラウザにファイルが読み込まれるとこのビューに追加され、解放されると取り除かれます。ファイルは種類毎に分けられアルファベット順で並べられます。ファイル名はファイル拡張子を示す色つき文字アイコンの後に表示されます。アイコンとファイルタイプの対応は図 6 をご覧ください。これを書いている現時点ではファイル名の順序やグループ分けの変更はできません。
| アイコン | ファイルタイプ |
|---|---|
| .js | |
| .html, .htm | |
| .xul | |
| .xml | |
| その他すべて | |
| JavaScript 関数 |
図 6
スクリプトビューのアイコン
「特別な」関数名 __toplevel__ は実際の関数の一部ではないスクリプトを表すものとして表示されます。ファイル名をクリックするとファイルの最初が表示され、関数名をクリックすると関数の開始部分が表示されます。
このビューの「行番号」列は各関数が始まる行番号を表します。このビューの列選択ボタン(右上にある 部分)により「行数」列も表示できます。この列は個々の関数の長さを表します。行番号および行数列は共にファイル名の行では何も表示されません。
関数がその内部にブレークポイントを持っている場合には、小さな赤い点が関数アイコンおよび親のファイルアイコンの上に表示されます。
「ローカル変数ビュー」は初期状態ではウィンドウの左側中央にあります。デバッガが停止するとローカル変数ビューは現在の関数に於ける値を表示します。scope オブジェクトにはすべての引数とローカル変数が納められており、this オブジェクトは this キーワードの値となります。
| e | 列挙可能プロパティ |
| r | 変更不可プロパティ |
| p | 永続 (delete 不可) |
| A | 他のプロパティの別名 |
| a | 関数の引数 |
| v | var 宣言された変数 |
図 8. プロパティフラグ
scope および this オブジェクトのプロパティは共に、データ型毎に分けられアルファベット順に並べられます。アイコンとデータ型の対応は図 9 をご覧ください。
Object 型のプロパティはその値として中括弧で囲んだコンストラクタ関数名を表示しています。そのプロパティのコンテクストメニューから [コンストラクタを検索] を選択すると、コンストラクタのソースコードを表示できます。[クリエータを検索] コマンドでは、オブジェクトがインスタンスとして生成された場所を知ることができます。初期状態では表示領域を節約するために function 型のプロパティは表示されませんが、関数も表示したければビューのコンテクストメニューで [関数を含める] をチェックしてください。この設定変更は参照したいオブジェクトのツリーを一度閉じてから再度開いた時に反映されます。
太字の灰色フォントで表示されているプロパティはプロトタイプチェーンによって定義されているもので、現に調べているオブジェクト自体のものではなりません。オブジェクトのプロトタイプおよび親のチェーンを調べたければ、ビューのコンテクストメニューで [ECMA プロパティを含める] をチェックしてください。太字の赤いフォントで表示されているプロパティは、Venkman がその値を読み取ろうとした際に例外が発生したものです。例外オブジェクトがそのプロパティの値として表示されます。
| アイコン | データ型 | アイコン | テータ型 |
|---|---|---|---|
| 無効 (未定義) | 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 を追加するので、通常はデバッグしようと考えているスクリプトを含むサイトを単に「ブラウズするだけ」で十分なのです。
この節では基本的なコマンドとデバッガの操作に慣れてもらうために、簡単なセッションのデバッグ例を示します。
Venkman を起動
注: 一時期デバッガはデバッグしたいスクリプトより 前に 起動しておく必要がありましたが、現在では JavaScript コンパイラがブラウザによってアクセスするあらゆるスクリプトをデバッガからアクセスできるようにしているので、この制限はなくなりました。Venkman のスクリプト検出と読み込みについて更に詳しくは、デバッガへのスクリプト読み込み を参照してください。
ブラウザウィンドウを起動して http://wp.netscape.com/fishcam/dhtmltank.html を開いてください。
注: Mozilla 1.x と Netscape 7.x では、デバッガはアプリケーションスイートの他のコンポーネント同様に Window メニューを含んでいます。このメニューからブラウザ、メール、その他のアプリケーションにアクセスできます。
デバッガで /break Animator-0.03 121 と入力してください。
コンソールコマンド /break はブレークポイントの設定に使用されます。第 1 パラメータはブレークしたい JavaScript を含んでいるファイルの名前で、第 2 パラメータは行番号です。完全なファイル名を指定する必要はありません。この例ではブレークポイントをブラウザが DHTML fishcam ウィンドウをスタートした時に呼び出される pause 関数に設定しています。
コマンドを使用するのではなく、Animator-0.03.js を読み込まれているスクリプトビューから選択し、119 行目の pause 関数を探し出して左の余白をクリックすることでブレークポイントを設定することもできます。このようにしてブレークポイントを設定するのはコンソールで /break コマンドを使用するのと同じことです。どちらにせよ、赤いブレークポイントアイコンがソースコードビューに現れます。
デバッガで /break と入力してください。
/break コマンドに引数を与えなければすべてのブレークポイントが対話セッションビューに一覧表示されます。
fishcam ページで pause リンクを押してください。
ステップ 3 で設定したばかりのブレークポイントに出くわします。
対話セッションのラベルに「コンテクスト: Animator-0.03.js, スコープ: [pause]」と表示されます。また、対話セッションにファイル名、行番号、停止箇所のコード断片と共に赤色で「ブレークポイントで停止しました」と出力されます。
対話セッションの入力フィールドに this.fPaused と入力してください。
Venkman が式を評価し [boolean] false を返します。関数のデバッグが終了するまでステップインを押して処理を追いかけてください。デバッグから抜けると、お魚さんが止まってしまっています。
JavaScript の 1 行を実行して停止するステップインに加えて、次行の関数呼び出しをまとめて実行してその呼び出しから帰ったところでコントロールをデバッガに戻すステップオーバーも使用できます。ステップアウトは現在の関数呼び出しから抜け出るまで実行します。
7. fishcam ページの「pause」というリンクを再度クリックしてデモを再開させてください。
クリックすると先程とは別の start() のコードによって DHTML がスタートし、お魚さんが再び泳ぎ始めます。
見ての通り、これは JavaScript デバッガの機能性とスクリプトの複雑性の、とてもささやかな導入に過ぎません。ですが、まだデバッガを使ったことがなければここに書かれた例によりデバッガの大まかな感覚をつかみ、これ以降続く記事中のより面白くて実用的な事例の下支えとなります。
Venkman について知る最良の方法は、もちろん、いじり回すことです。自分の好きなように設定し、スクリプトを読み込んでブレークポイントを設定し、対話セッションビューで式を評価し、スクリプト実行時に変更される変数の値を監視し、プロファイルデータを収集するのです。