chrome中的一些调试工具

1#. 一键重新发起请求

在与后端接口联调或排查线上BUG时，你是不是也经常听到他们说这句话：你再发起一次请求试试，我这边看下为啥出错了！

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

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

2#. 在控制台快速发起请求

还是联调或修BUG的场景，针对同样的请求，有时候需要修改入参重新发起，有啥快捷方式？

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

曾经我总是通过改代码或者手写fetch的方式处理，想想真是太傻了

3#. 复制JavaScript变量

假如你的代码经过计算会输出一个复杂的对象，且需要被复制下来发送给其他人，怎么办？

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

以前我总是通过JSON.stringify(fetfishObj, null, 2)打印到控制台，再手动复制粘贴，这效率实在是太低了

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

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

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

5.# "$"和"$$"选择器

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