Js调试

断点和console.log区别

1 .断点可以更加快速的完成任务，相比于console.log.
2 .可以在执行代码的过程中暂停代码，并在检查所有相关值
3 .console.log需要自己写语句，但是断点是不需要了解代码
4 .console.log语句中，需要明确检查每个值。使用断电，会在暂停的时候显示所有变量值。

在函数事件断点

1 .Event Listener Breakpoints
2 .点击了click,就会在任何点击事件的时候暂停
3 .scope 里面会显示当前计算的所有值
4 .watch 里面可以添加表达式 ,scope里面可以打印出来值，但是表达式里面可以添加 typeof value 这种操作，可以查看值的类型
5 .console输入框里面也可以求当前脚本里面定义的变量

1.png

断点类型

1 .代码行 在明确的代码区域
2 .条件代码行 在确切的代码区域中，当且仅当一些条件成立时

1 .右键代码行号 Add conditional breakpoint 输入条件
2 .breakpoints 窗格可以从单个位置停用或者移除

3 .DOM 在更改或者移除DOM节点或其子级的代码中

1 .Elements标签
2 .右键 break on上面选择想要的类型
3 .Subtree modifications： 在移除或添加当前所选节点的子级，或更改子级内容时触发这类断点。 在子级节点属性发生变化或对当前所选节点进行任何更改时不会触发这类断点
4 .Attributes modifications：在当前所选节点上添加或移除属性，或属性值发生变化时触发这类断点
5 .Node Removal：在移除当前选定的节点时会触发

4 .XHR 当xhr请求网址中包含指定字符串模式时

1 .source ,xhr breakpoints ,add breakpoint

5 .事件监听器 在触发click等事件后运行的代码中
6 .异常 在引发已捕获或未捕获异常的代码行中

1.  点击 **Sources** 标签。
2.  点击 **Pause on exceptions** [图片上传失败...(image-8ff2ab-1605170431503)]

     {:.devtools-inline}。 启用后，此按钮变为蓝色。
3.  （可选）如果除未捕获异常以外，还想在引发已捕获异常时暂停，则勾选 **Pause On Caught Exceptions** 复选框。

7 .函数 在任何时候调用特定函数的时候

如果想要在调用特定函数时暂停，可以调用 debug(functionName)，其中 functionName 是要调试的函数。 您可以将 debug() 插入您的代码（如 console.log() 语句）

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

coverage检查代码覆盖率

1 .show Coverage

检查动画

1 .show Animations 检查当前页面的动画
2 .