// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= HTML5アプリケーションでのJavaScriptのデバッグとテスト
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: HTML5アプリケーションでのJavaScriptのデバッグとテスト - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, HTML5アプリケーションでのJavaScriptのデバッグとテスト

HTML5アプリケーションは、通常はHTML、CSSおよびJavaScriptを結合して、ブラウザで稼働し、スマートフォン、タブレット、ラップトップなどの各種デバイスに表示されるアプリケーションを作成します。このドキュメントでは、IDEでJavaScriptファイルをデバッグおよびテストするのに役立つツールをIDEが提供する方法を示します。

HTML5アプリケーションでJavaScriptファイルをデバッグする場合は、ChromeブラウザのNetBeans Connector拡張機能をインストールすることをお薦めします。ブラウザでアプリケーションを実行し、拡張機能がインストールされている場合は、デバッグが自動的に有効になります。

IDEにより、JavaScriptファイルでJasmineテスト・フレームワーク、KarmaまたはJSテスト・ドライバ・テスト・ランナーを使用した単体テストを簡単に構成および実行することもできます。様々なブラウザに対して単体テストを実行するようにテスト・ランナーを構成し、テストの実行時にIDEでロードするJavaScriptライブラリ、スクリプトおよびテストをすばやく指定できます。テストに失敗した場合は、デバッガを使用して、問題のあるコードを特定できます。

Chromeブラウザ用のNetBeans Connector拡張機能のインストール方法の詳細は、チュートリアルlink:html5-gettingstarted.html[+HTML5アプリケーションの開始+]を参照してください。

IDEでのJavaScriptの編集機能の詳細は、link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG[+NetBeans IDEによるアプリケーションの開発ユーザーズ・ガイド+]のlink:http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm#BACFIFIG[+JavaScriptファイルの作成+]を参照してください。

チュートリアルのスクリーンショットを確認するには、link:../web/html5-javascript-screencast.html[+HTML5アプリケーションでのJavaScriptのテストとデバッグのビデオ+]を参照してください。


== このチュートリアルを完了するには、次のリソースが必要です。

|===
|ソフトウェアまたはリソース |必須バージョン 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE、Java+] |8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |7または8 

|link:http://www.google.com/chrome[+Chromeブラウザ+] |-- 

|link:https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon[+ChromeのNetBeans Connector拡張機能+] |1.x 

|link:http://code.google.com/p/js-test-driver/[+JSテスト・ドライバJAR+] |-- 
|===

*注意: *

* このドキュメントでは、JSテスト・ドライバ・サーバーを使用してJavaScript単体テストを実行します。link:http://code.google.com/p/js-test-driver/[+JSテスト・ドライバ・プロジェクト・ホーム+]でサーバーのプロパティに精通する必要があります。
* このドキュメントは、HTML、CSSおよびJavaScriptについて基本的な知識またはプログラミング経験を持つ読者を想定して書かれています。


== HTML5サンプル・アプリケーションの作成

次の手順を実行して、サイト・テンプレートからHTML5サンプル・アプリケーションを作成します。

1. メイン・メニューで「ファイル」→「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択して新規プロジェクト・ウィザードを開きます。
2. 新規プロジェクト・ウィザードで*「サンプル」*ノードを展開し、*「HTML5」*カテゴリを選択します。
3. *「AngularJSの端末カタログ・チュートリアル」*プロジェクトを選択します。「次」をクリックします。
image::images/html5-js-newproject.png[title="新規ファイル・ウィザードの「AngularJSの端末カタログ・チュートリアル」サンプル・プロジェクト"]

[start=4]
. プロジェクトの場所を指定します。「終了」をクリックします。

*注意:*テンプレートのURLはgithubです。IDEはネットワークにアクセスしてテンプレート・アーカイブを取得できる必要があります。アーカイブのダウンロードで問題が発生した場合は、「オプション」ウィンドウでプロキシ設定を確認します。

