Chrome 73 DevTools 新功能之 Logpoints

前言

今天早上 Chrome 更新到 73 版本，其中 Logpoints 对于常用 console.log 的开发者来说，有较大的便捷性。

版本说明

本篇文章提到的 Chrome 73 的版本为： 73.0.3683.75（正式版本） （32 位）。

什么是 Logpoints

简单来说， Logpoints 是使用类似断点的方式，来实现控制台的输出。

Logpoints 的优势

1. 减少调试代码，提高代码的整洁性。
2. 直接在 面板 添加 控制台输出，调试更加方便。
3. 线上的网站也可以直接添加 控制台输出。

Logpoints 如何使用

1. 在 Sources 面板找到需要添加 控制台输出 的代码，这里我列举输出 img 常量；

   

2. 右击当前代码的行数，在菜单中选择 Add logpoint... ;

   

3. 在弹出的输入框中，输入 输出信息 然后回车，这里我输出 img 常量；

   

4. 刷新页面，就可以在控制台看到输出信息了。

   

总结

个人感觉 chrome 73 中的 Logpoints 对于调试来说有两点很方便：

1. 避免了在代码中添加 console.log ，然后返回浏览器刷新页面，最后又返回编辑器删除 console.log 这个复杂步骤。
2. 查看线上的网站时，也可以通过 Logpoints 来输出信息，方便调试代码的运行情况。