JavaScript如何调试程序?调试指南

2021年3月25日13:15:59 发表评论 928 次浏览

编写代码时经常会出错, 并且错误可能是由于语法或逻辑原因。这些错误在用户和程序员的逻辑和理解上造成了很多歧义。代码中也可能存在错误, 这些错误对于程序员而言仍然是不可见的, 并且可能造成严重破坏。为了识别这些错误, 我们需要可以遍历整个代码或程序的调试器, 识别并修复错误。

1)调试器

在代码中使用debugger关键字强制在断点处停止执行代码并调用调试功能。如果根本不需要任何调试, 则执行调试器功能。

让我们看一下有关调试的JavaScript程序:

<h4>Debugging demonstrations using Debugger keyword</h4>
     The solution of 20 * 5 is:
         <p id= "test" ></p>
  
  
<p>If the debugger is turned on the code stops 
execution at the start of the debugger</p>
  
      
         var x = 20;
var y = 5;
var z = x * y;
debugger;
document.getElementById( "test" ).innerHTML = z;

输出如下:

JavaScript如何调试程序?调试指南1

以前实现调试器很困难, 但是随着时间的流逝以及现代浏览器的到来, 各种内置的调试器得以实现。如前所述, 设置断点会中断代码行, 并将控件流到另一个被调用的区域。这可以在浏览器的调试窗口中完成。此外, 在javascript中设置断点的行为与Java中的断点类似, 在Java中, 代码的执行停止, 浏览器执行值的检查。检查完成后, 即可恢复流量控制。可以根据用户的方便性打开或关闭调试。所有这些都可以通过调试器菜单的"控制台"完成。

2)使用console.log()方法

还有另一种方法可以在调试器窗口中显示JS值。

我们来看看使用console.log()的JavaScript程序:

<h3>lsbin</h3>
<h4>Hello Geek</h4>
  
<p>
1. To view the result activate debugging of your 
browser(preferred the latest) by pressing F12 <br>
2. Select "Console" in the debugger menu.
</p>
  
  
x = "Where do you work?"
y = "I work at lsbin"
console.log(x);
console.log(y);

输出如下:

JavaScript如何调试程序?调试指南2

3)设置断点:

console.log()是调试错误的好方法, 但是设置断点是一种更快, 更有效和更好的方法。在此方法中, 在代码中设置了断点, 这会在该点停止执行代码, 以便可以在此时检查变量的值。

与Console.log()方法相比, 使用断点有一些优点:

在console.log()方法中, 用户必须理解代码, 并手动将console.log()放在代码中的各个位置。但是在断点方法中, 我们甚至可以在不知道代码的情况下通过Developers工具在任何地方设置断点。

在console.log()方法中, 我们必须手动打印不同变量的值, 但是在某个断点处, 所有变量的所有值都会在Developers工具中自动显示。

按F12键进入"开发人员工具"部分, 然后转到源代码。

在源代码部分中, 选择一个JavaScript文件并通过从提供的列表中进行选择来设置断点, 例如DOM断点或事件侦听器断点, 它们会在事件发生时停止执行代码

JavaScript如何调试程序?调试指南3

或通过单击代码中显示的行号来设置断点。在下图中, 在第23行设置了一个断点。(使用的代码与上面的示例相同)

JavaScript如何调试程序?调试指南4

如图所示, 代码在第23行停止, 并显示了该时间点代码中变量的所有值。

由于我们可以看到I的值最初是1, 在断点处是5, 因此lsbin被打印了5-1 = 4次。

方法3由Kartikay Bhutani提供。


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: