测试人员如何使用浏览器的f12_如何使用 F12 开发人员工具调试网页

本帖最后由 qin明月 于 2013-4-16 16:02 编辑

使用 F12 开发人员工具调试 JavaScript 错误

使用 F12 开发人员工具，Web 开发人员能够在无需离开浏览器的情况下快速调试 JavaScript 代码。 通过内置到每个 Windows Internet Explorer 9 安装中，F12 工具可提供一些调试工具(例如，断点、监视和局部变量查看)以及一个用于消息和即时代码执行的控制台。

本主题介绍如何使用 F12 工具来调试你的 JavaScript 代码。本主题的目的并不是要提供一个全面的调试教程，而是重点介绍可帮助你着手使用自己的代码的工具。从 Internet Explorer 9 中，按 F12 以打开工具，然后单击“脚本”选项卡即可开始使用。

在“脚本”选项卡中，左侧将显示源代码窗格，可在其中查看 JavaScript 代码，设置断点并逐步执行函数的执行路径。在右侧窗格中，可在“控制台”、“监视变量”、“局部变量”、“监视堆栈”和“断点”选项卡之间进行切换。

启动和停止调试程序

首次打开 F12 工具并单击“脚本”选项卡时，会在左侧显示代码，在右侧显示控制台。在控制台中，可能会显示一条消息："刷新此页以查看 F12 工具打开前可能已出现的消息。 "当刷新网页时，控制台会向你显示浏览器发出的任何错误或警告。

若要能够设置断点，查看监视和局部变量，以及查看一系列函数的调用堆栈，则单击“开始调试”按钮。通过按“开始调试”按钮，可以刷新网页并在调试程序中重新启动代码。

使用控制台查找语法和其他代码错误

在大多数编码项目中，错误通常包含语法、逻辑或数据输入错误。控制台视图将显示 JavaScript 错误和异常，以及文档对象模型 (DOM) 异常。在你的代码内部，你可使用控制台对象将状态和程序错误消息发送到控制台，而不是使用 "alert()" 调用或屏幕空间。例如，你可以向 JavaScript 代码中添加一行(如

JavaScript

window.console.log("The file opened successfully");复制代码)以在脚本中获取状态，而不中断执行。 有关使用控制台的详细信息，请参阅使用 F12 工具控制台查看错误和状态(4楼)。使不美观的脚本更美观

F12 工具可在行或语句级别调试 JavaScript，而不管代码是否按行或语句显示。那些大块的编写紧凑的代码仍可逐步执行。不过，如果将代码全部放在一个代码块中，则有时很难遵循逻辑。

若要设置脚本格式或“出色打印”脚本，请单击“配置”按钮