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 来输出信息，方便调试代码的运行状况。