Internet Explorer

1. デバッガを起動するには、「プロジェクト」ウィンドウでプロジェクトを右クリックし、「デバッグ」を選択します。
2. 表示されるダイアログで、「選択したブラウザ内のクライアント側 JavaScript を使用したサーバー側 Java」オプションを選択します。次に「Internet Explorer」を選択します。
   
   

   注: あとでのプロジェクト「プロパティー」ダイアログでサーバー側またはクライアント側のデバッガを無効にすることもできます。このダイアログを開くには、「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「プロパティー」を選択します。「デバッガの有効化と無効化」を参照してください。

3. 「デバッグ」をクリックします。Internet Explorer でのクライアント側デバッグオプションを選択し、「デバッグ」をクリックすると、アクティブスクリプトデバッガフレームワークがインストールされているかどうかが最初に確認されます。フレームワークがインストールされていない場合は、ダウンロードしてインストールすることを求めるメッセージが表示されます。
   
   Microsoft の Web サイト上でフレームワークをダウンロードできる場所がブラウザに表示されます。フレームワークをダウンロードしてインストールします。
4. アクティブスクリプトデバッガフレームワークがインストールされたことを確認するメッセージが表示されたら、IDE に戻って「了解」をクリックします。次に、Internet Explorer 用 NetBeans 拡張機能がブラウザに登録されているかどうかが確認されます。登録されていない場合は、IDE で Internet Explorer 用 NetBeans 拡張機能をインストールしてもいいかどうかを確認するダイアログが表示されます。
5. 「了解」をクリックします。IDE によって拡張機能がブラウザに登録され、デバッグセッションが開始されて、デバッグセッションの実行対象であるアプリケーションの開始ページがブラウザに表示されます。
6. IDE にフォーカスを戻します。エディタの上にデバッガツールバーが表示されます。コードが中断されると、ツールバー上のすべてのアイコンがアクティブになります。プロジェクトの index ページが IDE のエディタに表示されます。
   
   デフォルトでは、IDE の下部領域で、「ウォッチポイント」、「局所変数」、「呼び出しスタック」など、複数のウィンドウがアクティブになります。最初にデバッガコンソールが「出力」ウィンドウに表示され、デバッグセッションが開始したことが示されます。デバッガコンソールは、デバッグセッション中に、評価エラーやスローされた例外などの情報を表示するために使用できます。
   

Firefox

1. デバッガを起動するには、「プロジェクト」ウィンドウでプロジェクトを右クリックし、「デバッグ」を選択します。
2. 表示されるダイアログで、「選択したブラウザ内のクライアント側 JavaScript を使用したサーバー側 Java」オプションを選択します。次に「Firefox」を選択します。
   
   

   注: あとでのプロジェクト「プロパティー」ダイアログでサーバー側またはクライアント側のデバッガを無効にすることもできます。このダイアログを開くには、「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「プロパティー」を選択します。「デバッガの有効化と無効化」を参照してください。

3. 「デバッグ」をクリックします。Firefox 用のクライアント側デバッグオプションを選択して「デバッグ」をクリックすると、Firebug アドオンと Firefox 用 NetBeans 拡張機能が Firefox にインストールされているかどうかが確認されます。インストールされていない場合は、IDE によってインストールが試行されます。
   

   「了解」をクリックする前に、Firefox が起動していないことを確認します。起動していると、アドオンと拡張機能がアクティブになった状態でブラウザを読み込むことができないため、ブラウザを手動で再起動してからデバッガを再実行する必要があります。

4. 「了解」をクリックします。両方のコンポーネントがインストールされ、ブラウザが起動して、デバッグセッションの実行対象であるアプリケーションの開始ページが表示されます。
   
   Firebug と Firefox 用 NetBeans 拡張機能が正常にインストールされたら、これらのアイコンが Firefox ブラウザの右下隅に表示されます。
   • Firebug:
   • Firefox 用 NetBeans 拡張機能:

   Firefox 用 NetBeans 拡張機能のアイコンをクリックすると、拡張機能の詳細を示すダイアログが表示されます。

   
5. IDE にフォーカスを戻します。エディタの上にデバッガツールバーが表示されます。コードが中断されると、ツールバー上のすべてのアイコンがアクティブになります。プロジェクトの index ページが IDE のエディタに表示されます。
   
   デフォルトでは、IDE の下部領域で、「ウォッチポイント」、「局所変数」、「呼び出しスタック」など、複数のウィンドウがアクティブになります。最初にデバッガコンソールが「出力」ウィンドウに表示され、デバッグセッションが開始したことが示されます。デバッガコンソールは、デバッグセッション中に、評価エラーやスローされた例外などの情報を表示するために使用できます。
   

