JS调试必备的5个debug技巧

1. 使用Chrome DevTools中的Debugger进行代码调试

Chrome DevTools提供了一个强大的Debugger工具，可以让我们在代码运行时进行调试，具有断点续调、单步调试、条件断点等功能。

使用步骤：

1. 打开Chrome浏览器，进入开发者模式（F12或Ctrl+Shift+I）。
2. 在Sources面板中，找到需要调试的JavaScript文件。
3. 在代码行号上点击一次，就可以添加一个断点。
4. 在Debug面板中，点击play按钮运行代码，代码运行时将会在添加的断点处停止，可以进行调试。

示例代码：

function checkNumber(number) {
  if (typeof number !== 'number') {
    throw new Error('必须传入数字类型！');
  }
}
checkNumber('123');

添加断点并运行代码后，可以发现代码会在throw语句处停止执行，可以查看当前运行时的变量值，以及执行堆栈等信息，方便进行调试。

2. 使用console.log进行代码调试

console.log是调试JavaScript代码时最常用的一种方法，可以在控制台中输出变量值、对象等信息。

使用步骤：

在需要查看的变量或对象处，添加以下代码：

console.log("变量名: ", 变量值);

示例代码：

const number1 = 1;
const number2 = 2;
const sum = number1 + number2;
console.log('sum: ', sum);

在控制台中执行以上代码，将可以看到输出的sum变量值为3，方便进行调试。

3. 使用assert进行运行时错误的验证

assert是Node.js和浏览器中提供的一个断言库，用于检测某个表达式是否为真，如果为假，则抛出一个错误。

使用步骤：

在需要验证的表达式处，添加以下代码：

assert(表达式, 错误信息);

示例代码：

function checkNumber(number) {
  assert(typeof number === 'number', '必须传入数字类型！');
}
checkNumber('123');

在执行以上代码时，将会在控制台中输出“AssertionError: 必须传入数字类型！”的错误信息，方便进行调试。

4. 使用debugger进行程序停止调试

debugger是JavaScript语言提供的一种内置方法，可以让代码在指定处停止执行，方便进行调试。

使用步骤：

在需要进行调试的代码处，添加以下代码：

debugger;

示例代码：

const number1 = 1;
const number2 = 2;
debugger;
const sum = number1 + number2;
console.log('sum: ', sum);

在执行以上代码时，代码会在添加的debugger语句处暂停执行，方便查看当前运行时的变量值等信息，进行调试。

5. 使用network面板查看网络请求

当我们需要查看某个网站或应用的网络请求时，可以使用Chrome DevTools中的network面板。

使用步骤：

1. 打开Chrome浏览器，进入开发者模式（F12或Ctrl+Shift+I）。
2. 在Network面板中，刷新需要查看网络请求的页面。
3. 在列表中，可以查看各个请求的URL、请求方式、响应时间等信息。
4. 选择其中的一条请求，可以查看该请求的Headers、Params、Response等详细信息。

示例：打开任意一个网站，在Network面板中查看该网站的请求信息。

以上就是JS调试必备的5个debug技巧的完整攻略，希望能够帮助开发者在调试过程中更加高效地进行调试。