「終了」をクリックすると、IDEによりプロジェクトが作成され、エディタに ``index.html`` ファイルが開かれます。「プロジェクト」ウィンドウで、プロジェクトに ``index.html`` 、各種CSSスタイル・シート、JavaScriptファイルおよびライブラリが含まれていることを確認できます。

image::images/html5-js-projectswindow.png[title="「プロジェクト」ウィンドウの「AngularJSの端末カタログ・チュートリアル」プロジェクト・ノード"]

プロジェクトには、デフォルトで生成された複数のJavaScript単体テストおよび構成ファイルも含まれます。


[start=5]
. NetBeans Connector付きChromeがツールバーのドロップダウン・リストで選択されていることを確認します。
image::images/html5-js-selectbrowser.png[title="ツールバーのドロップダウン・リストで選択されたブラウザ"]

[start=6]
. ツールバーで「実行」ボタンをクリックするか(F6)、「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックして「実行」を選択します。

プロジェクトを実行すると、HTML5アプリケーションのフロント・ページがChromeブラウザに開き、携帯端末のリストが表示されます。携帯端末の名前をクリックすると、ページに端末の詳細が表示されます。

image::images/html5-js-runproject1.png[title="ブラウザ・ウィンドウの「AngularJSの端末カタログ・チュートリアル」アプリケーション"]

NetBeans Connectorがタブをデバッグしていることを示す黄色いバーがブラウザ・タブに表示されます。黄色いバーが表示されているときは、IDEとブラウザが接続され、相互に通信できます。IDEからHTML5アプリケーションを起動すると、JavaScriptデバッガが自動的に有効になります。ファイルに変更を保存するかCSSスタイル・シートに変更を加えた場合は、ブラウザ・ウィンドウが自動的に更新されて変更が表示されるため、ページを再ロードする必要はありません。

黄色いバーを閉じるか「取消」をクリックした場合は、IDEとブラウザ間の接続が切断されます。接続を切断した場合、JavaScriptデバッガを使用するにはIDEからHTML5アプリケーションを再度実行する必要があります。

また、NetBeansアイコンがブラウザのURLの場所フィールドに表示されます。アイコンをクリックして、ブラウザの表示サイズの変更および「NetBeansでの検査」モードの有効化を行う各種オプションを提供するメニューを開くことができます。


== JavaScriptデバッガの使用

この課題では、JavaScriptファイルにブレークポイントを配置し、アプリケーションを実行します。エディタのツールチップを使用して、変数の値をすばやく参照できます。

1. 「プロジェクト」ウィンドウで「 ``js`` 」ノードを展開して「 ``controllers.js`` 」をダブルクリックし、エディタでそのファイルを開きます。
2. 左マージンをクリックして、 ``controllers.js`` の行16に行ブレークポイントを配置します。
image::images/html5-js-breakpoint1.png[title="エディタで設定されたブレークポイント"]

「ウィンドウ」→「デバッグ」→「ブレークポイント」を選択して「ブレークポイント」ウィンドウを開き、プロジェクトで設定したブレークポイントを表示できます。

image::images/html5-js-breakpoint2.png[title="「ブレークポイント」ウィンドウのブレークポイントのリスト"]

[start=3]
. ツールバーの「実行」ボタンをクリックして、プロジェクトを再度実行します。

プロジェクトを実行すると、設定したブレークポイントがヒットしないため同じページが表示されます。


[start=4]
. ブラウザで、ページのMotorola Atrix4Gなどのエントリの1つをクリックします。

データはJavaScriptに渡されておらず、レンダリングされていないため、ページは部分的にロードされ、端末のデータはないことがわかります

image::images/html5-js-break-details.png[title="ブラウザに部分的にロードされたアプリケーションの詳細ページ"]

[start=5]
. IDEのエディタで、ブレークポイントがヒットし、プログラム・カウンタが現在 ``controllers.js`` の行16にあることを確認できます。

