本文介绍了Chrome调试工具的进阶使用方法，包括console面板如何保留日志、展示日志时间，以及直接安装npm包。在source面板中，讲解了断点调试时添加watcher和同步源文件代码的功能。Elements部分则分享了快速生成元素选择JS代码和保存节点为XPath的方法。这些技巧能提升前端开发者的工作效率。
一、console
1.页面刷新后仍然保留日志
这是我相当喜欢的一个功能，在不知道这个功能之前，遇到某个log后有刷新或者跳转逻辑的时候，经常需要手动return，多次改动后刷新对比效果也是靠记忆很麻烦，非常不直观，浪费了不少时间。
设置如下：
点击console面板右上角的设置齿轮logo，选中“preserve log”即可，如图所示，刷新后中文日志依然保留，蓝色字体标明了你刷新或者跳转的时机和路径，非常方便。
2.展示日志打印时间
无需多言，直接看效果：
设置位置如图：
3.直接在console安装npm包
通过chrome插件可以实现在控制台直接安装npm包，方便使用一些临时的工具类库来调试。 使用安装都比较简单，不再赘述，详见
最低0.47元/天 解锁文章
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
