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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011793198/article/details/17060173

使用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,则代码将在断点处停止运行。

猜你喜欢

转载自blog.csdn.net/u011793198/article/details/17060173