目前常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。作为我们的。NET阵营,学会在IE中调试JS就够了。掌握了IE中的调试方法后,Chrome和Firefox中的调试方法变得相当简单。
JavaScript调试器语句
打开调试器,代码在执行到第三行之前终止。
var x=15 * 5;调试器;document.getElementbyId('demo ')。innerHTML=x;定义和用法。
调试器语句用于停止JavaScript执行并调用(如果可用)调试函数。使用调试器语句类似于在代码中设置断点。通常,您可以通过按F12打开调试工具,并在调试菜单中选择“控制台”。注意:如果调试工具不可用,调试语句将不起作用。
在F12开发工具中调试。
打开IE浏览器,按F12键,就会打开Developer Tool,这是IE中内置的开发者开发工具,方便开发者跟踪调试HTML、CSS、Javascript等网页资源。
如果打开网页时没有固定在网页底部,可以点按右上角菜单栏中的按钮。
我们可以看到这个工具窗口中有几个选项卡,分别是:HTML、CSS、控制台、脚本、profiler和网络。单击每个选项卡执行相应的任务。
在HTML标记窗口中,工具栏中的按钮执行以下操作:
CSS标签用于查看样式;控制台在网页中显示JS的各种输出信息,包括错误信息、用户日志等。打开脚本选项卡,这就是我们想要的。
我选择了图中带有黄色矩形的控件。左边的下拉列表用于选择文件,右边的按钮用于开始调试。单击“开始调试”后,调试程序将最大化窗口。我们将在选定的文件中找到要调试的位置,并单击左侧栏添加要调试的断点。
当一个程序运行到我们的断点时,它可以被调试。
在这里,我们可以使用快捷键进行操作。常用的快捷键如下:
F9:添加/删除断点。
F10:一步一步来,也就是跳过这个语句中的方法和表达式。
F11:按语句调试,即单步调试,跳转到方法和表达式,按语句进行跟踪调试。
在执行过程中,如果我们想执行即时代码,我们需要在右窗格中输入代码,然后按回车键。
如果要执行多行代码,单击“运行”按钮右侧的双箭头,多行模式将会打开。我不会再剪照片了。
这种直接在浏览器中调试的方法也适用于谷歌浏览器Chrome和FireFox FireDebug,只是细节上有些不同,主要功能是一样的。
按F12进入开发者工具,可以查看源代码、样式、js。
点击“脚本”按钮打开此调试窗口,其中包含网页中脚本文件的源代码,点击左侧按钮打开选择文件的侧窗口。右边有调试工具按钮,但是我不喜欢这些纯英文界面,所以大部分调试还是在IE下完成的。并将转到IE下的VS。
我将介绍如何在VS中调试我们的JS代码。
Debugger关键字用于调试。
这个方法很简单,我们只需要在调试的地方添加debugger关键字,然后当浏览器运行到这个关键字时,会提示是否打开调试,我们可以选择yes。这种调试可以选择调试工具,无论是新打开的vs还是在已有的VS中调试,都可以选择,个人比较喜欢这种调试方式。
当我们运行这个程序时,会弹出一个调试提示窗口:
如果此窗口没有在您的浏览器中弹出,您需要进行简单的设置并打开互联网选项:
只需取消选中红色框中的两个项目。
设置后,可以使用调试器关键字进行调试。有了这个设置,我们还可以捕获意外错误,并跟踪和调试它们。
好了,这篇文章到此结束。如果你什么都不懂,请和我交流。调试是一个实际的过程。只有更多地使用它,才能掌握它的方法和技巧。