使用开发人员工具调试脚本

Internet Explorer 8 的开发人员工具功能提供了内置的轻型 Microsoft JScript 调试程序，该调试程序使开发人员能够在无需离开浏览器的情况下设置断点及单步调试客户端 JScript 代码。 本文档概述了 JScript 调试程序的高级功能。 要了解 Internet Explorer 8 开发人员工具的其他功能，请参阅了解 Internet Explorer 开发人员工具（可能为英文网页）；要获得开发人员工具的接口命令的完整参考，请参阅开发人员工具用户接口参考（可能为英文网页）。

• 简介
• 开始调试
• 设置断点
• 控制执行
• 检查变量
• 检查调用堆栈
• 使用控制台执行代码语句
• 使用控制台对警报和错误消息进行日志记录
• 备注
• 相关主题

简介

JScript 调试是 Web 开发的关键部分。 开发人员工具功能凭借直观、轻型的 JScript 调试程序，为端到端的 JScript 调试带来了一键式操作的轻松体验。 安装 Internet Explorer 8 之后，开发人员可在任何以 Internet Explorer 加载的站点上调试 JScript。

要在 Internet Explorer 8 内打开“开发人员工具”，请按下 F12；还可在“工具”命令栏上单击“开发人员工具”按钮。

注意 尽管可使用 JScript 调试程序调试任何实现 IActiveScriptSite 接口的引擎（如 Microsoft Visual Basic Scripting Edition (VBScript)），仅 JScript 调试受到支持。

开始调试

图 1.脚本选项卡用户界面

使用“脚本”选项卡中的“开发人员工具”，通过单击“开始调试”按钮或按下 F5 开始调试过程。 单击此按钮将触发以下这些事件：

• “调试需要更新网页”对话框将向您提供刷新网页的选项。 如果单击“确定”，调试将开始且网页将刷新；如果单击“取消”，则调试将不会开始且网页将不会刷新。
• 一旦开始调试，如果“开发人员工具”窗口固定到 Internet Explorer 8 实例，它将解除自身的固定。 调试结束时，您可将其重新固定到 Internet Explorer 8 实例。

要停止调试，请单击“停止调试”按钮或按下 SHIFT+F5。

注意 仅当未启用 Internet Explorer 脚本调试时才显示“调试需要更新网页”对话框。 单击对话框中的“确定”将临时启用此 Internet Explorer 实例的脚本调试，直到您关闭窗口为止。 要启用所有 Internet Explorer 实例的脚本调试，请在“Internet 选项”菜单上单击“高级”选项卡。 在“浏览”类别下，取消选中“禁用脚本调试(Internet Explorer)”选项，然后单击“确定”。 要使更改生效，请关闭所有 Internet Explorer 实例，然后重新打开它们。

注意  页面上的所有脚本，包括单独的文件和内联脚本块，都在下拉“脚本列表”框中提供，无论调试是否处于开始状态。 处于“脚本”模式选项卡时可随时在这些文件之间切换。 当前选中的文件源代码将显示在“主要内容窗格”中。

设置断点

从显示脚本代码的“主要内容窗格”中，可通过进行以下操作设置断点：

• 单击行号以插入或删除断点
• 右击一行代码并选择“插入断点”
• 将光标放在一行代码上，按下 F9 以插入或删除断点

无论调试程序是否启动，都可设置断点。 一旦设置断点后，断点图标 将出现在代码行号旁，该行的代码将突出显示。

断点会使脚本在断点行前立即暂停执行，调试程序将突出显示要执行的下一行。 调试期间，任何运行时错误都会导致调试程序在出错位置中断执行。 要防止在错误时中断，请取消设置“错误时中断”切换按钮或按下 CTRL+SHIFT+E。 当调试程序暂停执行时，浏览器将不响应任何用户输入。

图 2.设置和管理断点

调试程序的“断点”选项卡提供了所有断点的列表。 在此可找到所有断点的位置、及断点设置处的文件名和行号。 要转到源代码中的断点位置，双击此列表中的断点。 要在不删除断点的情况下停用断点，请清除断点旁边的复选框。 若要删除断点，请右击该断点，然后从快捷菜单选择“删除”。 即使您通过导航离开当前站点，Internet Explorer 也会在您关闭开发人员工具之前一直保留断点信息。

