背景

代码调试环节，为检查代码中各部分数据是否正常，常用console.log的方法打印出结果。但是，这部分console.log的代码开发人员一般不会在用完后立即注释或删除，造成系统在调试或系统上线后，在浏览器控制台中可以看到大量的log，特别是log多了以后会影响页面性能。

console.log打印的对象是不会被垃圾回收器回收的。因此最好不要在页面中console.log任何大对象，这样可能会影响页面的整体性能

在Angular环境下，可以通过main.ts全局控制的log显隐，甚至可以在生成环境与调试环境中分别控制，比如调试环境不屏蔽，生产环境屏蔽。
关于这部分的实现方法可参照：
生成环境下屏蔽console.log

但是，代码中仍然存在大量的console.log代码，影响代码美观。同时对于项目协助或后期项目维护而言，可能会造成干扰，陷入删前人的log，又造新log的困局中。通过查阅相关资料发现，可以通过logpoints来减少log泛滥的问题。

如何在VSCode中使用logpoint

配置快捷键呼出logpoint

vscode快捷键配置打开方法：文件→首选项→键盘快捷方式，或者使用快捷键Ctrl+K,S
image.png
在打开的页面中搜索debug:addlogpoint，按下图提示绑定快捷键（要求不与其他快捷键冲突）
image.png

插入logpoint

image.png

查看日志

按下F5打开debug模式（必须在debug模式下），执行到对应代码处就会看到log
浏览器控制台中
image.png
vscode调试控制台中
image.png

批量停用/激活log断点、删除断点

在调试页面下可以看到所有的log断点，下图的的标识中可以看到批量【停用/激活log断点】以及【删除所有断点】的功能
image.pngimage.png

单个停用/激活log断点、删除断点及编辑断点

image.png

总结

  1. logpoint必须在debug模式下才会生效；
  2. logpoint可以一键实现所有log断点的停用、启用和删除；
  3. logpoint的log断点的停用、启用和删除不需要刷新页面；
  4. logpoint不会影响代码，更不会被同步到git中，只在本机生效，不会影响他人的代码

新项目中建议使用该方式打印所需值！