Google Git
Sign in
apache / netbeans-website-cleanup / refs/heads/asciidoc-features / . / src / content / kb / docs / webclient / html5-js-support_zh_CN.html
blob: 6e3ae98a74ad06782ff42296014ab0381c634c72 [file] [log] [blame]
<!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>
HTML5 应用程序通常结合了 HTML、CSS 和 JavaScript，用于创建在浏览器中运行并显示在多种设备（包括智能手机、平板电脑和笔记本电脑）上的应用程序。本文档说明了 IDE 如何为您提供工具来帮助您在 IDE 中调试和测试 JavaScript 文件。</p>
<p>在 HTML5 应用程序中调试 JavaScript 文件时，建议安装用于 Chrome 浏览器的 NetBeans Connector 扩展。在浏览器中运行应用程序并且扩展已安装时，调试将自动启用。</p>
<p>通过 IDE 还可以方便地使用 Jasmine 测试框架和 Karma 或 JS 测试驱动程序测试运行器对 JavaScript 文件进行配置和运行单元测试。可以配置测试运行器对多种浏览器运行单元测试，可以快速指定需要 IDE 在运行测试时加载的 JavaScript 库、脚本和测试。测试失败时，可以使用调试器来帮助您查找有问题的代码。
</p>
<p class="tips">有关如何为 Chrome 浏览器安装 NetBeans Connector 扩展的详细信息，请参阅教程 <a href="html5-gettingstarted.html">HTML5 应用程序入门</a>。</p>
<p class="tips">有关 IDE 中的 JavaScript 编辑功能的更多信息，请参见《<a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG">使用 NetBeans IDE 开发应用程序用户指南</a>》中的<a href="http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm#BACFIFIG">创建 JavaScript 文件</a>。</p>
<p class="tips">要观看此教程的截屏视频，请参阅<a href="../web/html5-javascript-screencast.html">在 HTML5 应用程序中测试和调试 JavaScript 的视频</a>。</p>
<h3>目录</h3>
<img alt="此页上的内容适用于 NetBeans IDE 8.0" class="stamp" src="../../../images_www/articles/80/netbeans-stamp.png" title="此页上的内容适用于 NetBeans IDE 8.0">
<ul class="toc">
<li><a href="#createproject">创建 NetBeans HTML5 应用程序</a></li>
<li><a href="#debugger">使用 JavaScript 调试器</a></li>
<li><a href="#unittests">运行 JS 单元测试</a>
<ul>
<li><a href="#karmatests">如何使用 Karma 运行测试</a>
<li><a href="#jstestdriver">如何使用 JS 测试驱动程序运行测试</a>
</ul>
</li>
<li><a href="#debugtest">使用 JS 测试驱动程序调试 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">8.0</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">7 或 8</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.x</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="新建文件向导中 &amp;quot;AngularJS Phone Catalog Tutorial&amp;quot;（AngularJS 电话目录教程）示例项目">
</li>
<li>指定项目的位置。单击 "Finish"（完成）。
<p class="notes"><strong>注：</strong>请注意，模板的 URL 为 github。IDE 需要能够访问该网络来检索模板档案。如果您在下载档案时遇到问题，请在 "Options"（选项）窗口中检查代理设置。</p>
<p>单击 "Finish"（完成）时，IDE 将创建项目并在编辑器中打开 <tt>index.html</tt> 文件。在 "Projects"（项目）窗口中，可以看到项目包含 <tt>index.html</tt> 和各种 CSS 样式表、JavaScript 文件和库。 </p>
<img alt="&amp;quot;Projects&amp;quot;（项目）窗口项目节点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-projectswindow.png" title="&amp;quot;Projects&amp;quot;（项目）窗口中 &amp;quot;AngularJS Phone Catalog Tutorial&amp;quot;（AngularJS 电话目录教程）项目节点">
<p>该项目还包含多个默认生成的 JavaScript 单元测试和配置文件。 </p></li>
<li>确认在工具栏的下拉列表中选择了 "Chrome with NetBeans Connector"（包含 NetBeans Connector 的 Chrome）。<br> <img alt="工具栏中下拉列表的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/74/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="浏览器窗口中的 &amp;quot;AngularJS Phone Catalog Tutorial&amp;quot;（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="&amp;quot;Breakpoints&amp;quot;（断点）窗口中断点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint2.png" title="&amp;quot;Breakpoints&amp;quot;（断点）窗口中的断点列表">
</li>
<li>在工具栏中单击“运行”按钮可以再次运行项目。
<p>运行项目时，您可以看到相同的页，因为没有命中您设置的断点。</p></li>
<li>在浏览器中，单击页面中的一个条目，例如 Motorola Atrix4G。
<p>您可以看到，该页部分加载，但缺少电话的数据，因为数据未传递到 JavaScript 并呈现。</p>
<img alt="浏览器中 &amp;quot;Details&amp;quot;（详细信息）页的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-break-details.png" title="浏览器中部分加载了应用程序的 &amp;quot;Details&amp;quot;（详细信息）页">
</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="unittests"></a>
<h2>运行 JS 单元测试</h2>
<p>可以轻松地将 IDE 配置为使用 Karma 或 JS 测试驱动程序测试运行器来运行单元测试。Karma 和 JS 测试驱动程序是提供 URL 的测试运行器，该 URL 是用于运行 JavaScript 单元测试的目标。</p>
<p>在本教程中，您将使用 Karma 运行随样例项目一起包括的 JavaScript 单元测试。样例项目中已含 Karma 配置文件。运行测试时，测试运行器服务器将启动并等待运行测试。您的浏览器将打开并在窗口中显示一条状态消息，确认服务器正在运行并在等待。</p>
<a name="karmatests"></a>
<div class="indent">
<h3>如何使用 Karma 运行测试</h3>
<p>要使用 Karma 运行测试，您首先需要将 Karma 下载到您的本地文件系统中。安装 Karma 后，您需要创建 Karma 配置文件，然后在 "Project Properties"（项目属性）窗口中指定安装和配置文件的位置。</p>
<ol>
<li>安装 Karma。
<p>可以选择 Karma 的安装方式和位置。稍后在配置项目以使用 Karma 时，将指定安装。可以在 <a href="http://karma-runner.github.io">Karma Web 站点</a>上查找有关用于安装 Karma 的选项的信息。</p></li>
<li>创建 Karma 配置文件。
<p>在本教程中，此步骤是可选的，因为样例应用程序已含 Karma 配置文件。可以通过在新建文件向导的 "Unit Tests"（单元测试）类别中选择 "Karma Configuration File"（Karma 配置文件）来创建框架 Karma 配置文件。</p>
<img alt="新建文件向导中的 &amp;quot;New Karma Configuration File&amp;quot;（新建 Karma 配置文件）的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-new-config.png" title="新建文件向导中的 &amp;quot;New Karma Configuration File&amp;quot;（新建 Karma 配置文件）">
<p>或者，也可以在命令行上运行 Karma <tt>init</tt> 命令。有关使用 Karma <tt>init</tt> 命令的详细信息，请参见 Karma 文档。</p>
</li>
<li>在 "Projects"（项目）窗口中展开 "Configuration Files"（配置文件）节点，然后双击 <tt>karma.conf.js</tt> 在编辑器中打开该文件。请注意，样例包括两个 Karma 配置文件。
<p>在 Karma 配置文件中，可以查看在运行测试时将包含和排除的文件。还可以查看使用此配置运行测试时所需的 Karma 插件。</p>
<img alt="编辑器中的 Karma 配置文件的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-plugins.png" title="编辑器中的 Karma 配置文件"></li>
<li>在 "Projects"（项目）窗口中右键单击项目节点，然后在弹出式菜单中选择 "Properties"（属性）。</li>
<li>在 "Project Properties"（项目属性）窗口的 "Categories"（类别）窗格中选择 "JavaScript Testing"（JavaScript 测试）类别。</li>
<li>在 "Testing Provider"（测试提供器）下拉列表中选择 "Karma"。单击 "OK"（确定）。</li>
<li>再次打开 "Project Properties"（项目属性）窗口，然后在 "Categories"（类别）窗格中的 "JavaScript Testing"（JavaScript 测试）类别下选择 "Karma"。</li>
<li>指定 Karma 的安装位置。
<p>如果您已在项目目录中安装 Karma，则可以单击 "Search"（搜索），IDE 将查找该安装。您还可以单击 "Browse"（浏览）以手动查找本地 Karma 安装。</p>
</li>
<li>指定 Karma 配置文件的位置。单击 "OK"（确定）。
<p>在本教程中，您可以单击 "Search"（搜索），IDE 将查找默认 Karma 配置文件。您还可以单击 "Browse"（浏览）以手动查找配置文件。</p>
<img alt="&amp;quot;Project Properties&amp;quot;（项目属性）窗口中的 &amp;quot;Karma&amp;quot; 类别的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-properties-window.png" title="&amp;quot;Project Properties&amp;quot;（项目属性）窗口中的 &amp;quot;Karma&amp;quot; 类别">
<p>单击 "OK"（确定）时，您可以看到 "Karma" 节点显示在 "Projects"（项目）窗口中的项目节点下方。右键单击 "Karma" 节点，启动和停止 Karma 服务器，并在弹出式菜单中设置配置文件。</p>
</li>
<li>在 "Projects"（项目）窗口中右键单击 "Karma" 节点，然后在弹出式菜单中选择 "Start"（启动）。
<p>单击 "Start"（启动）时，Karma 服务器将启动，并且浏览器窗口将打开以显示服务器状态。</p>
<img alt="Chrome 浏览器窗口中的 Karma 服务器状态的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-chrome.png" title="Chrome 浏览器窗口中的 Karma 服务器状态">
<p>在 "Output"（输出）窗口中，您可以查看服务器状态。系统还会提示您安装任何缺少的插件。</p>
<img alt="&amp;quot;Services&amp;quot;（服务）窗口中 &amp;quot;Configure jsTest Driver&amp;quot;（配置 jsTest 驱动程序）节点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-output1.png" title="&amp;quot;Services&amp;quot;（服务）窗口中的 &amp;quot;Configure jsTest Driver&amp;quot;（配置 jsTest 驱动程序）节点">
<p class="notes"><strong>注：</strong>要运行单元测试，必须打开浏览器窗口并且 Karma 服务器必须正在运行。</p>
</li>
<li>右键单击 "Karma" 节点并选择 "Set Configuration"（设置配置）> <tt>karma.conf.js</tt> 以确认选择了正确的配置文件。<img alt="&amp;quot;Services&amp;quot;（服务）窗口中 &amp;quot;Configure jsTest Driver&amp;quot;（配置 jsTest 驱动程序）节点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-node.png" title="&amp;quot;Services&amp;quot;（服务）窗口中的 &amp;quot;Configure jsTest Driver&amp;quot;（配置 jsTest 驱动程序）节点"></li>
<li>禁用在项目中设置的任意断点。
<p>您可以在 "Breakpoints"（断点）窗口中取消选中断点的复选框以禁用断点。</p></li>
<li>在 "Projects"（项目）窗口中右键单击项目节点，然后选择 "Test"（测试）。
<p>选择 "Test"（测试）时，测试运行器将对文件运行单元测试。IDE 将打开 "Test Results"（测试结果）窗口并显示测试的结果。</p>
<img alt="&amp;quot;Test Results&amp;quot;（测试结果）窗口的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/karma-test-results.png" title="Karma 测试结果">
</li>
</ol>
<a name="jstestdriver"></a>
<h3>如何使用 JS 测试驱动程序运行测试</h3>
<p>如果要使用 JS 测试驱动程序，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="&amp;quot;Services&amp;quot;（服务）窗口中 &amp;quot;Configure jsTest Driver&amp;quot;（配置 jsTest 驱动程序）节点的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/74/web/html5-js/html5-js-testdriver-serviceswindow.png" title="&amp;quot;Services&amp;quot;（服务）窗口中的 &amp;quot;Configure jsTest Driver&amp;quot;（配置 jsTest 驱动程序）节点"></li>
<li>在 "Configure"（配置）对话框中，单击 "Browse"（浏览）并找到所下载的 JS 测试驱动程序 JAR。</li>
<li>为浏览器选择 "Chrome with NetBeans Connector"（包含 NetBeans Connector 的 Chrome）（在 NetBeans IDE 7.3 中，选择 "Chrome with NetBeans JS Debugger"（包含 NetBeans JS 调试器的 Chrome））。单击 "OK"（确定）。<br> <img alt="&amp;quot;Configure jsTest Driver&amp;quot;（配置 jsTest 驱动程序）对话框的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/74/web/html5-js/html5-js-testdriver-configure.png" title="&amp;quot;Configure jsTest Driver&amp;quot;（配置 jsTest 驱动程序）对话框">
<p class="notes"><strong>注：</strong>只需要在首次配置 JS 测试驱动程序时指定 JS 测试驱动程序 JAR 的位置。</p>
<p>可以捕获并用于测试的浏览器列表基于系统上已经安装的浏览器。可以选择多个浏览器作为从属浏览器，但要运行测试，必须为每个浏览器打开一个窗口，该窗口可以是服务器的从属窗口。从 IDE 启动服务器时，将自动捕获所选浏览器。</p>
<p>选择 "Chrome with NetBeans Connector"（包含 NetBeans Connector 的 Chrome）时，可以调试使用 JS 测试驱动程序运行的测试。</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="&amp;quot;Projects&amp;quot;（项目）窗口中的 &amp;quot;Unit Tests&amp;quot;（单元测试）文件夹的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-projectswindow.png" title="&amp;quot;Projects&amp;quot;（项目）窗口中的 &amp;quot;Unit Tests&amp;quot;（单元测试）文件夹">
<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> 文件夹中，但您可以修改列表以指定运行测试所需加载的其他文件的位置。要运行单元测试，需要将您要测试的 JavaScript 文件的位置以及 Angular JavaScript 库添加到要加载的文件列表中。</p>
<p>对于本教程，如果要使用 JS 测试驱动程序运行测试，您需要将以下文件（粗体）添加到加载的文件列表中。</p>
<pre class="examplecode">load:
- test/lib/jasmine/jasmine.js
- test/lib/jasmine-jstd-adapter/JasmineAdapter.js
<strong>
- 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
</strong>
- test/unit/*.js</pre>
</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>
<p>请注意，JsTestDriver 正在浏览器标签中运行并且 NetBeans Connector 正在调试该标签。如果使用 JS 测试驱动程序运行单元测试并选择 "Chrome with NetBeans Connector"（包含 NetBeans Connector 的 Chrome）作为目标浏览器之一，则可以调试单元测试。</p>
<img alt="&amp;quot;Output&amp;quot;（输出）窗口的 &amp;quot;js-test-driver Server&amp;quot;（js-test-driver 服务器）标签的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputstatus.png" title="&amp;quot;Output&amp;quot;（输出）窗口的 &amp;quot;js-test-driver Server&amp;quot;（js-test-driver 服务器）标签">
<p class="notes"><strong>注：</strong>要运行单元测试，必须打开浏览器窗口并且 jsTestDriver 服务器必须正在运行。在 "Services"（服务）窗口中右键单击 "JS Test Driver"（JS 测试驱动器）节点，然后选择 "Start"（启动）可启动服务器并打开窗口。</p>
<img alt="&amp;quot;Output&amp;quot;（输出）窗口中 &amp;quot;Running JS unit tests&amp;quot;（运行的 JS 单元测试）标签的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow.png" title="&amp;quot;Output&amp;quot;（输出）窗口中 &amp;quot;Running JS unit tests&amp;quot;（运行的 JS 单元测试）标签">
</li>
<li>在主菜单中选择 "Window"（窗口）> "Output"（输出）> "Test Results"（测试结果）以打开 "Test Results"（测试结果）窗口，并查看测试的结果。<br> <img alt="&amp;quot;Test Results&amp;quot;（测试结果）窗口的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/80/webclient/html5-js/html5-js-testdriver-testresultswindow.png" title="&amp;quot;Test Results&amp;quot;（测试结果）窗口">
<p>可以在窗口的左边缘中单击绿色选中图标以查看已通过测试的展开列表。 </p></li>
</ol>
</div>
<!-- ++++++++++++++++ Debugging a JS Unit Test ++++++++++++++++ -->
<a name="debugtest"></a>
<h2>使用 JS 测试驱动程序调试 JS 单元测试</h2>
<p>本练习演示如何使用 IDE 和 JS 测试驱动程序调试单元测试。</p>
<p class="notes"><strong>注：</strong>NetBeans IDE 8.0 不支持调试使用 Karma 测试运行器运行的测试。</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="&amp;quot;Test Results&amp;quot;（测试结果）窗口中的失败测试的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-testresultswindow-fail.png" title="&amp;quot;Test Results&amp;quot;（测试结果）窗口中的失败测试">
<p>运行测试时，您可以看到有一个测试失败，消息显示出现值 "name" 而非所需的值 "age"。</p></li>
<li>在 "Output"（输出）窗口中打开 "Running JS unit tests"（运行的 JS 单元测试）标签。<br> <img alt="&amp;quot;Output&amp;quot;（输出）窗口 &amp;quot;Running JS unit tests&amp;quot;（运行的 JS 单元测试）标签中失败测试的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow-fail.png" title="&amp;quot;Output&amp;quot;（输出）窗口 &amp;quot;Running JS unit tests&amp;quot;（运行的 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 显示编辑器、&amp;quot;Evaluate Code&amp;quot;（计算代码的值）窗口和 &amp;quot;Variables&amp;quot;（变量）窗口的屏幕快照" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-evaluate.png" title="IDE 显示编辑器、&amp;quot;Evaluate Code&amp;quot;（计算代码的值）窗口和 &amp;quot;Variables&amp;quot;（变量）窗口">
<p>此外，您还可以在主菜单中选择 "Debug"（调试）> "Evaluate Expression"（计算表达式的值）以打开 "Evaluate Code"（计算代码的值）窗口。如果在窗口中键入表达式 <tt>scopeOrder.prop</tt> 并单击 "Evaluate Code Fragment"（计算代码片段的值）按钮 (<img alt="&amp;quot;Evaluate Expression&amp;quot;（计算表达式的值）按钮" src="../../../images_www/articles/73/web/html5-js/evaluate-button.png" title="&amp;quot;Evaluate Expression&amp;quot;（计算表达式的值）按钮">) (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&amp;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.html">HTML5 应用程序入门</a>。此文档说明如何安装用于 Chrome 的 NetBeans Connector 扩展以及创建和运行简单 HTML5 应用程序。</li>
<li><a href="html5-editing-css.html">在 HTML5 应用程序中使用 CSS 样式表</a>。该文档说明如何在 IDE 中使用部分 CSS 向导和窗口，以及如何在 Chrome 浏览器中使用检测模式以直观地在项目源代码中查找元素。</li>
<li>《<a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG">使用 NetBeans IDE 开发应用程序用户指南</a>》中的<a href="http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm">开发 HTML5 应用程序</a>一章 </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>