[start=6]
.  ``phone`` 変数の上にカーソルを移動し、変数に関するツールチップ情報を表示します。
image::images/html5-js-variables1.png[title="エディタの変数ツールチップ"]

ツールチップに、 ``phone = (Resource) Resource`` という情報が表示されます。


[start=7]
. ツールチップをクリックしてツールチップを展開し、変数と値のリストを表示します。
image::images/html5-js-variables.png[title="エディタの展開された変数ツールチップ"]

たとえば、「 ``android`` 」ノードを展開すると、文字列 ``os`` および ``ui`` の値が表示されます。

「ウィンドウ」→「デバッグ」→「変数」を選択して、「変数」ウィンドウにリストを表示することもできます。


[start=8]
. ツールバーの手順ボタンを使用して、 ``angular.js`` ライブラリでJavaScript関数をステップ実行するか、「続行」ボタン(F5)をクリックしてアプリケーションを再開します。


== JS単体テストの実行

KarmaまたはJSテスト・ドライバのテスト・ランナーを使用して単体テストを実行するように、IDEを容易に構成できます。KarmaおよびJSテスト・ドライバは、JavaScript単体テストを実行するターゲットであるURLを提供するテスト・ランナーです。

このチュートリアルでは、Karmaを使用して、サンプル・プロジェクトに含まれるJavaScript単体テストを実行します。サンプル・プロジェクトには、Karma構成ファイルがすでに含まれています。テストを実行すると、テスト・ランナー・サーバーが起動し、テストの実行を待機します。ブラウザが開き、ウィンドウにサーバーが稼働および待機中であることを示すステータス・メッセージが表示されます。


=== Karmaを使用してテストを実行する方法

Karmaを使用してテストを実行するには、まずKarmaをローカル・ファイル・システムにダウンロードする必要があります。Karmaをインストールしたら、Karma構成ファイルを作成し、その後プロジェクト・プロパティ・ウィンドウでインストール・ファイルと構成ファイルの場所を指定する必要があります。

1. Karmaをインストールします。

Karmaをインストールする方法と場所を選択できます。Karmaを使用するようにプロジェクトを構成する場合は、インストールを後から指定します。link:http://karma-runner.github.io[+Karma Webサイト+]にKarmaをインストールするオプションについての情報を検索できます。


[start=2]
. Karma構成ファイルを作成します。

サンプル・アプリケーションにはKarma構成ファイルがすでに含まれているため、このチュートリアルでは、この手順はオプションです。新規ファイル・ウィザードの単体テスト・カテゴリでKarma構成ファイルを選択することで、スケルトンKarma構成ファイルを作成できます。

image::images/karma-new-config.png[title="新規ファイル・ウィザードの新規Karma構成ファイル"]

コマンド・ラインでKarma  ``init`` コマンドを実行することもできます。Karma  ``init`` コマンドの使用の詳細は、Karmaドキュメントを参照してください。


[start=3]
. 「プロジェクト」ウィンドウで「構成ファイル」ノードを展開して「 ``karma.conf.js`` 」をダブルクリックし、エディタでファイルを開きます。サンプルには、2つのKarma構成ファイルが含まれます。

Karma構成ファイルには、テストの実行時に含められたり除外されたりするファイルが含まれます。この構成でテストを実行するのに必要なKarmaプラグインも含まれます。

image::images/karma-plugins.png[title="エディタ内のKarma構成ファイル"]

[start=4]
. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、ポップアップ・メニューで「プロパティ」を選択します。

[start=5]
. プロジェクト・プロパティ・ウィンドウの「カテゴリ」ペインで「JavaScriptテスト」カテゴリを選択します。

[start=6]
. 「テスト・プロバイダ」ドロップダウン・リストで「Karma」を選択します。「OK」をクリックします。

[start=7]
. プロジェクト・プロパティ・ウィンドウを再度開き、「カテゴリ」ペインの「JavaScriptテスト」カテゴリで「Karma」を選択します。

