Chrome JS debug技巧

用好debug可以使得分析代码和解决bug事半功倍。

一. 基本使用

最基本的使用方式建chrome dev tools官方文档，说的已经比较详情，此处把链接搬了过来：
https://developers.google.com/web/tools/chrome-devtools/javascript

二.条件断点

1. 先在需要断点的代码行端点，红色圆圈展示出来

2. 在这个断点上右键，点击[Edit breakpoint...]

   
   
   条件断点

3. 输入条件断点
   输入条件表达式，比如下图

   
   
   输入条件表达式

4. 输入完成条件表达式，回车就会得到条件断点，只有满足你输入的条件才会断到这里。半填充的圆代表是条件断点。

   
   
   半填充的圆代表是条件断点

异常断点

当遇到异常时断点，方便调试异常出现的位置。
调试面板中的7变形按钮变成蓝色表示开启异常断点，下面的复选框选上代表捕获异常也会被断住，否则只断住非捕获异常。

异常断点

函数断点

如果想要在调用特定函数时暂停，可以调用 debug(functionName)，其中 functionName 是要调试的函数。 您可以将 debug() 插入您的代码（如 console.log() 语句），也可以从 DevTools 控制台中进行调用。 debug() 相当于在函数第一行中设置代码行断点。
括号里是标准的函数调用。

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum(2, 3)); // Pass the function object, not a string.
sum(2,3);

确保目标函数在作用域范围内

如果想要调试的函数不在作用域范围内，DevTools 会引发 ReferenceError。

如果是从 DevTools 控制台中调用 debug()，则很难确保目标函数在作用域范围内。 下面介绍一个策略：

1. 在函数在范围内时设置代码行断点
2. 触发此断点。
3. 当代码仍在代码行断点位置暂停时，即于 DevTools 控制台中调用 debug()。

如果对您有帮助，就打赏一下吧，哈哈哈