序言
针对chorme的控制面板调试工具，做为前面肯定都理解了基本的应用，可是这些年的开发设计经历中，常常依然会传出“原先还可以这样用”的感概，想一想可能没有多少人能了解所有的调节选择项，因此写一个系列文章来分享一下，这些“还可以那样”的功效。但是奇奇怪怪的作用一直许多的，我并不想仅仅循规蹈矩写出一篇说明文档来，文中尽可能只挑选出这些有意义的作用来介绍。
此系列文章还是按照调节栏的tab为归类来进行介绍，希望能够帮助到大家对于调试工具有新的认识，进一步提高研发效率。
此章范畴：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等重要内容。