プロジェクトのデバッグ

JavaScript デバッガはプロジェクト全体に対して実行できます。

1. 「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「デバッグ」を選択します。デバッガが中断されていない場合は、index ファイルがエディタに表示されます。

注: デバッグ対象のプロジェクトが主プロジェクトに設定されている場合は、IDE のメインメニューから「デバッグ」>「主プロジェクトをデバッグ」を選択するか、メインツールバーの「プロジェクトをデバッグ」アイコン () を選択することもできます。プロジェクトを主プロジェクトに設定するには、対象のプロジェクトを右クリックし、「主プロジェクトとして設定」を選択します。

ファイルのデバッグ

デバッガは、HTML ファイルや JSP ファイルなどの個別のファイルに対して実行できます。

1. 「プロジェクト」ウィンドウでファイルを右クリックし、「ファイルをデバッグ」を選択します。IDE のメインメニューから「デバッグ」>「ファイルをデバッグ」を選択することもできます。デバッガが中断されていない場合は、デバッグ対象のファイルがエディタに表示されます。

外部ソースのデバッグ

インターネットに接続している場合は、外部 URL に対してデバッガを実行できます。これにより、一般に公開されているページに含まれる JavaScript コードを表示して調べることが可能になります。

1. IDE のメインメニューから「デバッグ」>「デバッガを接続」を選択します。
2. 「デバッガを接続」ダイアログで、「デバッガ」ドロップダウンリストから「Web ページデバッガ (JavaScript)」を選択します。
3. デバッガの実行対象となるページの URL を入力し、「了解」をクリックします。
   
   

外部ソースをデバッグするときは、「ソース」ウィンドウを使うと、使用中のすべてのリソースの URL パスを確認できます。エディタとツールバーを使用して、コードをステップ実行して 1 行ずつ確認することもできます。

デバッガツールバーの使用

デバッグセッションを実行すると、エディタの上にデバッガツールバーが表示されます。特定の条件下でデバッガを中断するように設定してあるかどうかに応じて、ツールバーはアクティブ状態または中断状態で表示されます。デバッグの設定は「オプション」ウィンドウで指定できます。「デバッガの設定」を参照してください。

アクティブ状態:
デバッグセッションがアクティブです。デバッグウィンドウにはブラウザに読み込まれたファイルとスクリプトの状態に基づくデータが含まれます。「一時停止」をクリックすると、次の JavaScript 呼び出しでデバッガを中断できます。
中断状態:
デバッグセッションが中断されています。ファイル内の特定のポイントで実行が停止すると、エディタでは、該当する行の背景が緑色になり、左マージンに緑色の矢印バッジ () が表示されます。ツールバーを使用してコードをステップ実行できます。

ツールバーでは次のアクションを実行できます。

デバッガセッションを終了 ()	デバッグセッションを終了
一時停止 ()	デバッグセッションを中断
再開 ()	デバッグセッションを再開
ステップオーバー ()	実行文をステップオーバー
ステップイン ()	関数呼び出しにステップイン
ステップアウト ()	現在の関数呼び出しからステップアウト
カーソルまで実行 ()	カーソル位置まで実行

注: 1 行に複数の JavaScript 文があるとき、Internet Explorer で「ステップオーバー」を選択すると、同じ行内の次の文に進みます。FireFox では、デバッガは行にあるすべての文を実行してから、その次の行に進みます。

ブレークポイントの設定

デバッガの実行を停止する位置を指定するには、ファイル内にブレークポイントを設定します。ブレークポイントは HTML ファイルと JavaScript ファイルに設定できます。また、ブラウザのキャッシュでアクセスされる読み取り専用 ([r/o]) ファイルの JavaScript コード内にもブレークポイントを設定できます。

ブレークポイントを設定するには、エディタで、ブレークポイントを設定する行の左マージンをクリックします。

ブレークポイントを削除するには、ブレークポイントバッジ () をクリックします。

ブレークポイントは一時的に無効にすることもできます。無効にするには、ブレークポイントバッジを右クリックし、「ブレークポイント」>「✓ 有効」を選択します。これにより、ブレークポイントが無効状態に切り替わり、左マージンにグレーのバッジ () が表示されます。

デバッグの実行中にブレークポイントに到達すると、デバッガはそこで実行を停止するので、デバッグウィンドウで変数を確認し、ブレークポイントに続くコードをステップ実行できます。

