记录一些js代码调试技巧

代码调试

1. 断点调试

• DOM断点追踪

1. Break on subtree modifications: 子节点修改，触发
2. Break on attributes modifications：节点属性变化，触发
3. Break on node removal：节点移除

调试方法：

• xhr断点调试

可添加断点条件，例如url满足条件时断点

• 事件监听器断点调试

设置的断点可在source面板查看：

4. Debugger调试

source面板手动添加断点或者代码添加'debugger'

• Resume/Pause script execution(F8): 暂停/回复脚本执行
• Step over next function call(F10): 执行下一条语句
• Step into next function call(F11): 进入当前函数
• Step out of current function(Shift + F11): 跳出当前执行函数, 执行下一条语句
• Deactive/Active all breakpoints(Ctrl + F8): 关闭/开启所有断点
• Pause on exceptions: 异常情况下自动设置断点

Call Stack：调用栈追踪 Scope：作用域（Local、Global）变量追踪

2. console调试

• console.table()

• console.group

• console.time

启动一个计时器，用于计算某个操作占用的时长（统计接口的请求时间）, 配合timeEnd使用

console.time('fetching data');
fetch('https://api.github.com/users/anran758')
  .then(data => data.json())
  .then(data => {
    console.timeEnd('fetching data');  // fetching data: xxxxxx ms
  });