前言
对于chorme的控制台调试工具，作为前端应该都掌握了基础的使用，但是这几年的开发经历中，时常还是会发出“原来还能这样用”的感概，想想估计很少有人能熟悉全部的调试选项，所以写个系列文章来分享一下，那些“还能这样”的功能。不过稀奇古怪的功能总是很多的，我并不想只是按部就班写出一篇说明文档来，本文尽量只选出那些有价值的功能来讲解。
此系列文章就按照调试栏的tab为分类来进行讲解，希望能帮助大家对调试工具有新的认识，进一步提高开发效率。
本系列计划一共分为三章，此为第一章；
第三章：[chrome调试工具进阶指南（三）]（未完成）
本章范围：elements，source，console。
一、console
1.页面刷新后仍然保留日志
这是我相当喜欢的一个功能，在不知道这个功能之前，遇到某个log后有刷新或者跳转逻辑的时候，经常需要手动return，多次改动后刷新对比效果也是靠记忆很麻烦，非常不直观，浪费了不少时间。
设置如下：
点击console面板右上角的设置齿轮logo，选中“preserve log”即可，如图所示，刷新后中文日志依然保留，蓝色字体标明了你刷新或者跳转的时机和路径，非常方便。
2.展示日志打印时间
无需多言，直接看效果：
设置位置如图：
3.直接在console安装npm包
通过chrome插件可以实现在控制台直接安装npm包，方便使用一些临时的工具类库来调试。 使用安装都比较简单，不再赘述，详见console-importer。
效果如下图（图源官方readme）:
二、source
1.断点调试-为变量添加watcher
断点调试是一个极为常用的功能，相信大家也都了解F8，F10等等快捷键的用途，这里想提及的一点是，断点调试中对变量的观察，其实可以选中变量并添加监听，比光标hover显示更方便。
通常的方式，鼠标光标覆盖，显示变量：
我们将需要观察的变量加入监听列表（选中变量并右键）：
来看看效果，注意观察右侧watch的变化，是不是直观了很多？再也不用在一堆代码里去小心翼翼选中变量了。
2.将控制台修改直接同步源文件代码
很多时候我们都会在source调试我们的元素样式，然后再将调整好的样式复制到编辑器的源代码中。那么这个设置将省略复制的这一步，将在source修改的样式直接修改到源文件中。
设置方式，在FileSystem选项卡中点击“add folder to workspace”,选中你的项目文件即可（mac系统会询问权限许可，需同意）
来看看效果，我尝试随便修改一个css代码,增加一个color为红色，再在编辑器改为黑色，源文件与source文件将会同步修改。
三、Elements
1.快速生成元素选择的js代码
选中元素后，右键copy js path，可以快速生成选中当前元素的js代码；
剪贴板粘贴：
另外顺便一提，在console中使用$以及$$也可以用较短的js代码快速对元素进行选择，代替“document.querySelector”和“document.querySelectorAll”
$("span")
控制台输出：<span class="byte-select__suffix byte-select__suffix--down">…</span>
$$("button")
控制台输出：(5) [button.xitu-btn.with-padding.xitu-btn-outline, button.xitu-btn, button.select-btn, button.ui-btn.btn.line.medium.default, button.ui-btn.btn.primary.medium.default]
2.将节点保存为xPath
注：xpath是一个python中流行的html解析库，可以解析并返回结构化的html对象
很多前端或许没用过这个选项，但是xpath几乎是写爬虫最流行的html解析库，不同于js的节点选择语法，xpath有自己的一套规则表示对某个节点标签的获取，如果自己手动去写某个节点的获取代码是比较麻烦的，而保存为xpath就方便多了。
copy xpath 和copy full xpath 的区别就是前者为相对路径，后者为绝对路径。
剪贴板内容：
//*[@id="zh-CN"]/div[10]/div[3]
/html/body/div[10]/div[3]
篇幅有限，第一章内容到此结束，希望能给朋友们一些收获，如果反响不错大家都有兴趣，后面会继续完善network、performance等重点内容。
