如何调试JavaScript

在理解“如何调试JavaScript”之前，我们必须了解“调试”的概念。

什么是代码调试

在编写程序或代码时，我们可能会犯许多错误，例如逻辑错误、语法错误等。调试可以帮助我们找到发生错误的位置/点，因为在调试中，我们可以按行执行代码。一旦我们找到了犯错误的点，我们就可以进行适当的更改来纠正错误。调试工具还允许我们对程序代码进行临时更改。在找到错误并进行更改的整个过程中，我们将其称为调试。

简而言之，我们可以说代码调试是一种查找和纠正编程错误的过程。

JavaScript调试器

显然，调试并不是一项容易的任务，因为它需要很多实践和经验，所以幸运的是，所有现代web浏览器都有自己内置的调试器。web浏览器将控制权交给我们，使我们可以在想要使用调试器时随时打开或关闭调试器，并且还允许我们设置断点（程序代码执行时可以停止的地方），并在代码执行时检查变量。

通常，我们可以使用F12键打开内置的JavaScript调试器，通过使用“console”来显示JavaScript的值。

console.log ()方法

只有在浏览器支持调试时，才可以使用console.log()方法来显示JavaScript的值。

console方法的语法

<script>
x = 5;
y = 6;
z = x + y;
console.log(c);
</script>

我们可以通过一个示例来更清楚地理解：

程序

<!DOCTYPE html>
<html>
<body>

<h1>This is my first web page</h1>

<script>
x = 5;
y = 6;
z = x + y;
console.log(c);
</script>

</body>
</html>

如何设置断点？

在使用调试工具时，我们可以在JavaScript程序的代码中设置断点。当控制流达到任何断点时，程序的执行将被停止，并允许我们检查JavaScript值。一旦我们检查了JavaScript值并且满意，我们可以通过点击播放按钮来恢复程序的执行。

调试器关键字

我们可以使用”debugger;”关键字在任何一行上停止程序的执行。然而，只有在调试器函数可用的情况下，此关键字才起作用。此外，我们可以检查JavaScript值是否可用，如果调试器函数可用的话。一旦检查完JavaScript值，我们可以恢复执行并查找其他错误进行修正。

语法

<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

程序

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>