js如何debugger调试

JS调试技巧：使用debugger进行高效调试

使用debugger关键字、设置断点、使用浏览器开发工具、调试控制台、分析调用堆栈、监视变量。在这篇文章中，我将详细介绍如何使用这些方法进行调试，并重点描述如何利用浏览器开发工具进行高效调试。

浏览器开发工具是前端开发者最常用的调试工具之一。它提供了强大的功能，包括设置断点、查看变量值、分析调用堆栈等。要使用这些功能，你只需在浏览器中打开开发工具（通常是按F12或右键选择“检查”），然后导航到“Sources”标签。通过设置断点并运行代码，你可以逐步查看代码的执行过程，找到并修复错误。

一、使用`debugger`关键字

在JavaScript代码中，debugger关键字是一个非常实用的工具。它会暂停代码的执行，并允许你在开发工具中查看当前的代码状态。

1.1、基本用法

将debugger关键字插入到你希望暂停的代码行中。例如：

function calculateSum(a, b) {
    let sum = a + b;
    debugger; // 代码将在这里暂停
    return sum;
}
calculateSum(5, 10);

当浏览器执行到debugger关键字时，会自动打开开发工具并暂停代码执行。这时，你可以查看变量值、调用堆栈以及其他调试信息。

1.2、结合条件语句使用

你可以将debugger关键字与条件语句结合使用，以便在特定条件下暂停代码执行。例如：

function checkEvenOdd(number) {
    if (number % 2 === 0) {
        debugger; // 仅在number是偶数时暂停
    }
    return number % 2 === 0 ? 'Even' : 'Odd';
}
checkEvenOdd(4);

这种方法可以帮助你更有针对性地调试代码，减少不必要的暂停。

二、设置断点

断点是调试过程中最常用的工具之一。通过设置断点，你可以在特定行暂停代码执行，并检查当前的状态。

2.1、如何设置断点

在浏览器开发工具中，导航到“Sources”标签，找到你要调试的JavaScript文件。点击行号来设置断点。例如：

function multiply(a, b) {
    let product = a * b;
    return product;
}
multiply(3, 4);

点击let product = a * b;这一行的行号，设置断点。当代码执行到这一行时，会自动暂停。

2.2、条件断点

条件断点允许你在特定条件下暂停代码执行。在设置断点的行上右键点击，选择“Edit breakpoint…”，然后输入条件表达式。例如：

function findMax(arr) {
    let max = arr[0];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}
findMax([1, 5, 3, 9, 2]);

你可以为if (arr[i] > max)这一行设置条件断点，条件为arr[i] === 9。这样，代码只会在数组元素为9时暂停。

三、使用浏览器开发工具

浏览器开发工具是前端开发者调试JavaScript代码的强大工具。以下是一些常见功能的介绍。

3.1、查看变量值

当代码暂停时，你可以在“Scope”面板中查看当前作用域中的变量值。例如：

function greet(name) {
    let greeting = 'Hello, ' + name;
    debugger;
    console.log(greeting);
}
greet('Alice');

当代码执行到debugger关键字时，你可以在“Scope”面板中查看name和greeting的值。

3.2、监视表达式

在“Watch”面板中，你可以添加要监视的表达式。例如：

function calculateArea(width, height) {
    let area = width * height;
    debugger;
    return area;
}
calculateArea(5, 10);

添加表达式width * height到“Watch”面板中，以便在代码暂停时查看其值。

四、调试控制台

调试控制台是一个非常有用的工具，可以帮助你在代码执行过程中输入和执行JavaScript代码。

4.1、基本用法

在代码暂停时，打开“Console”面板，输入JavaScript表达式并按回车。例如：

function subtract(a, b) {
    let result = a - b;
    debugger;
    return result;
}
subtract(10, 4);

当代码暂停在debugger关键字时，你可以在控制台中输入a和b，查看它们的值。

4.2、执行函数

你可以在控制台中调用函数，以便动态测试代码。例如：

function divide(a, b) {
    if (b === 0) {
        console.error('Cannot divide by zero');
    } else {
        return a / b;
    }
}

在控制台中输入divide(10, 2)，查看返回值，并测试不同的输入。

五、分析调用堆栈

调用堆栈显示了当前函数的调用路径，帮助你理解代码的执行流程。

5.1、查看调用堆栈

在代码暂停时，打开“Call Stack”面板。例如：

function firstFunction() {
    secondFunction();
}
function secondFunction() {
    thirdFunction();
}
function thirdFunction() {
    debugger;
}
firstFunction();

当代码暂停在debugger关键字时，你可以在“Call Stack”面板中看到调用路径firstFunction -> secondFunction -> thirdFunction。

5.2、导航到调用位置

在“Call Stack”面板中点击某个函数，可以导航到该函数的定义位置。例如：

function outerFunction() {
    innerFunction();
}
function innerFunction() {
    debugger;
}
outerFunction();

点击outerFunction，浏览器会跳转到outerFunction的定义位置，帮助你更好地理解代码执行路径。

六、监视变量

监视变量可以帮助你在调试过程中实时查看变量值的变化。

6.1、添加监视变量

在“Watch”面板中添加变量。例如：

function incrementCounter() {
    let counter = 0;
    counter++;
    debugger;
    return counter;
}
incrementCounter();

添加变量counter到“Watch”面板中，查看其值在代码执行过程中的变化。

6.2、监视复杂表达式

你可以监视复杂表达式，以便在调试过程中查看其值。例如：

function calculateDiscount(price, discount) {
    let finalPrice = price - (price * discount);
    debugger;
    return finalPrice;
}
calculateDiscount(100, 0.2);

添加表达式price - (price * discount)到“Watch”面板中，查看折扣计算的过程。

七、调试异步代码

调试异步代码（如回调函数、Promise和async/await）是一个挑战，因为它们不会按顺序执行。

7.1、调试回调函数

在回调函数中使用debugger关键字。例如：

function fetchData(callback) {
    setTimeout(() => {
        let data = 'Sample Data';
        debugger;
        callback(data);
    }, 1000);
}
fetchData((data) => {
    console.log(data);
});

当代码执行到debugger关键字时，你可以查看异步操作的结果。

7.2、调试Promise

在Promise的then和catch中使用debugger关键字。例如：

function getPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let success = true;
            if (success) {
                resolve('Promise Resolved');
            } else {
                reject('Promise Rejected');
            }
        }, 1000);
    });
}
getPromise()
    .then((message) => {
        debugger;
        console.log(message);
    })
    .catch((error) => {
        debugger;
        console.error(error);
    });

这样，你可以查看Promise成功或失败时的结果。

7.3、调试async/await

在async函数中使用debugger关键字。例如：

async function fetchDataAsync() {
    let data = await fetch('https://api.example.com/data');
    debugger;
    return data.json();
}
fetchDataAsync().then((data) => {
    console.log(data);
});