| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>在 HTML5 应用程序中调试和测试 JavaScript - NetBeans 教程</title> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="A tutorial demonstrating support for debugging JavaScript and testing using JS Test Driver in the NetBeans IDE"> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, JavaScript, debugging, testing, HTML5, JS Test Driver"> |
| </head> |
| <body> |
| |
| <!-- |
| Copyright (c) 2013, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>在 HTML5 应用程序中调试和测试 JavaScript</h1> |
| |
| <p>NetBeans IDE 7.3 引入了新的项目类型用于帮助您开发 HTML5 应用程序。HTML5 应用程序通常结合了 HTML、CSS 和 JavaScript，用于创建在浏览器中运行并显示在多种设备（包括智能手机、平板电脑和笔记本电脑）上的应用程序。本文档说明了 IDE 如何为您提供工具来帮助您在 IDE 中调试和测试 JavaScript 文件。</p> |
| |
| <p>在 HTML5 应用程序中调试 JavaScript 文件时，建议安装用于 Chrome 浏览器的 NetBeans Connector 扩展。在浏览器中运行应用程序并且扩展已安装时，调试将自动启用。</p> |
| <p>通过 IDE 还可以方便地使用 Jasmine 测试框架和 JS 测试驱动程序服务器对 JavaScript 文件进行配置和运行单元测试。可以配置 JS 测试驱动程序对多种浏览器运行单元测试，可以快速指定需要 IDE 在运行测试时加载的 JavaScript 库、脚本和测试。测试失败时，可以使用调试器来帮助您查找有问题的代码。 |
| </p> |
| |
| <p class="tips">有关如何为 Chrome 浏览器安装 NetBeans Connector 扩展的详细信息，请参阅教程 <a href="html5-gettingstarted_zh_CN.html">HTML5 应用程序入门</a>。</p> |
| |
| <p class="tips">有关 IDE 中的 JavaScript 编辑功能概述，请参阅<a href="../ide/javascript-editor_zh_CN.html">在 NetBeans IDE 中编辑 JavaScript</a>。</p> |
| <p class="tips">要观看此教程的截屏视频，请参阅<a href="../../docs/web/html5-javascript-screencast.html">在 HTML5 应用程序中测试和调试 JavaScript 的视频</a>。</p> |
| |
| <h3>目录</h3> |
| <img alt="此页上的内容适用于 NetBeans IDE 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="此页上的内容适用于 NetBeans IDE 7.3"> |
| |
| <ul class="toc"> |
| <li><a href="#createproject">创建 NetBeans HTML5 应用程序</a></li> |
| <li><a href="#debugger">使用 JavaScript 调试器</a></li> |
| <li><a href="#unittest">运行 JS 单元测试</a></li> |
| <li><a href="#debugtest">调试 JS 单元测试</a></li> |
| <li><a href="#summary">小结</a></li> |
| <li><a href="#seealso">另请参见</a></li> |
| </ul> |
| |
| <h4>要完成本教程，需要使用以下资源。</h4> |
| |
| <table id="requiredSoftware"> |
| |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">软件或资源</th> |
| <th class="tblheader" scope="col">要求的版本</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE，Java</a></td> |
| <td class="tbltd1">7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java 开发工具包 (JDK)</a></td> |
| <td class="tbltd1">6 或 7</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.google.com/chrome">Chrome 浏览器</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon">用于 Chrome 的 NetBeans Connector 扩展</a></td> |
| <td class="tbltd1">1.0.0</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://code.google.com/p/js-test-driver/">JS 测试驱动程序 JAR</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">注：</strong></p> |
| |
| <ul> |
| <li>本文档使用 JS 测试驱动程序服务器来运行 JavaScript 单元测试。您可能需要通过 <a href="http://code.google.com/p/js-test-driver/">JS 测试驱动程序项目主页</a>来熟悉服务器的属性。</li> |
| |
| <li>本文档假定您具备 HTML、CSS 和 JavaScript 的一些基本知识或编程经验。</li> |
| </ul> |
| |
| |
| <!-- ++++++++++++++++ Creating the Application ++++++++++++++++ --> |
| <a name="createproject"></a> |
| <h2>创建 HTML5 示例应用程序</h2> |
| <p>执行以下步骤可以从站点模板创建 HTML5 示例应用程序。</p> |
| <ol> |
| <li>从主菜单中选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键；在 Mac 上为 ⌘-Shift-N 组合键），以打开新建项目向导。</li> |
| <li>在新建项目向导中展开 <strong>Samples</strong>（示例）节点，然后选择 <strong>HTML5</strong> 类别。</li> |
| <li>选择 <strong>AngularJS Phone Catalog Tutorial</strong>（AngularJS 电话目录教程）项目。单击 "Next"（下一步）。<br> <img alt="新建文件向导中示例项目的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-newproject.png" title="新建文件向导中 "AngularJS Phone Catalog Tutorial"（AngularJS 电话目录教程）示例项目"> |
| |
| </li> |
| <li>指定项目的位置。单击 "Finish"（完成）。 |
| |
| <p>单击 "Finish"（完成）时，IDE 将创建项目并在编辑器中打开 <tt>index.html</tt> 文件。在 "Projects"（项目）窗口中，可以看到项目包含 <tt>index.html</tt> 和各种 CSS 样式表、JavaScript 文件和库。 </p> |
| <img alt=""Projects"（项目）窗口项目节点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-projectswindow.png" title=""Projects"（项目）窗口中 "AngularJS Phone Catalog Tutorial"（AngularJS 电话目录教程）项目节点"> |
| |
| <p>该项目还包含多个默认生成的 JavaScript 单元测试和配置文件。 </p></li> |
| <li>确认在工具栏的下拉列表中选择了 "Chrome with NetBeans Integration"（带有 NetBeans 集成的 Chrome）。<br> <img alt="工具栏中下拉列表的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-selectbrowser.png" title="在工具栏下拉列表中选择的浏览器"></li> |
| <li>在工具栏中单击 "Run"（运行）按钮 (F6) 或者在 "Projects"（项目）窗口中右键单击项目节点并选择 "Run"（运行）。 </li> |
| </ol> |
| <p>运行项目时，HTML5 应用程序的首页在 Chrome 浏览器中打开，您可以查看手机列表。单击某个手机的名称时，页中将显示该手机的详细信息。</p> |
| <img alt="浏览器窗口中应用程序的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-runproject1.png" title="浏览器窗口中的 "AngularJS Phone Catalog Tutorial"（AngularJS 电话目录教程）应用程序"> |
| |
| <p>您可以看到，浏览器标签中有一个黄色的栏，通知您 NetBeans Connector 正在调试标签。在黄色栏可见时，IDE 和浏览器已连接，能够彼此通信。从 IDE 启动 HTML5 应用程序时，JavaScript 调试器将自动启用。将对文件所做的更改保存到 CSS 样式表时，您无需重新加载页，因为浏览器窗口将自动更新以显示更改。</p> |
| |
| <p class="alert">如果选择关闭黄色栏或者单击 "Cancel"（取消），您将断开 IDE 与浏览器之间的连接。如果断开了连接，则将需要重新从 IDE 运行 HTML5 应用程序才能使用 JavaScript 调试器。</p> |
| |
| <p>您还可以看到，NetBeans 图标在浏览器的 URL 位置字段中可见。您可以单击图标以打开提供了各种选项的菜单，用于更改浏览器的显示大小和启用在 NetBeans 中检查模式。</p> |
| |
| <!-- ++++++++++++++++ Using the JavaScript Debugger ++++++++++++++++ --> |
| |
| <a name="debugger"></a> |
| <h2>使用 JavaScript 调试器</h2> |
| <p>在本练习中，您将在 JavaScript 文件中放置一个断点并运行应用程序。您可以使用编辑器中的工具提示来快速查看变量的值。</p> |
| <ol> |
| <li>在“项目”窗口中展开 <tt>js</tt> 节点，然后双击 <tt>controllers.js</tt> 以在编辑器中打开该文件。</li> |
| <li>通过在 <tt>controllers.js</tt> 的第 16 行左边缘中单击来放置行断点。<br> <img alt="编辑器中设置的断点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint1.png" title="编辑器中设置的断点"> |
| <p>可以通过选择 "Window"（窗口）> "Debugging"（调试）> "Breakpoints"（断点）来打开 "Breakpoints"（断点）窗口，在其中查看断点。</p> |
| <img alt=""Breakpoints"（断点）窗口中断点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint2.png" title=""Breakpoints"（断点）窗口中的断点列表"> |
| |
| </li> |
| |
| <li>在工具栏中单击“运行”按钮可以再次运行项目。 |
| <p>运行项目时，您可以看到相同的页，因为没有命中您设置的断点。</p></li> |
| |
| <li>在浏览器中，单击页面中的一个条目，例如 Motorola Atrix4G。 |
| |
| <p>您可以看到，该页部分加载，但缺少电话的数据，因为数据未传递到 JavaScript 并呈现。</p> |
| <img alt="浏览器中 "Details"（详细信息）页的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-break-details.png" title="浏览器中部分加载了应用程序的 "Details"（详细信息）页"> |
| </li> |
| |
| <li>在 IDE 的编辑器中，您可以看到命中了断点，并且程序计数器当前位于 <tt>controllers.js</tt> 的第 16 行。</li> |
| <li>将光标悬停在 <tt>phone</tt> 变量上可查看有关变量信息的工具提示。<br> <img alt="编辑器中变量工具提示的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-variables1.png" title="编辑器中的变量工具提示"> |
| |
| <p>在工具提示中，可以看到以下信息：<tt>phone = (Resource) Resource</tt>。</p> |
| </li> |
| <li>单击工具提示可展开工具提示并查看变量和值的列表。<br> <img alt="编辑器中展开的变量工具提示的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-variables.png" title="编辑器中展开的变量工具提示"> |
| <p>例如，展开 <tt>android</tt> 节点时，您可以看到字符串 <tt>os</tt> 和 <tt>ui</tt> 的值。</p> |
| <p class="tips">还可以选择 "Window"（窗口）> "Debugging"（调试）> "Variables"（变量），在 "Variables"（变量）窗口中查看列表。</p></li> |
| |
| <li>使用工具栏中的步进按钮，可以逐步完成 <tt>angular.js</tt> 库中的 JavaScript 函数，或者单击 "Continue"（继续）按钮 (F5) 以继续应用程序。 </li> |
| </ol> |
| |
| |
| <!-- ++++++++++++++++ Running JS Unit Tests ++++++++++++++++ --> |
| <a name="unittest"></a> |
| <h2>运行 JS 单元测试</h2> |
| <p>使用 IDE 可以方便地配置 JS 测试驱动程序服务器来运行单元测试。在本教程中，您将使用包含示例项目的 JavaScript 单元测试并使用 Jasmine 测试框架。 |
| </p> |
| |
| <p>JS 测试驱动程序是一个服务器，为运行 JavaScript 单元测试提供作为目标的 URL。运行测试时，服务器将启动并等待运行测试。在浏览器窗口中，您可以看到绿色的状态消息，确认服务器正在运行并在等待。IDE 为 JS 测试驱动程序提供了确认对话框，可以从 "Services"（服务）的 "JS Test Driver"（JS 测试驱动程序）节点打开。使用确认对话框可以方便地指定 JS 测试驱动程序服务器 JAR 的位置以及要运行测试的浏览器。使用 JS 测试驱动程序节点可以快速查看服务器是否在运行以及启动和停止服务器。</p> |
| |
| <p>有关配置 JS 测试驱动程序服务器的详细信息，请参阅 <a href="http://code.google.com/p/js-test-driver/wiki/GettingStarted">JsTestDriver 入门</a>文档。</p> |
| |
| <ol> |
| <li>下载 <a href="http://code.google.com/p/js-test-driver/">JS 测试驱动程序 JAR</a> 并将 JAR 保存到本地系统。</li> |
| <li>在 "Services"（服务）窗口中，右键单击 "JS Test Driver"（JS 测试驱动程序）节点并选择 "Configure"（配置）。<br> <img alt=""Services"（服务）窗口中 "Configure jsTest Driver"（配置 jsTest 驱动程序）节点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-serviceswindow.png" title=""Services"（服务）窗口中的 "Configure jsTest Driver"（配置 jsTest 驱动程序）节点"></li> |
| <li>在 "Configure"（配置）对话框中，单击 "Browse"（浏览）并找到所下载的 JS 测试驱动程序 JAR。</li> |
| <li>选择 "Chrome with NetBeans JS Debugger"（带有 NetBeans JS 调试器的 Chrome）选项。单击 "OK"（确定）。<br> <img alt=""Configure jsTest Driver"（配置 jsTest 驱动程序）对话框的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-configure.png" title=""Configure jsTest Driver"（配置 jsTest 驱动程序）对话框"> |
| <p class="notes"><strong>注：</strong>只需要在首次配置 JS 测试驱动程序时指定 JS 测试驱动程序 JAR 的位置。</p> |
| |
| <p>可以捕获并用于测试的浏览器列表基于系统上已经安装的浏览器。可以选择多个浏览器作为从属浏览器，但要运行测试，必须为每个浏览器打开一个窗口，该窗口可以是服务器的从属窗口。从 IDE 启动服务器时，将自动捕获所选浏览器。</p> |
| </li> |
| <li>在项目窗口中，右键单击项目节点，然后选择 "New"（新建）> "Other"（其他）。</li> |
| <li>在 "Unit Tests"（单元测试）类别中，选择 <strong>jsTestDriver Configuration File</strong>（jsTestDriver 配置文件）。单击 "Next"（下一步）。</li> |
| <li>确认文件名为 <strong>jsTestDriver</strong>。</li> |
| <li>在 "Created File"（创建的文件）字段中，确认文件的位置是项目的 <tt>config</tt> 文件夹 (<tt>AngularJSPhoneCat/config/jsTestDriver.conf</tt>)。 |
| <p class="notes"><strong>注：</strong><tt>jsTestDriver.conf</tt> 配置文件必须位于项目的 <tt>config</tt> 文件夹中。如果所创建文件的位置不在 <tt>config</tt> 文件夹中，请单击 "Browse"（浏览）并在对话框中选择 <tt>AngularJSPhoneCat - Configuration Files（AngularJSPhoneCat - 配置文件）</tt>文件夹。</p> |
| </li> |
| <li>确认已经选中了下载 Jasmine 库的复选框。单击 "Finish"（完成）。<br> <img alt="“新建 jsTestDriver 配置文件”向导的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-configfile.png" title="“新建 jsTestDriver 配置文件”向导"> |
| |
| <p class="notes"><strong>注：</strong>需要下载 Jasmine 库以运行 jsTestDriver。如果系统通知您 IDE 无法下载 Jasmine 库，请在 "Options"（选项）窗口中检查 IDE 的代理设置。</p> |
| |
| <p>单击 "Finish"（完成）时，IDE 将生成框架 <tt>jsTestDriver.conf</tt> 配置文件并在编辑器中打开文件。在 "Projects"（项目）窗口中，可以看到配置文件创建在 "Configuration Files"（配置文件）节点下。如果在 "Unit Tests"（单元测试）节点下展开 <tt>lib</tt> 文件夹，则可以看到 Jasmine 库已添加到项目中。</p> |
| <img alt=""Projects"（项目）窗口中的 "Unit Tests"（单元测试）文件夹的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-projectswindow.png" title=""Projects"（项目）窗口中的 "Unit Tests"（单元测试）文件夹"> |
| <p>在编辑器中，可以看到默认情况下生成了以下配置文件内容：</p> |
| <pre class="examplecode">server: http://localhost:42442 |
| |
| load: |
| - test/lib/jasmine/jasmine.js |
| - test/lib/jasmine-jstd-adapter/JasmineAdapter.js |
| - test/unit/*.js |
| |
| exclude: |
| </pre> |
| <p>配置文件指定运行测试所用的本地服务器的默认位置。该文件还列出了必须加载的文件。默认情况下，列表包括 Jasmine 库和任何位于 <tt>unit</tt> 文件夹中的 JavaScript 文件。测试通常位于 <tt>unit</tt> 文件夹中，但您可以修改列表以指定运行测试所需加载的其他文件的位置。</p> |
| <p>AngularJS 电话目录教程项目的 <tt>unit</tt> 文件夹包含四个带有单元测试的 JavaScript 文件。</p> |
| <img alt=""Files"（文件）窗口中 "Unit Tests"（单元测试）文件夹的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-fileswindow.png" title=""Files"（文件）窗口中的 "Unit Tests"（单元测试）文件夹"> |
| <p>要运行单元测试，需要将您要测试的 JavaScript 文件的位置以及 Angular JavaScript 库添加到要加载的文件列表中。</p> |
| </li> |
| <li>将以下位置（<strong>粗体</strong>）添加到配置文件的 <tt>load</tt> 部分。保存所做的更改。 |
| |
| <pre class="examplecode"> |
| load: |
| - test/lib/jasmine/jasmine.js |
| - test/lib/jasmine-jstd-adapter/JasmineAdapter.js |
| - test/unit/*.js |
| <strong>- app/lib/angular/angular.js |
| - app/lib/angular/angular-*.js |
| - app/js/*.js |
| - test/lib/angular/angular-mocks.js</strong></pre> |
| </li> |
| <li>禁用在项目中设置的任意断点。 |
| <p>您可以在 "Breakpoints"（断点）窗口中取消选中断点的复选框以禁用断点。</p></li> |
| <li>在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Test"（测试）。 |
| |
| <p>单击 "Test"（测试）时，IDE 自动在 Chrome 浏览器中打开 JS 测试运行器，并在 "Output"（输出）窗口中打开两个标签。</p> |
| <img alt="jsTestDriver 在浏览器窗口中运行的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-browserwindow.png" title="jsTestDriver 在浏览器窗口中运行"> |
| <p>jsTestDriver 服务器运行时，Chrome 浏览器窗口将显示一条消息。可以看到服务器运行在 <tt>localhost:42442</tt>。在 "Output"（输出）窗口的 "js-test-driver Server"（js-test-driver 服务器）标签中，您可以查看服务器的状态。</p> |
| |
| <img alt=""Output"（输出）窗口的 "js-test-driver Server"（js-test-driver 服务器）标签的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputstatus.png" title=""Output"（输出）窗口的 "js-test-driver Server"（js-test-driver 服务器）标签"> |
| |
| <p class="notes"><strong>注：</strong>要运行单元测试，必须打开浏览器窗口并且 jsTestDriver 服务器必须正在运行。在 "Services"（服务）窗口中右键单击 "JS Test Driver"（JS 测试驱动器）节点，然后选择 "Start"（启动）可启动服务器并打开窗口。</p> |
| |
| <p>在 "Output"（输出）窗口的 "Running JS unit tests"（运行的 JS 单元测试）标签中，可以看到四个运行的测试的输出。测试位于 <tt>controllerSpec.js</tt> 和 <tt>filtersSpec.js</tt> 文件中。（<tt>unit</tt> 文件夹中的 <tt>servicesSpec.js</tt> 和 <tt>directivesSpec.js</tt> 文件没有任何测试。）</p> |
| |
| <img alt=""Output"（输出）窗口中 "Running JS unit tests"（运行的 JS 单元测试）标签的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow.png" title=""Output"（输出）窗口中 "Running JS unit tests"（运行的 JS 单元测试）标签"> |
| </li> |
| <li>在主菜单中选择 "Window"（窗口）> "Output"（输出）> "Test Results"（测试结果）以打开 "Test Results"（测试结果）窗口。 |
| <p>在窗口中，可以看到说明所有测试已通过的消息。</p> |
| <img alt=""Test Results"（测试结果）窗口的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-testresultswindow.png" title=""Test Results"（测试结果）窗口"> |
| |
| <p>可以在窗口的左边缘中单击绿色选中图标以查看已通过测试的展开列表。 </p></li> |
| </ol> |
| |
| |
| <!-- ++++++++++++++++ Debugging a JS Unit Test ++++++++++++++++ --> |
| <a name="debugtest"></a> |
| <h2>调试 JS 单元测试</h2> |
| |
| <p>此练习演示如何在单元测试失败时使用 IDE 来调试 JavaScript 文件。</p> |
| <ol> |
| <li>在“项目”窗口中展开 <tt>js</tt> 文件夹，然后双击 <tt>controllers.js</tt> 以在编辑器中打开该文件。</li> |
| <li>修改文件中的第 7 行，进行如下更改（以<strong>粗体</strong>显示）。保存所做的更改。 |
| <pre class="examplecode">function PhoneListCtrl($scope, Phone) { |
| $scope.phones = Phone.query(); |
| $scope.orderProp = '<strong>name</strong>'; |
| }</pre> |
| <p>保存更改时，浏览器中将自动重新加载页面。可以看到，列表中电话的顺序发生了更改。</p> |
| </li> |
| <li>确认 JS 测试驱动程序服务器正在运行，并且在 Chrome 浏览器窗口中可以看到状态消息。</li> |
| <li>在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Test"（测试）。<br> <img alt=""Test Results"（测试结果）窗口中的失败测试的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-testresultswindow-fail.png" title=""Test Results"（测试结果）窗口中的失败测试"> |
| <p>运行测试时，您可以看到有一个测试失败，消息显示出现值 "name" 而非所需的值 "age"。</p></li> |
| <li>在 "Output"（输出）窗口中打开 "Running JS unit tests"（运行的 JS 单元测试）标签。<br> <img alt=""Output"（输出）窗口 "Running JS unit tests"（运行的 JS 单元测试）标签中失败测试的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow-fail.png" title=""Output"（输出）窗口 "Running JS unit tests"（运行的 JS 单元测试）标签中失败的测试"> |
| <p>在消息中，您可以看到第 41 行的 <tt>orderProp</tt> 应为 <tt>age</tt>。</p> |
| </li> |
| <li>单击 "Running JS unit tests"（运行的 JS 单元测试）标签可导航到失败测试中的行。测试文件 <tt>controllersSpec.js</tt> 在编辑器中打开，位于第 41 行（<strong>粗体</strong>） |
| <pre class="examplecode">it('should set the default value of orderProp model', function() { |
| <strong>expect(scope.orderProp).toBe('age');</strong> |
| });</pre> |
| <p>可以看到，测试需要 "age" 作为 <tt>scopeOrder.prop</tt> 的值。</p> |
| </li> |
| <li>在测试失败的行设置断点 (第 41 行)。</li> |
| <li>在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Test"（测试）。 |
| <p>再次运行测试时，程序计数器命中了断点。如果将光标悬停在 <tt>scopeOrder.prop</tt> 上，则可以看到，命中断点时，工具提示中变量的值为 "name"。</p> |
| <img alt="IDE 显示编辑器、"Evaluate Code"（计算代码的值）窗口和 "Variables"（变量）窗口的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-evaluate.png" title="IDE 显示编辑器、"Evaluate Code"（计算代码的值）窗口和 "Variables"（变量）窗口"> |
| <p>此外，您还可以在主菜单中选择 "Debug"（调试）> "Evaluate Expression"（计算表达式的值）以打开 "Evaluate Code"（计算代码的值）窗口。如果在窗口中键入表达式 <tt>scopeOrder.prop</tt> 并单击 "Evaluate Code Fragment"（计算代码片段的值）按钮 (<img alt=""Evaluate Expression"（计算表达式的值）按钮" src="../../../images_www/articles/73/web/html5-js/evaluate-button.png" title=""Evaluate Expression"（计算表达式的值）按钮">) (Ctrl-Enter)，则调试器在 "Variables"（变量）窗口中显示表达式的值。</p> |
| </li> |
| <li>在工具栏中单击 "Continue"（继续）以完成运行测试。</li> |
| |
| </ol> |
| |
| |
| |
| <h2 id="summary">小结</h2> |
| |
| <p>在本教程中，您学习了如何利用 IDE 提供的工具来帮助您调试和运行 JavaScript 文件的单元测试。在 Chrome 浏览器中运行应用程序并且启用了 NetBeans Connector 扩展时，将自动为 HTML5 应用程序启动调试。通过 IDE 还可以方便地使用 Jasmine 测试框架和 JS 测试驱动程序服务器对 JavaScript 文件进行配置和运行单元测试。</p> |
| |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Debugging%20and%20Testing%20JavaScript%20in%20HTML5%20Applications">发送有关此教程的反馈意见</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <br> |
| <h2 id="seealso">另请参见</h2> |
| |
| <p>有关 <a href="https://netbeans.org/">netbeans.org</a> 中 HTML5 应用程序支持的详细信息，请参见以下资源：</p> |
| |
| <ul> |
| <li><a href="html5-gettingstarted_zh_CN.html">HTML5 应用程序入门</a>。此文档说明如何安装用于 Chrome 的 NetBeans Connector 扩展以及创建和运行简单 HTML5 应用程序。</li> |
| <li><a href="html5-editing-css_zh_CN.html">在 HTML5 应用程序中使用 CSS 样式表</a>。该文档说明如何在 IDE 中使用部分 CSS 向导和窗口，以及如何在 Chrome 浏览器中使用检测模式以直观地在项目源代码中查找元素。</li> |
| <li><a href="../ide/javascript-editor_zh_CN.html">编辑 JavaScript</a>。介绍 IDE 提供的基本 JavaScript 编辑功能的文档。</li> |
| </ul> |
| |
| <p>有关使用 JS 测试驱动程序运行单元测试的详细信息，请参阅以下文档：</p> |
| |
| <ul> |
| <li>JS 测试驱动程序项目页：<a href="http://code.google.com/p/js-test-driver/">http://code.google.com/p/js-test-driver/</a></li> |
| <li>Jasmine 主页：<a href="http://pivotal.github.com/jasmine/">http://pivotal.github.com/jasmine/</a></li> |
| <li><a href="http://transitioning.to/2012/07/magnum-ci-the-jenkins-chronicles-1-intro-to-jstestdriver/">JsTestDriver 简介</a>。将 JsTestDriver 用于持续集成服务器的简介。</li> |
| </ul> |
| |
| |
| </body> |
| </html> |