ブレークポイントは、ヒットカウントまたは条件式、あるいはその両方を設定してカスタマイズすることもできます。この場合、デバッガは、ヒットカウントに到達したときや、条件式が真に評価されたときにだけ、ブレークポイントで実行を停止します。ブレークポイントのカスタマイズ方法については、このあとの「「ブレークポイント」ウィンドウ」でも説明します。ブレークポイントをカスタマイズするには、エディタの左マージンにあるブレークポイントバッジを右クリックし、「ブレークポイント」(または「無効なブレークポイント」) >「プロパティー」を選択します。

ツールチップの確認

デバッグセッション中にデバッガが中断されているときは、エディタ内で JavaScript 識別子の上にマウスポインタを置いてツールチップを表示できます。選択した呼び出しスタックフレーム内で識別子が有効である場合は、その値が表示されます。JavaScript の式を選択することもできます。この場合は式の値がツールチップに表示されます。

「セッション」ウィンドウ

「セッション」ウィンドウには、現在アクティブなデバッグセッションが表示されます。JavaScript のデバッグセッションを開始すると、「セッション」ウィンドウに JavaScript デバッガのエントリが表示されます。

NetBeans IDE では、複数のデバッガセッションを同時に実行することもできます。たとえば、Java に基づくプロジェクトでクライアント側とサーバー側のデバッガを有効にした場合、「セッション」ウィンドウに一覧表示された 2 つのセッションを特定できます。

現在のセッション、つまりデバッガツールバーを使用して制御できるセッションは、ほかのアイコンよりも目立つアイコン () で示されます。複数のセッション間を切り替えるには、現在のセッションにするセッションをダブルクリックするか、右クリックして「現在に設定」を選択します。

また、右クリックポップアップウィンドウでは、セッションを終了したり (右クリックして「完了」を選択)、現在のスレッドのデバッグとセッション内のすべてのスレッドのデバッグとを切り替えたり (右クリックして「スコープ」>「すべてのスレッドをデバッグ」または「現在のスレッドをデバッグ」) できます。

「局所変数」ウィンドウ

デバッガが中断されているとき、「局所変数」ウィンドウには、選択した呼び出しスタックフレームの現在の window オブジェクトの局所変数が表示されます。次の 2 つの最上位ノードが表示されます。

• scope: 現在のフレームの関数呼び出しのスコープ。一覧表示されるプロパティーはすべて、現在のスコープでフェッチできる変数を表しています。
• this: 現在のフレームの this キーワードの値。一覧表示されるプロパティーはすべて、this への現在の参照を表しています。

scope と this は、JavaScript 構文に属する用語なので、「局所変数」ウィンドウを使用するうえで正しく理解するようにしてください。理解を深めるため、this と scope に関する記事を参照してください。

「scope」ノードは常に展開されています。選択した呼び出しスタックフレームに関連付けられている関数呼び出しの局所変数とパラメータ以外に、次のノードも表示されます。

• arguments: 宣言された仮パラメータに対する実引数
• arguments.length: 関数に渡された実引数の数
• arguments.callee.length: 関数の署名で宣言された、予期される引数の数
• parent scope: 現在の関数呼び出しのスコープの外部にあるスコープに関する情報

コードをステップ実行しているときに一部の局所変数の値が変わることがあります。このような局所変数は「局所変数」ウィンドウにボールドで表示されます。

「値」列の中を直接クリックして、変数の値を手動で変更することもできます。

注

• IE では、アクティブスクリプトデバッガの API に制限があるため、変数の型を判別できない場合があります。このような場合、「局所変数」ウィンドウで表示される変数は、総称型の {Object} を示します。
• 「parent scope」ノードは、IE ユーザーの「局所変数」ウィンドウには表示されません。

「ウォッチポイント」ウィンドウ

「ウォッチポイント」ウィンドウでは、コードをステップ実行しながら特定の式の値を追跡できます。

ウォッチポイントを追加するには、「ウォッチポイント」ウィンドウ内またはエディタ内を右クリックし、ポップアップメニューから「新規ウォッチポイント」を選択します。ウォッチポイントを削除するには、右クリックしてポップアップメニューから「削除」を選択します。

エディタでは、ウォッチポイントを作成する式を先に強調表示してから右クリックして「新規ウォッチポイント」を選択します。強調表示した式がダイアログのテキストフィールドに自動的に追加されます。

