---

DOM 操作相关

1.查看某dom元素特性

1. 通过Elements选中要调试的元素
2. 控制台直接用$0访问

如果要拿到此dom的一些属性：位置、高矮胖瘦等。 $0.offsetHeight

2.瞬间打开dom树

对于层级比较复杂的dom元素结构，想一下子全部展开。

1. 按住opt键 + click（window:alt + click）

3. "$"和"$$"选择器

在控制台可以使用$和$$替代document.querySelector和document.querySelectorAll选择当前页面的元素。

$('div')//第一个div被选中
$$('div')//所有div标签被选中
$('.footer')//class为footer的被选中

4.滚动元素到视图

在调试DOM元素的时候，我们已经聚焦到相关的DOM结构上了，但是对应的元素并没有在可视窗口上展示，那么我们可以将其快速滚动到可视窗口。

1. 右键选中的DOM节点
2. Scroll into view

---

网络操作相关

1. 一键重发某个请求

1. 选中某请求
2. 直接按下键盘 的 R键。（或右键选择Replay XHR）

你跟后台联调的时候，他让你再发一次请求，不用重新刷新整个页面了吧！

2.在控制台改完参数后重新发请求

1. 选中某请求
2. 右键选择Copy as fetch
3. 控制台粘贴代码
4. 修改参数，回车搞定

省的你改代码，保存，刷新才能去验证了吧。

---

js控制台操作相关

1.引用上一次执行的结果

控制台直接用$_访问，就可以拿到上一次操作的返回值。省着你定义变量一步步存了。

let arr = [1,2,3,3.5]
let newArr = arr.map(item => item*2)
let num = newArr.filter(item => item%2 === 0)

使用$_ 怎么做呢？

let arr = [1,2,3,3.5]
arr.map(item => item*2)//回车运行后

$_.filter(item => item%2 === 0)//使用$_

2. 拷贝一个对象结构

对象身上右键/复制object。或者用copy 函数包裹下：copy(对象变量)，直接就到了剪贴板里了。

省得你代码里改成JSON.stringify(obj)，再打印到控制台了。

---

缓存操作相关

1.快速清空站点数据缓存

1. 控制面板
2. ctrl+shift+p
3. clear site data

省的你到cookie、localStorage、sessionStorage挨个清空了。

2.新建无痕窗口

不会携带之前保存的cookie，也不会保存cookie到本地，可以完整的查看请求的完整过程。

1. ctrl + shift + N

3.保留请求

Preserve log勾选后，会保存跨页面的请求，这样跳转前后的请求都会显示在同一个请求列表中。或者你刷新页面，请求都是会保留下来。

---

源文件阅读与查找

1. 压成一行的代码展开

我们发现一些 js 都是压缩的，一行长长的代码看不到尽头，我们可以点击下面的 {} 大括号按钮将代码转成可读格式

2.快速定位源文件

使用快捷键：ctrl + p

3.快速定位文件中的函数

使用快捷键：ctrl + shif + o

---

其他操作

1.设置地址栏的搜索引擎