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选择当前页面的元素是最常见的需求了,不过着实有点太长了,咱们可以使用 和 和 和$替代。