注意 在多种情况下断点可能变为无效。 无效断点将禁用并在断点图标顶端显示警告图标。 如果您通过导航离开设置断点的站点，则该断点将变为无效。 如果您在非调试模式中将断点设置到错误位置或如果您开始在调试程序未找到匹配代码的地方开始调试，断点可能无效。 如果您刷新其上设置断点的网页并更改了源代码，则断点也可能变为无效。

设置断点后，执行只要遇到断点就将在该处暂停。 如果您希望仅当某个条件为 true 时才在该断点处暂停执行，则请为该断点设置条件。 要设置断点条件，请执行以下操作：

1. 从“主要内容窗格”或“断点”窗格中右击该断点。 将出现快捷菜单。
2. 选择“条件...”选项。 将出现对话框。
3. 在“条件断点”对话框中，输入条件并单击“确定”。

这将使仅当条件为 true 时调试程序才在该断点处暂停执行。

控制执行

断点用于暂停脚本执行，以使您可以检查该点代码的状态。 执行在断点处停止时，您可通过使用以下任何一个命令按钮控制执行：

• 继续

  继续运行脚本而不暂停，直到遇到另一断点或脚本错误。 键盘快捷方式： F5。

• 全部中断

  在下一条脚本语句执行之前立即暂停执行。 单击按钮或按下 CTRL+SHIFT+B 以激活此命令，然后执行希望调试的操作。

• 错误时中断

  在出现错误的位置暂停执行。 默认情况下此命令处于活动状态。 如果您不希望在这些错误点处暂停执行，请单击此按钮停用此命令；然而，在所有情况下，在控制台中每出现一个错误都将显示一条错误消息。 切换命令打开/关闭状态的键盘快捷方式： CTRL+SHIFT+E。

• 逐语句

  执行下一行脚本后暂停，即使下一行位于新方法内。 键盘快捷方式： F11。

• 逐过程

  继续执行至当前方法中的下一行脚本后暂停。 这在逐过程方法调用中极其有用。 键盘快捷方式： F10。

• 跳出

  继续执行至调用当前方法的方法中的下一行脚本。 这在跳出循环和方法调用时极其有用。 键盘快捷方式： SHIFT+F11。

检查变量

可通过“本地”窗格和“监视”窗格检查任何变量。 检查变量：

• 单击“开始调试”启动调试程序
• 沿执行路径设置断点
• 然后，执行脚本

执行期间，调试程序将在遇到的第一个断点处暂停。 执行一旦暂停，即可检查和编辑“本地”窗格和“监视”窗格中的变量。

调试程序的“本地”窗格显示了当前执行范围中可用的所有变量的名称、值和类型。 如果变量超出了范围，则它即不可用且并不显示在“本地”窗格中。 对于这些“超出范围”的变量和对象，请使用“监视”窗格随时查看它们。

可通过将不同范围的变量添加到“监视”窗格来监视它们。 可通过以下多种方式将变量添加到“监视”窗格：

1. 从“主要内容窗格”选择某个脚本文本，然后右击以激活上下文菜单并单击“添加监视”。 这将该文本添加到监视列表中。
2. 从“本地”窗格右击变量或对象，然后单击“添加监视”将其添加到监视列表。
3. 从“监视”窗格单击“单击”添加，然后键入希望监视的变量的名称。 可在监视列表的底部找到单击添加的文本，因为该文本是“监视”窗格列表中的最后一项。

图 3.“本地”窗格中的检查变量。

每执行一行代码，调试程序将在“本地”窗格和“监视”窗格中更新变量值。 更新值将显示为红色文本。 要修改“本地”窗格或“监视”窗格中的变量值，请双击该值，键入新值，然后按下 ENTER。 还可右击对象然后单击“编辑值”以开始编辑。 完成后按下 ENTER 提交或 ESC 取消编辑。

检查调用堆栈

只要调试程序在某个断点暂停执行，“调用堆栈”窗格就会提供执行上下文列表。 要跳到任何堆栈项，请双击该项。 调试程序将在“主要内容窗格”中查看该方法。 从该处您可检查“本地”窗格或“监视”窗格中执行上下文的变量。

