目录

JavaScript 调试


每次编写一些新的计算机代码时,错误都可能(将会)发生。


代码调试

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

其中许多错误很难诊断。

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

搜索(并修复)编程代码中的错误称为代码调试。


JavaScript 调试器

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

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

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

通常(否则请按照本页底部的步骤操作),您可以使用 F12 键在浏览器中激活调试,然后在调试器菜单中选择 "Console"。


console.log() 方法

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

示例

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

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

</body>
</html>
亲自试一试 »

提示:阅读更多关于console.log()我们的方法JavaScript 控制台参考


设置断点

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

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

检查值后,您可以恢复代码的执行(通常使用播放按钮)。



调试器关键字

这个debugger关键字停止 JavaScript 的执行,并调用(如果可用)调试函数。

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

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

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

示例

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
亲自试一试 »

主要浏览器的调试工具

通常,您可以使用 F12 在浏览器中激活调试,然后在调试器菜单中选择"Console"。

否则请按照下列步骤操作:

铬合金

  • 打开浏览器。
  • 从菜单中选择"More tools"。
  • 从工具中选择"Developer tools"。
  • 最后,选择控制台。

火狐浏览器

  • 打开浏览器。
  • 从菜单中选择"Web Developer"。
  • 最后,选择"Web Console"。

边缘

  • 打开浏览器。
  • 从菜单中选择"Developer Tools"。
  • 最后,选择"Console"。

歌剧

  • 打开浏览器。
  • 从菜单中选择"Developer"。
  • 从"Developer" 中选择"Developer tools"。
  • 最后,选择"Console"。

苹果浏览器

  • 转到主菜单中的 Safari、首选项、高级。
  • 检查"Enable Show Develop menu in menu bar"。
  • 当新选项 "Develop" 出现在菜单中时:
    选择"Show Error Console"。

你可知道?

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