JavaScript调试实战：浏览器F12与VS中debugger关键字的使用

浏览器调试环境概述

当前主流浏览器如IE、Chrome和Firefox均内置了脚本调试功能。对于.NET开发团队而言，掌握IE中的JS调试方法即可，一旦熟悉该流程，Chrome和Firefox的调试操作也将变得十分简便。

debugger语句基础

JavaScript debugger 语句

启用 debugger 后，代码执行会在到达第三行之前暂停。

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

定义和用法

debugger 语句用于暂停 JavaScript 的执行，并调用（若可用）调试函数。使用 debugger 语句类似于在代码中设置断点。通常，你可以通过按下 F12 开启调试工具，并在调试菜单中选择 "Console"。注意：如果调试工具不可用，则调试语句将无法工作。

F12开发者工具调试详解

在F12开发人员工具中进行调试

打开IE浏览器，按下F12键即可启动开发人员工具。这是IE内置的开发辅助工具，便于开发人员对HTML、CSS、Javascript等网页资源进行跟踪和调试。

如果打开时工具未固定在网页底部，可以点击右上角菜单栏中的按钮将其固定。

该工具窗口包含多个标签页，分别是：HTML、CSS、控制台、脚本、探查器和网络。点击每个标签页可执行相应的任务。

在HTML标签窗口中，工具栏按钮的具体操作如下图所示：

CSS标签用于查看样式；控制台显示网页中JS的各种输出信息，包括错误信息和用户日志；打开脚本标签页，这里才是我们关注的重点。

图中黄色矩形选中的两个控件，左侧下拉列表用于选择文件，右侧按钮用于启动调试。点击启动调试后，调试程序会将窗口最大化，我们在选中的文件中找到需要调试的位置，点击左侧边栏添加断点即可开始调试。

当程序运行到断点处时，即可进行调试。

在此界面，我们可以使用快捷键进行操作，常用快捷键如下：

F9：添加/移除 断点

F10：逐过程，即跳过该语句中的方法、表达式等

F11：逐语句调试，即单步调试，会跳入方法、表达式，进行逐语句的跟踪调试

在执行过程中，如果需要执行即时代码，可在右侧窗格中输入代码并按回车键执行。

如果要执行多行代码，点击运行按钮右侧的双箭头，即可打开多行模式。此处不再截取图片。

这种直接在浏览器中调试的方法同样适用于Google Chrome和Firefox（FireDebug），尽管细节上略有差异，但核心功能一致。

按F12键进入开发者工具，可以查看源代码、样式和JS。

点击Scripts按钮，可打开调试窗口，其中包含网页脚本文件的源码。点击左侧按钮可打开选择文件的侧边窗口。右侧有调试工具按钮，但由于我不喜欢纯英文界面，大部分调试工作仍在IE下进行，并会跳转至VS。

Visual Studio集成调试

下面介绍如何在VS中调试JS代码。

使用debugger关键字进行调试

这种方法非常简单，只需在需要调试的地方加入debugger关键字。当浏览器运行到该关键字时，会提示是否打开调试，选择“是”即可。这种调试方式允许选择调试工具，无论是新打开VS还是在现有VS中调试均可选择，我个人更偏好这种方式。

运行这段程序时，会弹出调试提示窗口：

如果浏览器未弹出此窗口，需进行简单设置，打开Internet选项：

取消勾选红色方框中的两项即可。

设置完成后，即可使用debugger关键字进行调试；经过此设置，我们还可以捕获意外错误并进行跟踪调试。

本文介绍至此，如有疑问请与我交流。调试是一个实践过程，只有频繁使用才能掌握其中的方法和技巧。