IE调试网页之五：使用 F12 开发人员工具调试 JavaScript 错误 (Windows)

　　使用 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 工具控制台查看错误和状态。

　　使不美观的脚本更美观

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

　　若要设置脚本格式或“出色打印”脚本，请单击“配置”按钮 Gg699336.f12_configurationbutton(zh-cn,VS.85).png ，然后单击“格式化 JavaScript”。以下屏幕快照展示 JavaScript 代码块在格式化之前和之后的对比。

在单击“格式化 JavaScript”选项之前的包含一个断点的紧凑格式脚本在单击“格式化 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>

在 Internet Explorer 9 中，加载示例。
按 F12 打开 F12 工具，并单击“脚本”选项卡
在左侧窗格中，滚动到第一个函数，右键单击内容为 "var a = 5;" 的行，然后单击“插入断点”。
```
function firstParam() {
    //set breakpoint here 
    var a = 5;
    secondParam(a);
}
```
单击“开始调试”，然后在浏览器中的网页上，单击“运行”按钮。
在 F12 工具中，单击右侧的“监视”选项卡，然后添加变量 "a、b、c 和 d"。
通过按 F11 逐步执行代码，或者单击“单步执行”按钮，并监视“监视”选项卡上的变量。

　　在逐步执行每个函数时，应看到监视的值会从未定义更改为某个值。

　　若要通过“局部变量”选项卡查看差别，请按 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 错误更容易一点。

posted @ 2013-02-27 16:45 artwl 阅读(22538) 评论(0) 编辑收藏举报

刷新页面返回顶部

IE调试网页之五：使用 F12 开发人员工具调试 JavaScript 错误 (Windows)

公告

个人简介