一、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就方便多了。
剪贴板内容：
//*[@id="zh-CN"]/div[10]/div[3]
/html/body/div[10]/div[3]
篇幅有限，第一章内容到此结束，希望能给朋友们一些收获，如果反响不错大家都有兴趣，后面会继续完善network、performance等重点内容。
最后
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享
部分文档展示：
文章篇幅有限，后面的内容就不一一展示了
有需要的小伙伴，可以点下方卡片免费领取