|
使用 F12 开发人员工具，Web 开发人员能够在无需离开浏览器的情况下快速调试 JavaScript 代码。 通过内置到每个 Windows Internet Explorer 9 安装中，F12 工具可提供一些调试工具（例如，断点、监视和局部变量查看）以及一个用于消息和即时代码执行的控制台。 本主题介绍如何使用 F12 工具来调试你的 JavaScript 代码。本主题的目的并不是要提供一个全面的调试教程，而是重点介绍可帮助你着手使用自己的代码的工具。从 Internet Explorer 9 中，按 F12 以打开工具，然后单击“脚本”选项卡即可开始使用。 在“脚本”选项卡中，左侧将显示源代码窗格，可在其中查看 JavaScript 代码，设置断点并逐步执行函数的执行路径。在右侧窗格中，可在“控制台”、“监视变量”、“局部变量”、“监视堆栈”和“断点”选项卡之间进行切换。 启动和停止调试程序 首次打开 F12 工具并单击“脚本”选项卡时，会在左侧显示代码，在右侧显示控制台。在控制台中，可能会显示一条消息："刷新此页以查看 F12 工具打开前可能已出现的消息。 "当刷新网页时，控制台会向你显示浏览器发出的任何错误或警告。 若要能够设置断点，查看监视和局部变量，以及查看一系列函数的调用堆栈，则单击“开始调试”按钮。通过按“开始调试”按钮，可以刷新网页并在调试程序中重新启动代码。 使用控制台查找语法和其他代码错误 在大多数编码项目中，错误通常包含语法、逻辑或数据输入错误。控制台视图将显示 JavaScript 错误和异常，以及文档对象模型 (DOM) 异常。在你的代码内部，你可使用控制台对象将状态和程序错误消息发送到控制台，而不是使用 "alert()" 调用或屏幕空间。例如，你可以向 JavaScript 代码中添加一行（如 window.console.log("The file opened successfully");）以在脚本中获取状态，而不中断执行。 有关使用控制台的详细信息，请参阅使用 F12 工具控制台查看错误和状态。
使不美观的脚本更美观 F12 工具可在行或语句级别调试 JavaScript，而不管代码是否按行或语句显示。那些大块的编写紧凑的代码仍可逐步执行。不过，如果将代码全部放在一个代码块中，则有时很难遵循逻辑。 若要设置脚本格式或“出色打印”脚本，请单击“配置”按钮
中断代码执行 在 F12 工具中设置断点的方式与在二进制代码调试程序（例如，Microsoft Visual Studio）中的方式相似。在左侧窗格中，单击要中断的代码行的左侧。断点是可以切换的，因此可以单击以添加断点，再次单击以移除断点。
可以向代码中添加所需任意数量的断点。可以右键单击代码行并单击“插入断点”，或者单击要中断的语句旁边的左边距。 通过使用 F12 工具，可在语句级别设置断点，即使这些语句位于多语句块或行中也是如此。从而能够在紧凑的代码节内进行中断。在这些条件下设置断点的最好方式是，右键单击代码，然后从快捷菜单中单击“插入断点”。还可使用前面介绍的脚本格式化（美观显示）功能来对代码行进行格式化，以方便在页边距中进行单击。 通过使用“断点”选项卡管理多个断点 如果你具有包含很多断点（甚至跨多个文件）的大型代码库，则“断点”选项卡可帮助你跟踪所有这些断点。 在“脚本”选项卡中，单击属性窗格（右侧窗格）中的“断点”选项卡。有关示例，请参阅下图。
通过“断点”选项卡，可以启用或禁用、删除、选择并复制断点，而无需转到要设置它们的确切位置。若要打开或关闭某个断点，请单击要更改的设置旁边的复选框。通过双击列表，可立即跳转到代码中的断点。通过按 Ctrl 键并单击多个断点，可选择多个断点。 “断点”选项卡还具有一个快捷菜单（当你右键单击时可用），可让你批量删除、启用、禁用或复制断点。下表中显示了相关选项。
条件断点 无条件地中断一行代码是很有帮助的，但在某个属性或变量到达特定值时中断甚至更为有用。若要在到达或设置特定值时中断，请设置断点，然后打开“断点”选项卡。右键单击要使用的断点，然后单击“条件”。 在“条件”对话框中，添加有效的 JavaScript 语句。运行代码时，如果该语句为 True，则代码将在断点处停止运行。例如，在下图中，当 oAudio.paused 属性为 False 时，代码将停止运行。
你既可以使用单一条件，也可以通过使用逻辑语句根据更加复杂的条件进行断开。但请记住，变量和对象的作用域将是相同的，就好像在监视窗口中在断点处对其进行检查一样。如果使用某个不在作用域中的条件，则不会将该条件计算为 True。 逐步执行代码 当代码执行在某个断点处停止时，可使用导航按钮来继续执行函数 (F5)、全部中断执行函数 (Ctrl+Shift+B) 或逐语句执行函数 (F11)、逐过程执行函数 (F10) 或跳出函数执行 (Shift+F11)。当在断点处暂停执行或正逐步执行时，调试窗口实际上是模式窗口。 正因如此，当再次与网页交互前，需要停止调试 (Shift+F5) 或继续执行代码 (F5)。如果你的网页似乎无法做出响应，则记住这一点是很有必要的。如果打开了多个窗口，而调试程序没有位于顶部，则它可能正在断点上等待响应。如果发生这种情况，请在调试窗口找到相应的网页并按 F5 继续执行代码，或按 Shift+F5 停止调试以将控制权归还给网页。 使用“监视”和“局部变量”选项卡监视变量 使用“监视”选项卡，可以在代码中设置并监视变量。其中将会列出指定的变量的名称、值和类型。可在“监视”选项卡中单击标记为“单击以添加...”的行，并键入变量名称。如果不想键入变量名称，则可将其复制并粘贴到“监视”列表中。 监视变量列表将显示你是否正在调试代码的值。打开调试并跟踪代码或已设置断点时，列表中变量值的作用域就是你在脚本中所处的位置。如果关闭调试，则作用域为全局，并且只有全局变量才会显示值。 与“监视”选项卡（显示变量是否超出作用域）不同，“局部变量”选项卡视图仅显示当前作用域中的变量。你无需添加要监视的变量，因为它会随着作用域的更改更新所有可用的变量。 若要查看不同之处，请在 Internet Explorer 9 中打开以下示例并按照步骤操作。 <!DOCTYPE html> <html> <head> <title>JavaScript debugging example</title> <script type="text/javascript"> //create a global variable for our <div> var display; function init() { //initialize only after the HTML has been loaded display = document.getElementById("results"); } function firstParam() { //set breakpoint here var a = 5; secondParam(a); } function secondParam(a) { var b = 10; thirdParam(a, b); } function thirdParam(a, b) { var c = 15; var d = a + b + c; //display to console if F12 tools is open if (window.console && window.console.log) { window.console.log(a + " + " + b + " + " + c + " = " + d); } else { display.innerText = a + " + " + b + " + " + c + " = " + d; } } </script> </head> <body onload="init();"> <p><button onclick="firstParam();">Run</button></p> <div id="results"></div> </body> </html>
在逐步执行每个函数时，应看到监视的值会从未定义更改为某个值。 若要通过“局部变量”选项卡查看差别，请按 F5 继续使用 F12 工具。在浏览器中，单击网页上的“运行”按钮以重新运行代码，并返回到 F12 工具。 在“脚本”选项卡的右侧窗格中，单击“局部变量”选项卡，并按 F11 以再次逐步执行函数。在局部变量列表中，请注意其中仅列出了包含值的变量。 “局部变量”视图还将显示传递到某个函数的参数、参数值以及类型。 查看调用堆栈 使用“调用堆栈”选项卡，可以查看从你的代码中调用函数时所采用的路径。这可帮助你作为 Bug 发现意外的代码路径。 通过“调用堆栈”选项卡中，可双击任意函数，并转到源代码中相应的调用。 尝试前面所提到的示例，并在跟踪函数时，查看“调用堆栈”选项卡。
在“调用堆栈”选项卡中，当前函数或位置总是位于顶部（在“调用堆栈”选项卡中和代码页边距中，箭头指向的位置）。双击列表中的任意函数时，将突出显示调用该函数的语句。 调试多个脚本 大型网页通常包含多个 JavaScript 文件。使用 F12 工具，可以在调试代码时对多个脚本文件进行操作。若要查看不同的文件，请单击“开始调试”按钮旁边的向下箭头，以显示与网页关联的脚本的列表。使用 F12 工具逐步执行代码时，F12 工具将遵循跨越多个文件的执行路径。你可添加变量以从任意脚本文件中进行监视，“调用堆栈”视图将显示跨不同脚本文件中所包含的函数的执行路径。 更改文档模式设置 “菜单”栏右侧的“文档模式”设置可以用于 F12 工具的任何选项卡，但在“脚本”选项卡中调试代码时尤其有用。使用 Internet Explorer 9，可以更改文档模式以模拟早期版本的 Windows Internet Explorer 的标准。在 Internet Explorer 9 中，停止使用 <!doctype> 声明会导致将文档类型默认设置为 Quirks 模式。使用新功能或标准功能（例如 HTML5 audio 或canvas）时，有些可能看起来是编码错误的 Bug 实际上是缺少文档类型声明或文档类型声明不正确造成的。 Internet Explorer 9 F12 工具无法为你修复代码，但它可以使查找 JavaScript 错误更容易一点。 |
|
|
，然后单击“格式化 JavaScript”。以下屏幕快照展示 JavaScript 代码块在格式化之前和之后的对比。
