corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

JavaScript 调试器用户指南

NetBeans JavaScript 调试器提供了一组工具,可帮助您完成检查、监视和编辑 JavaScript 代码的过程。利用调试器,可以标识错误,或者逐步执行代码并浏览任意给定时刻的应用程序状态。您还可以使用任意数量的调试窗口,以便提供直观的界面来检查变量和表达式值、线程、会话和断点等。

对于 Firefox 和 Internet Explorer,NetBeans JavaScript 调试器提供了相同的用户体验。对 Firefox 的调试器支持基于 Firebug;而对 Internet Explorer 的调试器支持基于活动脚本调试器框架

目录

本页上的内容适用 NetBeans IDE 6.5

要学习本文档,您需要具备以下软件和资源。

软件或资源 要求的版本
NetBeans IDE Java、PHP 或 Ruby 下载包,版本 6.5
Java Development Kit (JDK) 版本 5 或更高版本
NetBeans Firefox 或 IE 扩展(自动安装 版本 0.6
用于 Firefox 的 Firebug 附加软件(自动安装

用于 IE 的活动脚本调试器框架
版本 1.2
 
v1.0a

注意:

  • Firebug 附加软件和 NetBeans 扩展包含在 IDE 中。在首次运行调试器时,IDE 将检查浏览器中是否具有该附加软件和扩展,否则将在浏览器中安装它们。如果使用的是 Internet Explorer,IDE 将提示您下载并安装活动脚本调试器框架
  • NetBeans JavaScript 调试器与 Internet Explorer 版本 6 和 7 以及 Firefox 版本 2.0.0.x 和 3 兼容。
  • 对于 Internet Explorer 用户,该调试器在 Windows XP SP2 和 Vista 中受支持。

启用和禁用调试器

缺省情况下,JavaScript 调试器在 IDE 中处于禁用状态。不过,在首次启动调试器时,IDE 将会显示一个对话框,您可以在其中为浏览器激活调试器。

在任何时候,您都可以从“项目属性”窗口中激活或禁用调试器。

  1. 在“项目”窗口中,右键单击项目,然后选择“属性”。
  2. 在“项目属性”对话框中,选择“调试”类别。
  3. 选中/取消选中“调试 Web 应用程序(客户端 JavaScript)”选项。
  4. 如果选中该选项,请选择打算使用的浏览器("Firefox" 或 "Internet Explorer")。
    “项目属性”中显示的 JavaScript 调试器选项
  5. 单击“确定”以关闭该窗口。

注意:可以同时运行服务器端和客户端调试器。您可以使用“会话”窗口在调试会话之间切换。如果运行两个会话并且要终止这些会话,您需要单击调试器工具栏中的完成会话 (完成会话按钮) 按钮,单击次数视运行的会话数量而定。


首次启动调试器

在首次运行调试器时,IDE 将先检查是否在浏览器中安装了相应的资源和扩展。

Internet Explorer

  1. 在“项目”窗口中,右键单击项目并选择“调试”以启动调试器。
  2. 在显示的对话框中,选择“服务器端 Java,并在选定的浏览器中调试客户端 JavaScript”选项。然后,选择 "Internet Explorer"。
    用于指定服务器端和/或客户端调试的对话框

    注意:以后,也可以在项目的“属性”对话框(在“项目”窗口中,右键单击项目节点,然后选择“属性”)中禁用服务器端或客户端调试器。请参见启用和禁用调试器

  3. 单击“调试”。在为 Internet Explorer 选择客户端调试选项并单击“调试”时,IDE 先要确保已安装了活动脚本调试器框架。如果未安装该框架,则会提示您下载并安装它。
    提示安装活动脚本调试器框架的对话框
    将启动浏览器并显示 Microsoft Web 站点上可下载该框架的位置。下载并安装该框架。
  4. 在收到已安装活动脚本调试器框架的确认消息后,返回至 IDE,然后单击“确定”。IDE 将检查是否在浏览器中注册了 NetBeans Internet Explorer 扩展。如果未注册,则会显示一个对话框,提示您允许 IDE 安装 NetBeans Internet Explorer 扩展。
  5. 单击“确定”。IDE 将在浏览器中注册该扩展,启动调试会话,然后在浏览器中显示运行调试会话的应用程序的欢迎页面。
  6. 将焦点返回至 IDE。将在编辑器上方显示调试器工具栏。当代码暂停时,将会激活工具栏的所有图标。在 IDE 的编辑器中将打开项目索引页。

    缺省情况下,将在 IDE 的下面区域中激活多个窗口,其中包括“监视”、“局部变量”和“调用栈”窗口。调试器控制台最初显示在“输出”窗口中,指示已启动调试会话。在调试会话期间,可以使用调试器控制台显示计算错误、抛出的异常以及其他信息。
    显示调试器控制台的“输出”窗口

Firefox

  1. 在“项目”窗口中,右键单击项目并选择“调试”以启动调试器。
  2. 在显示的对话框中,选择“服务器端 Java,并在选定的浏览器中调试客户端 JavaScript”选项。然后,选择 "Firefox"。
    用于指定服务器端和/或客户端调试的对话框

    注意:以后,也可以在项目的“属性”对话框(在“项目”窗口中,右键单击项目节点,然后选择“属性”)中禁用服务器端或客户端调试器。请参见启用和禁用调试器

  3. 单击“调试”。在为 Firefox 选择客户端调试选项并单击“调试”时,IDE 将确保在 Firefox 中安装了 Firebug 附加软件和 NetBeans Firefox 扩展。如果未安装该附加软件和扩展,IDE 将尝试安装它们。
    通知 Firefox 所需的其他附加软件的对话框

    先确保已关闭 Firefox,然后再单击“确定”。如果未将其关闭,则无法在附加软件和扩展处于激活状态的情况下装入浏览器,此时您需要手动重新启动浏览器,然后再次运行调试器。

  4. 单击“确定”。将安装两个组件并启动浏览器,其中显示了运行调试会话的应用程序的欢迎页面。

    在成功安装 Firebug 和 NetBeans Firefox 扩展后,将在 Firefox 浏览器的右下角显示其图标:
    • Firebug:Firebug 图标
    • NetBeans Firefox 扩展:NetBeans Firefox 扩展图标

    通过单击 NetBeans Firefox 扩展图标,可以查看包含扩展详细信息的对话框。

    显示 NetBeans Firefox 扩展详细信息的对话框
  5. 将焦点返回至 IDE。将在编辑器上方显示调试器工具栏。当代码暂停时,将会激活工具栏的所有图标。在 IDE 的编辑器中将打开项目索引页。

    缺省情况下,将在 IDE 的下面区域中激活多个窗口,其中包括“监视”、“局部变量”和“调用栈”窗口。调试器控制台最初显示在“输出”窗口中,指示已启动调试会话。在调试会话期间,可以使用调试器控制台显示计算错误、抛出的异常以及其他信息。
    显示调试器控制台的“输出”窗口

运行调试器

可以针对某个项目或单个文件启动调试会话。如果具有 Internet 连接,还可以在线将调试器指向任何 URL,并检查公开发布的 JavaScript 资源。

调试项目

可以针对整个项目运行 JavaScript 调试器。

  1. 在“项目”窗口中右键单击项目节点,然后选择“调试”。如果未暂停调试器,则会在编辑器中打开索引文件。

注意:如果将要调试的项目设置为主项目,您还可以从 IDE 主菜单中选择“调试”>“调试主项目”,或者在主工具栏中选择调试项目图标 (调试项目图标)。要设置主项目,请右键单击要设置的项目,然后选择“设置为主项目”。

调试文件

可以针对单个文件运行调试器,如 HTML 或 JSP 文件。

  1. 在“项目”窗口中右键单击文件,然后选择“调试文件”。同样,也可以从 IDE 主菜单中选择“调试”>“调试文件”。如果未暂停调试器,则会在编辑器中打开所调试的文件。

调试外部源代码

如果已连接到 Internet,则可以针对外部 URL 运行调试器。这样,您就可以查看并检查公开发布的页面中包含的 JavaScript 代码。

  1. 从 IDE 主菜单中选择“调试”>“连接调试器”。
  2. 在“连接调试器”对话框中,从“调试器”下拉列表中选择“Web 页调试器 (JavaScript)”。
  3. 输入要运行调试器的页面 URL,然后单击“确定”。

    显示样例 URL 的“连接调试器”对话框

在调试外部源代码时,可以使用“源”窗口查看使用的所有资源的 URL 路径。此外,还可以使用编辑器和工具栏逐步执行和逐行检查代码。


使用工具栏和编辑器

可以使用编辑器来查看文件内容。因此,在进行调试时,编辑器以及调试器工具栏可为您提供在执行期间逐步执行代码的功能,以便查看文件内容如何影响在浏览器中执行的操作。

注意:通过服务器端脚本技术(如 ASP、JSP、PHP 和 Ruby)生成的页面以只读格式([r/o],如编辑器中打开的文件标签中所示)呈现。服务器端脚本动态地准备在客户端浏览器中显示的内容。IDE 的编辑器将根据浏览器高速缓存中的内容显示这些文件。

使用调试器工具栏

在运行调试会话时,将在编辑器上方显示调试器工具栏。根据是否配置调试器在某些情况下暂停(可以在“选项”窗口中指定调试设置,请参见配置调试器),将在活动状态或暂停状态下显示工具栏。

活动状态: 活动状态下的调试器工具栏
调试会话处于活动状态,并且调试窗口包含基于浏览器中装入的文件和脚本状态的数据。可以单击“暂停”,在下一个 JavaScript 调用处暂停调试器。
暂停状态: 暂停状态下的调试器工具栏
已暂停调试会话。如果在文件中的特定位置停止执行,编辑器将在左旁注中使用绿色背景的箭头标记 (箭头标记) 指示其行位置。可以使用工具栏来逐步执行代码。

工具栏提供了以下操作:

完成会话 (完成调试会话按钮) 完成调试会话
暂停 (“暂停”按钮) 暂停调试会话
继续 (“继续”按钮) 继续调试会话
步过 (“步过”按钮) 越过执行语句
步入 (“步入”按钮) 步入函数调用
步出 (“步出”按钮) 步出当前函数调用
运行至光标位置 (“运行至光标位置”按钮) 运行至光标位置

注意:对于 Internet Explorer,当某一行中包含多个 JavaScript 语句时,如果选择“步过”,则会导致移至同一行中的下一个语句。对于 Firefox,调试器将执行给定行中的所有语句,然后移至下一行。

设置断点

在文件中设置断点,以便在执行期间通知调试器停止的位置。可以在 HTML 和 JavaScript 文件中设置断点。也可以在 IDE 从浏览器高速缓存中访问的任何只读 ([r/o]) 文件的 JavaScript 代码中设置断点。

要设置断点,请在编辑器中单击要设置断点的行的左旁注处。

在编辑器中设置的断点

通过单击断点标记 (断点标记),可以删除断点。

此外,还可以暂时禁用断点。要执行此操作,请右键单击断点标记,然后选择“断点”>“✓ 启用”。这会将断点切换到禁用状态,从而导致在左旁注中显示灰色标记 (断点标记)。

如果调试器在执行时遇到断点,它将在断点处停止,以便您在调试窗口中检查变量,然后逐步执行断点后面的任何代码。

在断点处暂停调试器

此外,还可以通过设置命中计数和/或条件表达式来定制断点,以便仅在符合命中计数或条件表达式计算结果为 true 时,调试器才会在断点处停止。下面的“断点”窗口中也提供了定制断点的说明。要定制断点,请右键单击编辑器左旁注中的断点标记,然后选择“断点”(或“禁用的断点”)>“属性”。

在编辑器中设置的禁用断点

检查工具提示

在调试会话期间暂停调试器时,可以在编辑器中将鼠标悬停在 JavaScript 标识符上以显示工具提示。如果该标识符在选定调用栈框架中有效,则会显示其值。此外,还可以选择 JavaScript 表达式。这些表达式的值将显示在工具提示中。

编辑器中显示的工具提示

检查调试器窗口

IDE 提供了一些窗口,作为 JavaScript 调试器的一个组成部分。在运行调试会话时,可以在调试器窗口中跟踪逐步执行代码时的变量和表达式值,检查执行线程的调用栈,验证源 URL 以及在会话之间切换(如果正在运行并发调试会话)。

可以从 IDE 的“窗口”>“调试”菜单中访问所有调试器窗口。在调试会话处于活动状态后,便可以开始使用调试器窗口。

从 IDE 主菜单中访问的调试器菜单

“会话”窗口

“会话”窗口显示当前处于活动状态的所有调试会话。在启动 JavaScript 调试会话时,可以在“会话”窗口中看到 JavaScript 调试器条目。

显示 Firefox 调试器会话的“会话”窗口

NetBeans IDE 还允许同时运行多个调试器会话。例如,如果使用基于 Java 的项目并且启用了客户端和服务器端调试器,您会发现“会话”窗口中列出了两个会话。

显示多个会话的“会话”窗口

当前会话(即,可使用调试器工具栏控制的会话)由较醒目的图标 (当前会话图标) 表示。要切换会话,您可以双击要激活的会话,或者右键单击非当前会话,然后选择“激活”。

您还可以使用右键单击弹出式窗口终止会话(单击鼠标右键,然后选择“完成”),或者在调试会话中的当前线程或调试所有线程之间切换(单击鼠标右键,然后选择“范围”>“调试所有线程”或“调试当前线程”)。

“局部变量”窗口

在暂停调试器时,“局部变量”窗口将显示选定调用栈框架的当前 window 对象的局部变量。它显示两个顶层节点:

  • scope:当前框架的函数调用范围。列出的所有属性表示可以在当前范围内获取的变量。
  • this:当前框架的 this 关键字值。列出的所有属性表示当前的 this 引用。

scopethis 是属于 JavaScript 语法范畴的术语,应正确理解它们以便使用“局部变量”窗口。要加深理解,请参见以下有关 thisscope 的文章。

显示样例变量信息的“局部变量”窗口

"scope" 节点始终是展开的。除了显示与选定调用栈框架关联的函数调用的局部变量和参数以外,还会显示以下附加节点:

  • arguments:实际参数,与声明的形式参数相对
  • arguments.length:传递给函数的实际参数个数
  • arguments.callee.length:在函数签名中声明的预期参数个数
  • parent scope:当前函数调用范围之外的范围相关信息

逐步执行代码时,某些局部变量的值可能会发生变化。此类局部变量以粗体显示在“局部变量”窗口中。

显示样例变量信息的“局部变量”窗口

您也可以直接单击“值”列并手动更改变量值。


注意:

  • 对于 IE 用户,由于活动脚本调试器 API 中的限制,并非始终可以确定变量类型。在这种情况下,“局部变量”窗口中显示的变量将指示它们为通用类型 {Object}
  • 对于 IE 用户,"parent scope" 节点在“局部变量”窗口中不可用。

“监视”窗口

在逐步执行代码时,可通过“监视”窗口跟踪特定表达式的值。

在“监视”窗口或编辑器中,可通过单击鼠标右键并从弹出式菜单中选择“新建监视”来添加监视。要删除某个监视,请单击鼠标右键,然后从弹出式菜单中选择“删除”。

“新建监视”对话框

在编辑器中,先突出显示要创建监视的表达式,然后单击鼠标右键并选择“新建监视”。突出显示的表达式将自动添加到对话框文本字段中。

可以将任意 JavaScript 表达式添加到“监视”窗口中。调试器将计算选定调用栈框架中的监视表达式值;如果成功,则会显示该表达式的值。表达式可以是变量(如“局部变量”窗口中列出的变量),也可以是可计算结果并提供与调试会话有关的值的任何 JavaScript 表达式。

显示样例监视的“监视”窗口

“调用栈”窗口

“调用栈”窗口列出了在执行期间进行的调用序列。在暂停调试器时,“调用栈”窗口将显示函数调用序列(即调用栈)。在初次暂停时,将会自动选择最顶部的栈框架。

显示样例调用序列的“调用栈”窗口

可以双击以选中某个调用栈框架,然后在“局部变量”和“监视”窗口中查看该框架的任何变量或表达式值。

“调用栈”窗口包含两列:

  • 名称:调用的函数名称
  • 已解析的位置:指示函数调用位置的 URL,其中包括文件名和行号

也可以在“调用栈”窗口中单击鼠标右键并选择“转至源”,直接导航至进行调用的位置。

“调用栈”窗口中显示的上下文有关弹出式菜单选项

将在编辑器中打开包含调用栈框架位置的文件,并将光标置于触发调用的行上。编辑器还为调用栈框架提供了突出显示功能,因此,将在左旁注中用紫色标记 (调用栈框架标记) 表示调用栈中的以前框架,并且该框架显示浅紫色背景。

为调用栈框架显示突出显示功能的编辑器

“线程”窗口

“线程”窗口列出了调试会话中存在的页面窗口和框架。在 JavaScript 中,每个窗口或框架表示一个执行上下文。因此,如果针对包含多个框架的文件运行调试器,“线程”窗口将会显示页面结构,从而将每个框架作为单个线程列出。“线程”窗口还会详细说明每个窗口和框架的当前状态并提供暂停原因。

与其他调试窗口类似,您可以使用“转至源”选项直接导航至所选的“名称”列中指示的路径或 URL。右键单击某个窗口或框架,然后从弹出式菜单中选择“转至源”。

“源”窗口

“源”窗口显示为调试会话装入的所有文件和脚本。将按浏览器装入顺序列出这些文件和脚本。对于项目中的 JavaScript 文件,调试器将显示计算机上的文件路径。对于远程资源,将显示文件的 URL。与其他调试窗口一样,您可以使用“转至源”选项直接导航至所选内容中指示的路径。右键单击某个源文件,然后从弹出式菜单中选择“转至源”。将在编辑器中打开该文件以供您查看。

如果使用的是本地文件,“源”窗口将区分实际源文件和浏览器高速缓存中包含的呈现源文件。可通过选择“转至客户端源”来查看浏览器高速缓存中包含的文件。将在编辑器中以只读格式打开该文件。

显示装入文件和右键单击弹出式菜单的“源”窗口

“断点”窗口

可以使用“断点”窗口来查看在 IDE 中设置的所有断点。

从“断点”窗口中,可通过选中/取消选中“启用”列下面的选项来启用或禁用各个断点。也可以右键单击断点并选择“定制”以定制断点。可以使用断点定制器设置命中计数和/或条件表达式。

断点定制器

可以设置命中计数条件,以便在命中计数等于给定数字、大于或等于给定数字或者是给定数字的倍数时中断调试器。

如果指定条件表达式,只有在表达式计算结果为 true 时,调试器才会在断点处停止。同样,如果同时指定了条件表达式和命中计数条件,只有在两个条件的计算结果均为 true 时,才认为断点有效。可以使用 !(condition) 对条件求反。在“断点”窗口和编辑器左旁注中,定制断点是用 定制断点标记 标记表示的。


配置调试器

NetBeans IDE 提供了配置 JavaScript 调试器的功能。在 IDE 的“选项”窗口中,可以使用 "JavaScript" 窗格中提供的选项来调整调试器的工作方式。要打开“选项”窗口,请从主菜单中选择“工具”>“选项”(Mac 上为 "NetBeans" >“首选项”)。然后,选择“其他”> "JavaScript"。

显示调试器配置选项的“选项”窗口

调试器选项包括以下内容:

  • 遇到调试器关键字时暂停:在 JavaScript 代码中插入 debugger; 语句以提示调试器暂停。
  • 遇到错误时暂停:在遇到任何 JavaScript 错误时提示调试器暂停。
  • 遇到异常时暂停:在遇到任何 JavaScript 异常时提示调试器暂停。对于 Internet Explorer,调试器就像遇到断点时一样暂停,但其状态为 EXCEPTION。有关异常的实际消息将显示在当前调试会话的控制台中。对于 Firefox,将在“局部变量”窗口中列出异常,并在“值”列下面提供详细的输出消息。
  • 在第一行暂停:提示调试器在调试会话中包含的文件的第一行处暂停。对于 IE 用户,调试器在运行时执行的第一个 JavaScript 语句处停止。对于 Firefox 用户,调试器在 JavaScript 代码的第一行处停止。
  • 显示常量:指定是否在“局部变量”窗口中显示常量及其值(如果启用,可能会在窗口中杂乱显示常量值)。
  • 显示函数:指定是否在“局部变量”窗口的“值”列中列出函数(如果启用,可能会在窗口中杂乱显示函数)。
  • 忽略查询字符串:指定是否忽略断点的 URL 查询字符串。例如,如果启用并且在包含 http://www.foo.com 的行中设置了断点,则会在请求的 URL 为 http://www.foo.com?search=34 时暂停调试器。如果查询字符串是动态添加的,此选项可能非常有用。

另请参见

有关 netbeans.org 中的 Ajax 和 Java 技术的更多信息,请参见以下资源: