Web 调试技术｜ 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第10天，console 是我们开发中经常使用的功能，用来输出打印和调试开发，比较熟悉的有log、error、warn，这几个是常用的，也有很多其他的方法可以提高我们的开发效率。

1. console.log 这应该是我们最常用的功能，基本上每天都会使用到，作用也很简单，在控制台输出内容，这边有个小技巧。
2. console.warn 在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
3. console.error 在控制台输出错误信息，用于代码错误和异常的提示 4.console.time和console.timeEnd 这两个方法一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断。
4. console.assert 第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。

还有打断点的方法

1. 直接断点，开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点。
2. 代码断点，需要断点的地方，书写debugger就能实现断点，对于直接断点对比的缺点是不需要断点的时候，需要删除掉对应的断点代码。
3. 条件断点，相对于普通断点多了条件逻辑判断，只有符合条件逻辑的才会进入断点，这能解决有些断点会进入多次，但我们只需要符合特定逻辑的断点，这能提高效率。
4. DOM断点，对DOM节点发生变化时进行断点，使用 DOM 更改断点，最终还是会断点到触发dom操作的相应js上，但是更加高效。设置 DOM 断点：

   • 单击Elements选项卡
     

   • 找到要设置断点的元素
     

   • 右键单击该元素
     

   • 将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
     

5. VS code 断点，对于编译问题、脚本或者脚手架工具这些Node运行环境，就需要借助于IDE的调试环境了，Vs Code断点跟浏览器类似，都是主流操作。