[start=8]
. Karmaインストールの場所を指定します。

Karmaをプロジェクト・ディレクトリにインストールした場合は、「検索」をクリックするとIDEでインストールが検索されます。「参照」をクリックし、ローカルのKarmaインストールを手動で見つけることもできます。


[start=9]
. Karma構成ファイルの場所を指定します。「OK」をクリックします。

このチュートリアルでは、「検索」をクリックするとIDEでデフォルトのKarma構成ファイルが検索されます。「参照」をクリックし、構成ファイルを手動で見つけることもできます。

image::images/karma-properties-window.png[title="プロジェクト・プロパティ・ウィンドウ内の「Karma」カテゴリ"]

「OK」をクリックすると、「プロジェクト」ウィンドウの「プロジェクト」ノードの下に「Karma」ノードが表示されます。「Karma」ノードを右クリックしてKarmaサーバーを起動および停止し、ポップアップ・メニューで構成ファイルを設定します。


[start=10]
. 「プロジェクト」ウィンドウで「Karma」ノードを右クリックし、ポップアップ・メニューで「起動」を選択します。

「起動」をクリックするとKarmaサーバーが起動し、サーバーのステータスを示すブラウザ・ウィンドウが開きます。

image::images/karma-chrome.png[title="Chromeブラウザ・ウィンドウでのKarmaサーバーのステータス"]

「出力」ウィンドウで、サーバーのステータスを確認できます。不足するプラグインをインストールするよう求めるメッセージも表示されます。

image::images/karma-output1.png[title="「サービス」ウィンドウの「jsTestドライバの構成」ノード"]

*注意:*単体テストを実行するには、ブラウザ・ウィンドウが開き、Karmaサーバーが稼働している必要があります。


[start=11]
. 「Karma」ノードを右クリックして「構成を設定」>「 ``karma.conf.js`` 」の順に選択し、正しい構成ファイルが選択されていることを確認する必要があります。image::../../../images_www/articles/80/webclient/html5-js/karma-node.png[title="「サービス」ウィンドウの「jsTestドライバの構成」ノード"]

[start=12]
. プロジェクトで設定したブレークポイントを無効にします。

「ブレークポイント」ウィンドウでブレークポイントのチェックボックスを選択解除することにより、ブレークポイントを無効にできます。


[start=13]
. 「プロジェクト」ウィンドウでプロジェクトのノードを右クリックし、「テスト」を選択します。

「テスト」を選択すると、テスト・ランナーによってファイルで単体テストが実行されます。IDEにより「テスト結果」ウィンドウが開かれ、テストの結果が表示されます。

image::images/karma-test-results.png[title="Karmaテスト結果"]


=== JSテスト・ドライバを使用してテストを実行する方法

JSテスト・ドライバを使用する場合のために、IDEで「サービス」の「JSテスト・ドライバ」ノードから開くことのできるJSテスト・ドライバの構成ダイアログが提供されています。構成ダイアログでは、JSテスト・ドライバ・サーバーJARの場所およびテストの実行対象のブラウザを簡単に指定できます。「JSテスト・ドライバ」ノードでは、サーバーが稼働しているかどうかをすばやく確認し、サーバーを起動および停止できます。

JSテスト・ドライバ・サーバーの構成の詳細は、link:http://code.google.com/p/js-test-driver/wiki/GettingStarted[+JsTestDriverの開始+]ドキュメントを参照してください。

1. link:http://code.google.com/p/js-test-driver/[+JSテスト・ドライバJAR+]をダウンロードし、JARをローカル・システムに保存します。
2. 「サービス」ウィンドウで、「JSテスト・ドライバ」ノードを右クリックし、「構成」を選択します。
image::images/html5-js-testdriver-serviceswindow.png[title="「サービス」ウィンドウの「jsTestドライバの構成」ノード"]

[start=3]
. 「構成」ダイアログ・ボックスで、「参照」をクリックし、ダウンロードしたJSテスト・ドライバJARを特定します。

