接口调试

直接在 Console 输入：

res = await fetch('api url'); // 接口url
data = await res.json();

这样可以快速的验证后端同学的接口通不通，返回的结果是否正确。

过滤请求

除了输入接口名过滤请求，还可以根据其它条件过滤

光标定位在过滤输入框，按下 ctrl + 空格，会展示更多的过滤关键字。

选中 dom 节点，按一下 h 就可以隐藏你选中的元素，再次按下 h 可以使它出现

在控制台（任何选项卡）中，按 esc 显示drawer，再次按 esc 隐藏它

试一试：在控制台运行 copy(location)，然后在任何地方粘贴 ctrl/cmd + v 一下

同理，在代码调试过程中，比如要想查看某个参数（假如这个参数叫 data）的值，通过调用 copy(data)，可以将该参数的值直接复制到剪贴板

如果你在调试中要关注某个参数，除了上述的 copy() 方法，还可以右击它，并选择 Store as global variable 选项。

1、打开控制台，切到 Elements, 选中 dom 结点，比如 body

2、ctrl/cmd + shift + p 打开命令搜索框，输入 screen

3、选 Capture full size screenshot

1、试试控制台输入 console.table(location)，同理，也可以将多个变量像这样打印 console.table({a, b, c, d})

2、选中一个dom结点，然后试试输入 $0，$0 是对我们当前选中的 html 节点的引用。同理，$1 是对上一次选择的节点的引用，$2 是对上上一次选择的节点的引用，以此类推，一直到 $4

3、?('div') 等价于 document.querySelectorAll('div')

4、 console.dir 可以查看打印一个dom节点所关联到的真实的 js 对象

5、在打印的文本前面加上 %c，第二个参数就可以写样式了:

console.log('%cThis text will be styled!', 'color: red; font-size: 24px;');

6、使用 console.log 作为回调方法，以下两种方法等价：

getData(res => console.log(res))
getData(console.log)

如

navigator.geolocation.getCurrentPosition(console.log)

不需要刷新页面

1、打开控制台，切到 Sources, 在导航栏里选中 Snippets 这栏

2、点击 New snippet(新建一个代码块) ，输入你的代码之后保存

对于在控制台需要高频运行的代码，避免每次都重敲一次的麻烦

之后，通过 ctrl/cmd + shift + p 打开命令搜索框，输入 ！，就可以筛选代码块