一些小技巧

一键重新发起请求

重发请求，有一种简单到发指的方式。

• 选中 Network
• 点击 Fetch/XHR
• 选择要重新发送的请求
• 右键选择 Replay XHR

针对请求修改入参重新发起

• 选中 Network
• 点击 Fetch/XHR
• 选择 Copy as fetch
• 控制台粘贴代码
• 修改参数，回车搞定

复制 JavaScript 变量

• 使用 copy 函数，将对象作为入参执行即可

Node 下的 JSON 可视化

• 在控制台输入 console.log(util.inspect(obj, { depth: null, colors: true }));

控制台获取 Elements 面板选中的元素

调试网页时通过 Elements 面板选中元素后，如果想通过 JS 知道它的一些属性，如宽、高、位置等怎么办呢？

• 通过 Elements 选择要调试的元素
• 控制台直接用$0 访问

截取一张网页内容

全屏截图

• 准备好需要截屏的内容
• ctrl + shift + p 执行 Command 命令
• 输入 Capture full size screenshot 按下回车

截图指定的元素

• 将上面第三步输入 Capture node screenshot 即可

控制台引用上一次执行的结果

• 使用$_引用上一次操作的结果，不用每次都复制一遍

快速切换主题

• ctrl + shift + p 执行 Command 命令
• 输入 Switch to dark theme 或者 Switch to light theme 进行主题切换

"$"和"$$"选择器

在控制台使用 document.querySelector 和 document.querySelectorAll 选择当前页面的元素是最常见的需求了，不过着实有点太长了，咱们可以使用$和$$替代。

参考地址

https://mp.weixin.qq.com/s/c8T0zXaIkPAPulzzvQXw0A (opens in a new tab)