JavaScript 调试

每次编写一些新的计算机代码时，错误都可能（将）发生。代码调试可以帮助我们找到错误并修正它。

代码调试

编程代码可能包含语法错误或逻辑错误。

其中许多错误很难诊断。

通常，当编程代码包含错误时，什么也不会发生。没有错误消息，您也不会得到在何处搜索错误的指示。

在编程代码中搜索（和修复）错误的过程称为代码调试。

JavaScript 调试器

调试并不容易。但幸运的是，所有现代浏览器都有一个开发者工具的模块，内置了 JavaScript 调试器。

可以打开和关闭内置调试器，强制向用户报告错误。

使用调试器，您还可以设置断点（可以停止代码执行的位置），并在代码执行时检查变量。

通常，否则请按照本页底部的步骤，使用 F12 键在浏览器中激活调试，然后在调试器菜单中选择“控制台”。

console.log() 方法

如果您的浏览器支持调试，您可以使用 console.log() 在调试器控制台窗口中输出日志，查看是否正确。

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Web Page</h1>

    <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>
  </body>
</html>

设置断点

在调试器窗口中，您可以在 JavaScript 代码中设置断点。

在每个断点处，JavaScript 将停止执行，并让您检查 JavaScript 值。

检查值后，您可以恢复代码的执行。

debugger 关键字

debugger 关键字停止执行 JavaScript，并调用（如果可用）调试函数。

这与在调试器中设置断点的功能相同。

如果没有调试可用，则调试器语句无效。

调试器打开后，此代码将在执行第三行之前停止执行。

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

主要浏览器的调试工具

通常，您在浏览器中使用 F12 激活调试，然后在调试器菜单中选择“控制台”。

否则，请按照以下步骤操作：

Chrome

打开浏览器。
从菜单中选择“更多工具”。
从工具中，选择“开发人员工具”。
最后，选择控制台/Console。

Firefox

打开浏览器。
从菜单中，选择“Web 开发者工具”。
最后，选择“控制台”。

Edge

打开浏览器。
从菜单中选择“更多工具”。
从工具中，选择“开发人员工具”。
最后，选择控制台/Console。

Opera

打开浏览器。
从菜单中，选择“开发人员”。
从“开发人员”中，选择“开发人员工具”。
最后，选择“控制台”。

苹果浏览器

转到主菜单中的 Safari、首选项、高级。
选中“启用在菜单栏中显示开发菜单”。
当菜单中出现新选项“开发”时：选择“显示 JavaScript 控制台”。