使用控制台执行代码语句

调试程序的“控制台”窗格提供即时执行脚本语句的控制台。 键入任何有效的语句或变量名，然后按下 ENTER（或单击“运行脚本”）以在当前页面的上下文中及暂停执行的地方执行该语句。

要设置变量值，请使用标准赋值语法：

s = 'my query string';

单击“多行模式”按钮展开输入窗口以允许输入多行。 它还更改 ENTER 键的行为，使该键创建新行而不是执行脚本。 在此，您可键入多行代码，然后通过单击“运行脚本”执行它们。 输入窗口（大小可以调整）可通过快捷菜单提供其他控制。

您可随时使用“控制台”窗格，即使调试程序未启动也可以。 执行在某个断点处停止时，此窗格中输入的命令将在断点的执行范围中运行；执行未暂停时，命令将在全局范围中运行。

使用控制台对警报和错误消息进行日志记录

只要开发人员工具处于打开状态，在某个特定 Internet Explorer 实例中的所有脚本错误都将记录到“控制台”窗格的日志中。 要导航到错误位置，请单击错误中提供的源信息。

还可通过使用 console.log API 将消息记录到控制台的日志中。 调用 console.log 将字符串输出到控制台窗格，而不是使用 window.alert() 生成无数的对话框。 要区别消息，请使用不同的 console.log API，如：

• console.log
• console.info
• console.warn
• console.error
• console.assert

可使用若干参数调用这些控制台命令，这些参数将被连接起来生成输出字符串。 可通过使用替代模式及 printf 样式对参数进行格式设置。 例如，您可用以下方式之一调用 console.log：

• console.log("Variable x = " + x + " and variable y = " + y)
• console.log("Variable x = ", x, " and variable y = ", y)
• console.log("Variable x = %d and variable y = %d", x, y)

但 console.assert 命令的第一个参数需要表达式以计算出 true 或 false 值。 如果表达式计算结果为 true，则断言消息将不会输出到控制台；否则，消息将输出到控制台。 例如：

var x = 1;
var y = 1;
//This expression evaluates to TRUE, so the message will not show up in the console
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);
//This expression will evaluates to FALSE so the message will show up in the console
y = 2;
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);

可从控制台窗格对这些控制台消息进行筛选以显示或隐藏它们。 要从“控制台”窗格选择希望显示或隐藏的消息，请进行以下操作设置筛选器： 右击“控制台”窗格并将光标移动到“筛选器”。 将出现一个可用筛选器列表，其中带有选中标记的筛选器处于活动状态。

此外，可扩展控制台对象以根据开发需要添加新功能。 例如，您可能希望使用自定义的方法将调试消息输出到控制台。 要添加 console.debug 命令，您可将以下代码段添加到 JScript 代码：

console.debug = function(name, value){
	console.warn("DEBUG: " + name + "==" + value);
}

前述示例采用两个参数，仅对其进行最低限度的格式设置，然后将其输出到“控制台”窗格。 因为您将开始定义 console.debug，您根据需要可自定义函数参数和行为，以符合您的需要。 这样，可使用控制台对象添加您可能需要的任何数量的新命令。

注意 因为您在新命令中使用现有的控制台命令，将仍旧应用筛选器。 例如，前一示例中的 console.debug 命令使用 console.warn 将消息输出到“控制台”窗格。 如果您从“筛选器”列表中取消选中“控制台警告”则“控制台”窗格中将不显示来自 console.warn 的任何输出。

备注

• 要清除所有 console.log 消息，请在代码中或从“控制台”命令行中使用 console.clear()。 console.clear() 将不清除脚本错误消息或您在“控制台”命令行中输入的代码。
• 要完全清除“控制台”窗格，请右击“控制台”窗格并选择“清除控制台”选项。 这将清除“控制台”窗格中的所有消息。

相关主题

• 了解 Internet Explorer 开发人员工具（可能为英文网页）
• 使用开发人员工具调试 HTML 和 CSS（可能为英文网页）
• 使用开发人员工具分析脚本（可能为英文网页）
• 开发人员工具用户接口参考（可能为英文网页）
• 开发人员工具键盘快捷方式参考（可能为英文网页）