「ウォッチポイント」ウィンドウには、任意の JavaScript 式を追加できます。選択した呼び出しスタックフレーム内のウォッチ表現がデバッガによって評価され、評価に成功すると、式の値が表示されます。表現には、「局所変数」ウィンドウに一覧表示される変数や、評価が可能でデバッグセッションに関連する値が得られる任意の JavaScript 式が含まれます。

「呼び出しスタック」ウィンドウ

「呼び出しスタック」ウィンドウには、実行中に行われた一連の呼び出しが一覧表示されます。デバッガが中断されているとき、「呼び出しスタック」ウィンドウには、一連の関数呼び出し、つまり呼び出しスタックが表示されます。最初の中断では、最上位のスタックフレームが自動的に選択されます。

呼び出しスタックフレームをダブルクリックして選択したら、「局所変数」ウィンドウと「ウォッチポイント」ウィンドウでフレームの変数や式の値を確認できます。

「呼び出しスタック」ウィンドウには、次の 2 つの列があります。

• 名前: 呼び出された関数の名前
• 解決される場所: 関数が呼び出された場所を示す URL (ファイル名と行番号を含む)

「呼び出しスタック」ウィンドウ内を右クリックし、「ソースへ移動」を選択することで、呼び出し元に直接移動することもできます。

エディタでは、呼び出しスタックフレームの場所を含むファイルが表示され、呼び出しをトリガーした行にカーソルが置かれます。エディタは呼び出しスタックフレームの強調表示機能も備えています。呼び出しスタック内の前のフレームは、左マージンに紫色のバッジ () が表示され、背景が薄紫色になります。

「スレッド」ウィンドウ

「スレッド」ウィンドウには、デバッグセッション中に存在するページのウィンドウとフレームが一覧表示されます。JavaScript では、ウィンドウまたはフレームはそれぞれ実行コンテキストを表します。したがって、複数のフレームを含むファイルに対してデバッガを実行すると、「スレッド」ウィンドウにはページの構造が表示され、各フレームが別個のスレッドとして一覧表示されます。また、「スレッド」ウィンドウには、各ウィンドウとフレームの現在の状態に関する詳細や中断の理由も表示されます。

ほかのデバッグウィンドウと同様に、「ソースへ移動」オプションを使用すると、選択項目の「名前」列に表示されているパスまたは URL に直接移動できます。ウィンドウまたはフレームを右クリックし、ポップアップメニューから「ソースへ移動」を選択します。

「ソース」ウィンドウ

「ソース」ウィンドウには、デバッグセッション用に読み込まれたすべてのファイルとスクリプトが表示されます。ファイルとスクリプトは、ブラウザによって読み込まれた順序で一覧表示されます。プロジェクトに含まれる JavaScript ファイルの場合、デバッガには、使用しているコンピュータでのファイルのパスが表示されます。リモートリソースの場合は、ファイルの URL が表示されます。ほかのデバッグウィンドウと同様に、「ソースへ移動」オプションを使用すると、選択項目に表示されているパスに直接移動できます。ソースファイルを右クリックし、ポップアップメニューから「ソースへ移動」を選択します。ファイルがエディタに表示されます。

ローカルファイルを操作している場合、「ソース」ウィンドウでは、実際のソースファイルと、ブラウザのキャッシュに含まれる描画対象ソースファイルとが区別されます。「クライアントソースへ移動」を選択することで、ブラウザのキャッシュに含まれるファイルを表示できます。ファイルは読み取り専用形式でエディタに表示されます。

「ブレークポイント」ウィンドウ

「ブレークポイント」ウィンドウを使用すると、IDE 内で設定したすべてのブレークポイントを表示できます。

「ブレークポイント」ウィンドウでは、「有効」列の下にあるオプションを切り替えることで、個々のブレークポイントを有効または無効にすることができます。また、ブレークポイントを右クリックして「カスタマイズ」を選択することで、ブレークポイントをカスタマイズできます。ブレークポイントカスタマイザを使用すると、ヒットカウントまたは条件式、あるいはその両方を設定できます。

ヒットカウントに条件を設定すれば、ヒットカウントが指定の数値に等しいとき、指定の数値以上のとき、または指定の数値の倍数のときにデバッガを停止させることができます。

条件式を指定した場合、デバッガは、式が true に評価されたときにだけブレークポイントで停止します。同様に、条件式とヒットカウント条件の両方を指定した場合は、両方の条件が true に評価されたときにだけブレークポイントが確認されます。! (条件) を使用すると、否定条件を設定できます。カスタマイズしたブレークポイントには、「ブレークポイント」ウィンドウおよびエディタの左マージンにバッジ が表示されます。