宝哥软件园

调试Javascript代码(浏览器F12和VS中的调试器关键字)

编辑:宝哥软件园 来源:互联网 时间:2021-10-04

目前常用的浏览器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中调试,都可以选择,个人比较喜欢这种调试方式。

当我们运行这个程序时,会弹出一个调试提示窗口:

如果此窗口没有在您的浏览器中弹出,您需要进行简单的设置并打开互联网选项:

只需取消选中红色框中的两个项目。

设置后,可以使用调试器关键字进行调试。有了这个设置,我们还可以捕获意外错误,并跟踪和调试它们。

好了,这篇文章到此结束。如果你什么都不懂,请和我交流。调试是一个实际的过程。只有更多地使用它,才能掌握它的方法和技巧。

更多资讯
游戏推荐
更多+