在浏览器中调试 JavaScript

x33g5p2x  于2022-06-13 转载在 Java  
字(1.3k)|赞(0)|评价(0)|浏览(216)

在本教程中,您将借助示例了解 JavaScript 中的调试。
    在编写程序时,您可能并且将会遇到错误。错误不一定是坏事。事实上,大多数时候,它们可以帮助我们识别代码中的问题。您必须知道如何调试代码和修复错误。
    调试(Debugging)是检查程序、发现错误并修复它的过程。
    有多种方法可以调试 JavaScript 程序。

1.使用console.log()

您可以使用 console.log() 方法来调试代码。您可以将要检查的值传递给console.log()方法并验证数据是否正确。
    语法是:

console.log(object/message);

您可以向 console.log() 传递对象或消息字符串。
    在上一个教程中,我们使用 console.log() 方法来打印输出。但是,您也可以使用此方法进行调试。例如,

let a = 5;
let b = 'asdf';
let c = a + b;

// if you want to see the value of c
console.log(c);

// then do other operations
if(c) {
    // do something
}

在浏览器中使用 console.log() 方法会在调试器窗口中打开值。

console.log() 方法在浏览器中的工作原理

console.log() 不是特定于浏览器的。它也可用于其他 JavaScript 引擎。

2.使用调试器

debugger 关键字停止代码的执行并调用调试函数。debugger 几乎在所有 JavaScript 引擎中都可用。
    让我们看一个例子,

let a = 6;
let b = 9;
let c = a * b;

// stops the execution
debugger;

console.log(c);

让我们看看如何在 Chrome 浏览器中使用调试器。

    上述程序在包含 debugger 的行中暂停程序的执行。
然后,您可以在检查程序后恢复流控制。
    在控制台中按 play 键恢复脚本时,将执行其余代码。

调试器在浏览器中的工作原理

3.设置断点

您可以在调试器窗口中为 JavaScript 代码设置断点。
    JavaScript 将在每个断点处停止执行并让您检查值。然后,您可以恢复代码的执行。
    让我们看一个在 Chrome 浏览器中设置断点的例子。

在浏览器中处理断点

您可以在代码中的任何位置通过 Developers 工具设置断点。
    设置断点类似于在代码中放置调试器。在这里,您只需通过单击源代码的行号来设置断点,而不是手动调用调试器函数。
    在上述方法中,为了简单起见,我们使用 Chrome 浏览器来展示调试过程。但是,这不是您唯一的选择。
    所有好的 IDE 都为您提供了调试代码的方法。调试过程可能有点不同,但调试背后的概念是相同的。

上一教程 :JS Regex                                         

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/debugging

相关文章

微信公众号

最新文章

更多