1.控制台中直接访问页面元素
在元素面板选择一个元素,然后在控制台输入$0,就会在控制台中得到刚才选中的元素
反过来,在控制台输出的 DOM 元素上右键选择 Reveal in Elements Panel 来直接在 DOM 树种查看
2.访问最近的控制台结果
$_
3.选择元素
$() - 返回满足指定 CSS 规则的第一个元素，此方法为 document.querySelector()的简化。
4.使用 console.table
打印复杂信息时尝试使用 console.table 来替代 console.log 会更加清晰。
打印json对象用这个挺好的
5.使用 console.dir,可简写为 dir
console.dir(object)/dir(object) 命令可以列出参数 object 的所有对象属性
6.复制 copy
比如先输入location
Location {href: "https://juejin.im/post/5e0cb3ba5188253ab46da675#heading-6", ancestorOrigins: DOMStringList, origin: "https://juejin.im", protocol: "https:", replace: ƒ, …}
copy($_) 就是复制上一次访问的控制台结果，直接在剪切板里面了
7.获取对象键值 keys(object)/values(object)
8.清空控制台历史记录
console.clear(); 或者手动, esc键：调出和关闭控制台
9. debugger 断点
有时候我们需要打断点进行单步调试,一般会选择在浏览器控制台直接打断点,但这样还需要先去 Sources 里面找到源码,然后再找到需要打断点的那行代码,比较麻烦。
使用 debugger 关键词,我们可以直接在源码中定义断点,方便很多。
10:截图/切换主题色
F12之后,快捷键 ctrl+shift+p, 输入命令screenshot/theme
11.复制 Fetch
在 Network 标签下的所有的请求,都可以复制为一个完整的 Fetch 请求的代码。
12.重写 Overrides
在 Chrome DevTools 上调试 css 或 JavaScript 时,修改的属性值在重新刷新页面时,所有的修改都会被重置。
如果你想把修改的值保存下来,刷新页面的时候不会被重置,那就看看下面这个特性（Overrides）吧。Overrides 默认是关闭的,需要手动开启,开启的步骤如下。
开启的操作:
打开 Chrome DevTools 的 Sources 标签页选择 Overrides 子标签选择 + Select folder for overrides,来为 Overrides 设置一个保存重写属性的目录,这时在浏览器的页面上会弹一个东西，你允许就行了，之后修改完,ctrl+s就会保存在本地
注：修改css样式后，确实刷新后不会重置！！！
注：小技巧，在console下输入document.body.contentEditable='true' , 整个页面随便你编辑，还有一个document.designMode='on'; 也是可以做到的(只能改文本)，可以随意的拖拽，删除
但重写 Overrides对这个好像是没有效果的，但你应该可以保存整个html下下来,
13.滚动到视图区域 Scroll into view
查看Element时，有时不知道对应页面的哪里，这时Scroll into view，就可以找到页面对应的位置
14.Source--> snippets(片段)
在这里可以写js代码片段，相对于一个编辑器一样
注: console下面也可以写js片段,但是不太方便
15.事件监听断点（比如点击事件）
选中一个元素，然后Source --> Event Listener Breakpoints --> 鼠标断点
参考：
https://juejin.im/post/5e0cb3ba5188253ab46da675#heading-6
https://www.jb51.net/article/147438.htm