二维码
搜索 ×

JavaScript 调试

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

JavaScript 调试

每次编写一些新的计算机代码时，错误都可能（将）发生。

代码调试

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

其中许多错误很难诊断。

通常，当编程代码包含错误时，什么都不会发生。有 没有错误消息，并且不会显示在哪里搜索错误。

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

JavaScript 调试器

调试并不容易。但幸运的是，所有现代浏览器都内置了 JavaScript 调试器。

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

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

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

console.log()方法

如果您的浏览器支持调试，您可以使用console.log()在调试器窗口中显示 JavaScript 值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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 控制台参考中了解有关console.log()方法的更多信息。

设置断点

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

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

检查值后，可以继续执行代码（通常使用 播放按钮）。

调试器关键字

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

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

如果没有可用的调试，则调试器语句不起作用。

启用调试器后，此代码将在它之前停止执行 执行第三行。

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

主要浏览器的调试工具

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

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

Chrome 浏览器

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

Firefox 浏览器

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

Edge 浏览器

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

Opera 浏览器

  • 打开浏览器。

  • 从菜单中，选择“开发人员”。

  • 从“开发人员”中，选择“开发人员工具”。

  • 最后，选择“控制台”。

Safari 浏览器

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

您知道吗？

调试是测试、查找和减少计算机程序中的错误（错误）的过程。
第一个已知的计算机错误是卡在电子设备中的真正错误（昆虫）。

推荐教程