JavaScript 调试


目录

    显示目录


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


代码调试

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

其中许多错误很难诊断。

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

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


JavaScript 调试器

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

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

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

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


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>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

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

</body>
</html> 

提示:在我们的 JavaScript 控制台参考中了解有关 console.log() 方法的更多信息。


设置断点

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

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

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



调试器关键字

debugger 关键字停止 JavaScript 的执行, 并调用(如果可用)调试功能。

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

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

当调试器打开时,这段代码将在它之前停止执行 执行第三行。

例子

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Debugger</h2>

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

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

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

</body>
</html>

主要浏览器的调试工具

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

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

铬合金

  • 打开浏览器。

  • 从菜单中选择“更多工具”。

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

  • 最后,选择控制台。

火狐浏览器

  • 打开浏览器。

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

  • 最后,选择“Web 控制台”。

边缘

  • 打开浏览器。

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

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

歌剧

  • 打开浏览器。

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

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

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

苹果浏览器

  • 转到主菜单中的 Safari、首选项、高级。

  • 选中“启用在菜单栏中显示开发菜单”。

  • 当菜单中出现新选项“开发”时:
    选择“显示错误” 安慰”。


你可知道?

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