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

使用F12工具中的调试程序，Web开发人员能够无需离开浏览器的情况下快速调试JavaScript代码，方便快速的定位到JavaScript文件的错误代码，来提高开发效率。

开始使用调试程序

新版的IE11，使用调试程序工具调试而无需刷新页面，保留状态，并且F12工具仍然可以吸附在浏览器窗口中。

在Internet Explorer 11中打开加载有问题的网页，按F12键或从工具菜单中选择F12开发人工具选项。

调试工具的默认显示布局为三个窗格，通过拖拽可以改变各个窗格的大小。

脚本窗口(左)界面中会显示网页HTML和JavaScript的源代码，通过顶部的选项卡可以快速切换文件进行编辑。脚本窗格周围的滚动条还突出显示了已经标记的断点位置。

监视窗格(右上角)中显示变量的值。当你在中断模式下时，它显示了你当前位置代码的变量，

在右下方的两个功能是调用堆栈和断点：

调用堆栈：显示当前断点的函数调用链。

断点：显示断点和跟踪点的设置列表，并提供删除、切换，和编辑断点的函数。

当调试程序执行到一个断点，你可以通过控制图标按钮来告诉它接下来做什么。

图标从左到右表示：

继续(F5 或 F8)： 叶中断模式，并继续到下一个断点。

中断(Ctrl + Shift + B)：在下一条语句处中断运行。

步入(F11): 如果不是在一个函数，到下一条语句或步骤到所调用的函数。

步进(F10)： 如果不是在一个函数，到下一条语句或步骤在被调用的函数。

步出(Shift + F11): 从当前函数和调用函数的步骤。

出现新工作进程时中断(Ctrl + Shift + W)： 当创建一个新的Web Worker时中断。

异常控制(Ctrl + Shift + E)：

默认情况下这将忽略异常，他们只是记录到控制台工具。你可以选择所有异常，或只是不被由try... catch异常处理程序在您的代码中处理上中断。

最后两个图标是启用优质打印(Ctrl + Shift + P)和启用自动换行(Alt+W)可以增加经压缩的代码的可读性。

在调试过程中如果想在某个属性或变量到达特定值时才中断，可以先在脚本窗口中设置断点，然后在断点选项卡中右键要使用的断点，单击条件选项。在条件对话框中，添加有效的 JavaScript 条件语句。运行代码时，如果该语句为 True，则代码将在断点处停止运行。