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

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

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

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中设置断点的行为与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);

输出如下：