[start=4]
. ブラウザに、NetBeans Connector付きChrome (NetBeans IDE 7.3では、NetBeans JS Debugger付きChrome)を選択します。「OK」をクリックします。
image::images/html5-js-testdriver-configure.png[title="「jsTestドライバの構成」ダイアログ・ボックス"]

*注意:*JSテスト・ドライバを初めて構成する場合にのみ、JSテスト・ドライバJARの場所を指定する必要があります。

キャプチャしてテストに使用できるブラウザのリストは、システムにインストールされているブラウザに基づきます。複数のブラウザをスレーブ・ブラウザとして選択できますが、テストを実行するには、サーバーのスレーブにできるウィンドウをブラウザごとに開く必要があります。選択したブラウザは、IDEからサーバーを起動すると自動的にキャプチャされます。

NetBeans ConnectorのあるChromeを選択した場合、JSテスト・ドライバで実行されるテストをデバッグできます。


[start=5]
. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「新規」>「その他」を選択します。

[start=6]
. 「単体テスト」カテゴリで*「jsTestDriver構成ファイル」*を選択します。「次」をクリックします。

[start=7]
. *jsTestDriver*がファイル名であることを確認します。

[start=8]
. 「作成されるファイル」フィールドで、ファイルの場所がプロジェクト( ``AngularJSPhoneCat/config/jsTestDriver.conf`` )の ``config`` フォルダであることを確認します。

*注意:* ``jsTestDriver.conf`` 構成ファイルはプロジェクトの ``config`` フォルダにある必要があります。作成されるファイルの場所が ``config`` フォルダでない場合は、「参照」をクリックし、ダイアログ・ボックスで「 ``AngularJSPhoneCat - Configuration Files`` 」フォルダを選択します。


[start=9]
. Jasmineライブラリのダウンロードのチェックボックスが選択されていることを確認します。「終了」をクリックします。
image::images/html5-js-testdriver-configfile.png[title="新規jsTestDriver構成ファイル・ウィザード"]

*注意:* jsTestDriverを実行するにはJasmineライブラリをダウンロードする必要があります。IDEがJasmineライブラリをダウンロードできないことを通知された場合は、「オプション」ウィンドウでIDEのプロキシ設定を確認します。

「終了」をクリックすると、IDEによりスケルトン ``jsTestDriver.conf`` 構成ファイルが生成され、ファイルがエディタに開かれます。「プロジェクト」ウィンドウで、構成ファイルが「構成ファイル」ノードに作成されたことを確認できます。「単体テスト」ノードの「 ``lib`` 」フォルダを展開すると、Jasmineライブラリがプロジェクトに追加されたことを確認できます。

image::images/html5-js-testdriver-projectswindow.png[title="「プロジェクト」ウィンドウの「単体テスト」フォルダ"]

エディタで、デフォルトで生成される構成ファイルの次のコンテンツを確認できます。


[source,java]
----

server: http://localhost:42442

