2.3.10 JavaScriptの動作を確認する

JavaScriptのデバッグ支援機能を使用すると、デバッグ用のプリント命令を記述せずにJavaScriptのグローバル変数の値を参照したり変更する事ができます。

注意

JavaScriptのデバッグ支援機能では、中断点を設定してJavaScriptの実行を中断したり、中断時の変数の値を参照あるいは更新したりすることはできません。このようなデバッグが必要な場合には、サードパーティ製のブラウザ組込み型デバッガを使用してください。Internet Explorer 8またはInternet Explorer 9の場合にはInternet Explorer開発者ツールが利用できます。詳細はInternet Explorerのヘルプを参照してください。

デバッグを開始するまでの手順

JavaScriptのデバッグ支援機能を使ってデバッグを開始するまでの手順を以下に示します。

デバッグ支援用Webアプリケーションの配備
以下に格納されているデバッグ支援用WebアプリケーションをIJServerクラスタに配備します。

<Java統合開発環境のインストールフォルダ>\etc\jsdebug\f5drjsdbg.war
IJServerクラスタの起動
デバッグ対象アプリケーションとデバッグ支援用Webアプリケーションが配備されているIJServerクラスタを起動します。
Webブラウザからデバッグ支援用Webアプリケーション経由でデバッグ対象Webアプリケーションにアクセスする
デバッグ支援用Webアプリケーションにアクセスする際にURLパラメタにデバッグ対象WebアプリケーションのURLを指定します。

例) http://localhost/f5drjsdbg/?url=/(デバッグ対象のコンテキストルート)/index.html

上記を行うとWebブラウザにデバッグ対象のアプリケーション画面とデバッグ支援機能の画面が表示されます。

注意

デバッグ支援機能とデバッグ対象のアプリケーションは、同一ホストに配置する必要があります。
デバッグ支援機能の画面はポップアップウィンドウとして表示されます。ブラウザでポップアップウィンドウをブロックする設定にしている場合にはデバッグ支援機能の画面が表示されないことがあります。この場合には、デバッグ対象のアプリケーションを配備したサイトに対してポップアップを許可するようにブラウザを設定してください。

変数の値の参照

以下を参考に変数リストに変数を追加して、変数の値を参照してください。

変数名
変数リストに追加する、あるいは、変数リストから削除する変数名を指定します。変数名をコンマあるいは改行で区切ることで、複数の変数名を指定することができます。
変数リスト
変数名、変数の型および変数の値を以下の形式で表示します。

変数名 (変数の型): 変数の値

変数がオブジェクトの場合には、変数名の前に"+"のアイコンが表示されます。このアイコンをクリックすると、そのオブジェクトのプロパティ名、型、値の情報が階層表示されます。
最新の値を表示
[変数リスト]の値の表示は、アプリケーションでその値が変わっても自動的には更新されません。表示を更新するには[最新の値を表示]を押してください。値が更新された箇所が赤く表示されます。

注意

表示可能な変数はグローバル変数のみです。関数の中で定義されたローカル変数を表示することはできません。
関数型の変数の値を参照することはできません。なおInternet Explorerをお使いの場合には、関数型の変数であっても変数の型は"object"と表示されます。
JavaScriptの変数は、その変数が定義されているページでのみ有効です。他のページに表示が切り替わると、以前のページで定義されていた変数は無効になります。
変数の値の参照や変更が行えるのは、アプリケーション画面のウィンドウが開いている間のみです。ウィンドウを一旦閉じてしまうと、再度開きなおしても変数の値の参照や変更は行えません。

ポイント

アプリケーション画面がフレーム分割されている場合、[変数名]に"フレーム名.変数名"と指定することで、フレーム内のページで定義されている変数を表示することができます。

変数の値の変更

変数の値を変更するには、[変数リスト]に表示された変数の値をクリックします。すると値の表示部分が入力フィールドに変わります。そこに新しい値を入力して[Enter]キーを押すと、変数の値を変更できます。変更した箇所は緑色で表示されます。

値の入力方法は、入力したい値の種類によって以下のように異なります。

値の種類	入力方法
数値（number）	数値を入力します。
論理値（boolean）	trueあるいはfalseを入力します。
文字列（string）	文字列をダブルクォーテーション(")で囲んで入力します。
未定義値（undefined）	変数の値を未定義にするには、undefinedと入力します。
ヌル値（null）	変数の値をnullにするには、nullと入力します。
オブジェクト（object）	オブジェクト型の変数の値を変更することはできません。オブジェクトが数値型、論理値型あるいは文字列型のプロパティを持つ場合には、そのプロパティに対して値の変更を行うことができます。
関数（function）	関数型の変数の値を変更することはできません。