Venkman のブレークポイント使用法 Article この記事には JavaScript におけるブレークポイントの説明と Venkman JavaScript デバッガでブレークポイントを設定および確認する方法が書かれています。 JavaScript, Venkman, デバッグ, ウェブアプリケーション開発 Robert Ginda Netscape Communications Ian Oeschger Netscape Communications dynamis translation Dyna Infomation Library http://skillup.jp/venkman/

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

この記事は Venkman - Netscape 7.x の新しい JavaScript デバッガ から始まる一連の Venkman 記事の続きです。

いずれの言語であれ、ブレークポイント の設定はデバッグの基本作業として挙げられます。ブレークポイントとは、コード中で実行が停止されるところのことです。 Venkman のようなデバッグツールによってブレークポイントを設定すると、変数、オブジェクト或いは他の実効状態を確認する為に一時停止できるようになるのです。

この記事には JavaScript におけるブレークポイントの説明と Venkman でブレークポイントを設定および確認する方法が書かれています。この記事は 2つの主節に分けて書かれています:

基本的ブレークポイント

停止ボタンや デバッガ キーワードも JavaScript デバッガの便利な機能ですが、コードの奥深くまでデバッグするのであれば 特に自身が記述しトラブルシューティングの責任もあるコードであれば ブレークポイントが必要となります。

ブレークポイントの種類

Venkman には二種類のブレークポイントがあります。まず一つ目の、最も一般的なものは、"実(hard)" ブレークポイントというものです。実ブレークポイントはコンパイル済関数の擬似コードに含まれる、実際のトラップ命令のことを表しています。実ブレークポイントは現在ブラウザに "存続中" である関数の中にしか存在できません。実ブレークポイントはプログラムの実行を実際に停止させるもののことです。

二つ目のブレークポイントである、"予定(future)" ブレークポイントというのは、可能な限り速やかに実ブレークポイントを設定するという Venkman による約束を表します。予定ブレークポイントは、まだコンパイルされていないスクリプト中で停止したい時に使用されます。予定ブレークポイントの最も一般的な用法は、"トップレベル" スクリプト(全ての関数の外側で実行されるスクリプト) 或いはページの onLoad イベント中で実行されるスクリプト中で停止するものです。予定ブレークポイントの URL にマッチするスクリプトが読み込まれ、指定行に実行可能なコードが含まれると、Venkman は自動的に実ブレークポイントを設定します。([訳註] 原文では予定ブレークポイントを設定すると書かれていますが、誤りでしょう)

この違いを除き、Venkman のブレークポイントは他の多くのデバッガでのブレークポイントと同様に機能します。ソースコードビューの左余白部に表示される負号はその行が実行可能なコードを含んでおり、実ブレークポイントを設定できるところであることを示しています。


図 1. Venkman ソースコードビューでの実行可能コード行

ブレークポイントの設定

ソースコードビューにあるこれらの負号をクリックするとその行にブレークポイントを設定できます。 Venkman は当該行が実行される前に停止します。ブレークポイントが設定されると、余白部は図 2 にあるように "B" という文字に変わります。このブレークポイントの設定後にこのコードを再度実行すると Venkman は 112 行目で停止します。


図 2. ブレークポイントの設定

Venkman は一つ以上のブレークポイントが設定されていることを、設定されているファイルの横に赤い点を表示させることで、読み込まれているスクリプトビューでも示します。コードが停止される関数の開始行番号も横に表示されます。


図 3. 読み込まれているスクリプトビュー中のブレークポイントが設定されたファイル

ブレークポイントによるデバッグ

ブレークポイントを設定することは、実行環境に関する情報を Venkman (或いは何であれご利用のデバッガ) が表示できるようにすることになります。スクリプトやソフトウェアプログラムをデバッグする上で最も重要なものとして、スクリプトの実行過程で変化する変数 関数は値、エラー、カウンタ、変数のスコープを返す を確認できることが挙げられます。

例えば図 1 の DownloadButton 関数では、ダウンロードボタンによってどの種のビルドが得られるようにするか判断する為に変数 type を使用しています。プラットフォームは Windows であると関数が判断したときにその変数が調べられる行である、112行目にブレークポイントを設定してみます。そしてメインブラウザでウェブページを再読込すると、DownloadButton 関数に入った時に実行が停止されることを確認できます。そこで停止し、type 変数の値が "milestone" であると ローカル変数ビューに表示されるのです。([訳註] Windows プラットフォームでナイトリービルドでないブラウザによって読み込んだときの挙動)


図 4. ブレークポイントで停止時のローカル変数ビュー

ブレークポイントと対話ビューを用いて、Venkman の表示する変数の値を(([訳註] コードを実際に変更することなく)デバッグ環境自体のコンテクスト中でのみ)変更し、これらの変更がコードの実行にどのように影響するか調べることができます。


図 5. ブレークポイントで停止時にスクリプトとやり取りをする

このようにブレークポイントで停止時に Venkman で可能な操作について詳しくは Venkman 紹介記事の デバッグの基本 節をご覧ください。

ブレークポイントの削除

ブレークポイントを削除するには、当該余白部を二度クリックします。一度目のクリックでは実ブレークポイントが削除され、予定ブレークポイントだけが残されます。この状態は黄色の "F" という文字で表されます。2度目のクリックにより予定ブレークポイントも削除されます。


図 6. 予定ブレークポイント

高度なブレークポイント

Venkman ではブレークポイントとスクリプトを関連づけることができます。当該ブレークポイントに出会うと実行中の関数のスコープで実行されるスクリプトを指定できるのです。この高度な機能や関連づけられるスクリプトに関する他のオプションは、ブレークポイントの右クリックからアクセスできる、ブレークポイントのプロパティダイアログで指定できます。


図 7. ブレークポイントのプロパティダイアログ

関連づけられたブレークポイントに出会った時に実行されるスクリプトを作成する場合には、Venkman が関連づけられたスクリプトの出力をどう扱うか決定する様々なオプションをブレークポイントのプロパティダイアログから選択できます。

[訳註] 原文では予定ブレークポイントのプロパティについて書かれていましたが、実際のところ実ブレークポイントと予定ブレークポイント各々のプロパティを別のものとすることはできず、プロパティ設定の点では両者を区別できません。予定ブレークポイントに限った話だと誤解しないよう単に(実)ブレークポイントのプロパティについての記述にしました。

メタコメント

Venkman の メタコメント と呼ばれる機能を使うことで、デバッグしたいソースコード中に直接スクリプト付きブレークポイントを前もって埋め込んでおく事もできます。メタコメントというのは特別な形式のコメントのことで、後に続くコメント内のスクリプトを一定の方法で処理するようになっています。次のような種類のメタコメントを利用できます:

スクリプト中のメタコメントを有効にするには、読み込まれているスクリプトビューのファイルから "メタコメントをスキャン" コンテクストメニューを選択します。

メタコメントを追加すると、普通のブレークポイントが生成されます。このブレークポイントは手動で作成したブレークポイントと全く同様に変更や削除できます。

情報源

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

 DevEdge Tech Central DevEdge Tools この記事の英語版(原文） この記事の第１部の日本語版(翻訳） この記事の第１部の英語版(原文） この記事の翻訳者 dynamisさんのページ