load:
  - test/lib/jasmine/jasmine.js
  - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
  - test/unit/*.js

exclude:

----

構成ファイルでは、テストの実行に使用されるローカル・サーバーのデフォルトの場所を指定します。ファイルには、ロードする必要のあるファイルもリストされます。デフォルトでは、リストには「 ``unit`` 」フォルダにあるJasmineライブラリおよびJavaScriptファイルが含まれます。テストは通常 ``unit`` フォルダにありますが、リストを変更して、テストを実行するためにロードする必要のある他のファイルの場所を指定できます。単体テストを実行するには、テストするJavaScriptファイルとAngular JavaScriptライブラリの場所を、ロードするファイルのリストに追加する必要もあります。

このチュートリアルでは、JSテスト・ドライバを使用してテストを実行する場合、次のファイル(太字)をロードされるファイルのリストに追加できます。


[source,java]
----

load:
    - test/lib/jasmine/jasmine.js
    - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
*
    - app/lib/angular/angular.js
    - app/lib/angular/angular-mocks.js
    - app/lib/angular/angular-route.js
    - app/lib/angular/angular-animate.js
    - app/lib/angular/angular-resource.js
    - app/js/*.js
*
    - test/unit/*.js
----

[start=10]
. 構成ファイルの更新後、「プロジェクト」ウィンドウで「プロジェクト」ノードを右クリックして、「テスト」を選択できます。

「テスト」をクリックすると、IDEがChromeブラウザにJSテスト・ランナーを自動的に開き、「出力」ウィンドウに2つのタブを開きます。

image::images/html5-js-testdriver-browserwindow.png[title="ブラウザ・ウィンドウで稼働しているjsTestDriver"]

jsTestDriverサーバーの実行中は、Chromeブラウザ・ウィンドウにメッセージが表示されます。サーバーが ``localhost:42442`` で稼働していることを確認できます。「出力」ウィンドウのjs-test-driverサーバー・タブで、サーバーのステータスを確認できます。

JsTestDriverがブラウザで実行され、NetBeans Connectorがタブをデバッグしていることに注意してください。JSテスト・ドライバを使用してテストを実行し、NetBeans ConnectorのあるChromeをターゲット・ブラウザの1つとして選択する場合は、単体テストをデバッグできます。

image::images/html5-js-testdriver-outputstatus.png[title="「出力」ウィンドウのjs-test-driverサーバー・タブ"]

*注意:*単体テストを実行するには、ブラウザ・ウィンドウが開き、jsTestDriverサーバーが稼働している必要があります。「サービス」ウィンドウの「JSテスト・ドライバ」ノードを右クリックし、「起動」を選択して、サーバーを起動し、ウィンドウを開くことができます。

image::images/html5-js-testdriver-outputwindow.png[title="「出力」ウィンドウの実行中のJS単体テスト・タブ"]

[start=11]
. メイン・メニューの「ウィンドウ」→「出力」→「テスト結果」を選択して、「テスト結果」ウィンドウを開き、テストの結果を確認します。
image::images/html5-js-testdriver-testresultswindow.png[title="「テスト結果」ウィンドウ"]

ウィンドウの左マージンの緑のチェック・アイコンをクリックして、成功したテストの展開したリストを表示できます。


== JSテスト・ドライバを使用したJS単体テストのデバッグ

この課題では、IDEおよびJSテスト・ドライバを使用して単体テストをデバッグする方法を示します。

*注意:*NetBeans IDE 8.0では、Karmaテスト・ランナーで実行されるデバッグ・テストはサポートされません。

1. 「プロジェクト」ウィンドウで「 ``js`` 」フォルダを展開して「 ``controllers.js`` 」をダブルクリックし、エディタでそのファイルを開きます。
2. ファイルの行7を修正して、次の変更(*太字*)を加えます。変更を保存します。

[source,java]
----

function PhoneListCtrl($scope, Phone) {
  $scope.phones = Phone.query();
  $scope.orderProp = '*name*';
}
----

変更を保存すると、ブラウザにページが自動的に再ロードされます。リスト内の端末の順序が変更されたことを確認できます。


[start=3]
. JSテスト・ドライバ・サーバーが稼動中で、ステータス・メッセージがChromeブラウザ・ウィンドウに表示されていることを確認します。

[start=4]
. 「プロジェクト」ウィンドウでプロジェクトのノードを右クリックし、「テスト」を選択します。
image::images/html5-js-testdriver-testresultswindow-fail.png[title="「テスト結果」ウィンドウの失敗したテスト"]

テストを実行すると、期待される値"age"のかわりに値"name"が検出されたことを示すメッセージでテストの1つが失敗したことを確認できます。


[start=5]
. 「出力」ウィンドウの実行中のJS単体テスト・タブを開きます。
image::images/html5-js-testdriver-outputwindow-fail.png[title="「出力」ウィンドウの「実行中のJS単体テスト」タブの失敗したテスト"]

 ``orderProp`` が行41に ``age`` を期待していることをメッセージで確認できます。


[start=6]
. 実行中のJS単体テスト・タブのリンクをクリックして、失敗したテストの行に移動します。テスト・ファイル ``controllersSpec.js`` がエディタの行41 (*太字*)に開きます

[source,java]
----

it('should set the default value of orderProp model', function() {
      *expect(scope.orderProp).toBe('age');*
    });
----

テストでは ``scopeOrder.prop`` の値として"age"が期待されたことがわかります。


[start=7]
. テストが失敗した行(行41)にブレークポイントを設定します。

[start=8]
. 「プロジェクト」ウィンドウでプロジェクトのノードを右クリックし、「テスト」を選択します。

テストを再度実行すると、プログラム・カウンタがブレークポイントにヒットします。カーソルを ``scopeOrder.prop`` 上に移動すると、ブレークポイントにヒットしたときの変数の値が"name"であることをツールチップで確認できます。

image::images/html5-js-testdriver-evaluate.png[title="エディタ、「コードを評価」ウィンドウおよび「変数」ウィンドウを表示しているIDE"]

または、メイン・メニューの「デバッグ」→「式の評価」を選択して、「コードを評価」ウィンドウを開くことができます。ウィンドウに式 ``scopeOrder.prop`` を入力し、「コード・フラグメントを評価(Ctrl+Enter)」ボタン(image::images/evaluate-button.png[title="「式の評価」ボタン"])をクリックすると、デバッガによって式の値が「変数」ウィンドウに表示されます。


[start=9]
. ツールバーの「続行」をクリックして、テストの実行を終了します。


[[summary]]
== サマリー

このチュートリアルでは、JavaScriptファイルのデバッグおよび単体テストの実行に役立つツールをIDEがどのように提供するかについて学習しました。Chromeブラウザでアプリケーションを実行し、NetBeans Connector拡張機能が有効になっている場合、HTML5アプリケーションに対してデバッグが自動的に有効になります。IDEにより、JavaScriptファイルでJasmineテスト・フレームワークおよびJSテスト・ドライバ・サーバーを使用した単体テストを簡単に構成および実行することもできます。

link:/about/contact_form.html?to=3&subject=Feedback:%20Debugging%20and%20Testing%20JavaScript%20in%20HTML5%20Applications[+このチュートリアルに関するご意見をお寄せください+]


[[seealso]]
== 関連項目

IDEでのHTML5アプリケーションのサポートの詳細は、link:https://netbeans.org/[+netbeans.org+]で次のソースを参照してください。

* link:html5-gettingstarted.html[+HTML5アプリケーションの開始+]。ChromeのNetBeans Connector拡張機能をインストールし、単純なHTML5アプリケーションを作成および実行する方法を示すドキュメントです。
* link:html5-editing-css.html[+HTML5アプリケーションでのCSSスタイル・シートの操作+]。IDEでCSSのウィザードおよびウィンドウのいくつかを使用する方法、およびChromeブラウザの「検査」モードを使用してプロジェクト・ソース内の要素をビジュアルに特定する方法を示すドキュメントです。
* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG[+NetBeans IDEによるアプリケーションの開発ユーザーズ・ガイド+]のlink:http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm[+HTML5アプリケーションの開発+]

JSテスト・ドライバを使用した単体テストの実行の詳細は、次のドキュメントを参照してください。

* JSテスト・ドライバ・プロジェクト・ページ: link:http://code.google.com/p/js-test-driver/[+http://code.google.com/p/js-test-driver/+]
* Jasmineホーム・ページ: link:http://pivotal.github.com/jasmine/[+http://pivotal.github.com/jasmine/+]
* link:http://transitioning.to/2012/07/magnum-ci-the-jenkins-chronicles-1-intro-to-jstestdriver/[+JsTestDriverの概要+]。継続的インテグレーション・サーバーでのJsTestDriverの使用の概要。