1、如何进行快速重新发送请求

我们在对接口时,经常会要再看一下请求发送的数据或者返回的结果,一般情况向我们会通过刷新页面来重新请求接口获取数据。但其实谷歌浏览器有更快速的方式,如下图:
在这里插入图片描述
右击你要访问的接口,点击(Replay XHR)就可以快速发送请求了。

2、如何在控制台快速修改请求参数等进行调试

我们在调试接口时,经常需要修改某些参数进行调试,一般情况下我们要去代码里修改参数在发送请求进行调试。在浏览器中有更直接的方法,如下图:
在这里插入图片描述
已fetch的格式复制一份请求,然后粘贴到控制台,根据自己的需求修改相关参数后回车发送一个新请求
在这里插入图片描述

3、复制 javascript 对象

在这里插入图片描述
如上图,右键点击第一个红框可复制变量。点击第二个红框,将变量设置为全局变量生成一个变量temp1,后面可以之间使用该变量

4、快速选中 查看元素

首先用元素选择选中你想查看的元素,然后再到控制台输入 $0,就可以查看刚刚选中的元素,并且可以查看相关属性,类名等等
在这里插入图片描述

5、截取屏幕

我们可以用QQ,微信的截屏工具截取页面我们想要的内容,如果我们想要截取全页面时,可以使用浏览器自带的截图,首先F12打开控制台,然后CTRL + SHIFT + P,然后输入screen,可以选择自己需要的截屏方式,最后进行保存
在这里插入图片描述

6、快速展开所有子节点

我们经常会要在控制台查看元素或者打印的数据,有时候会遇到有很多子节点的元素或对象,每次都要去点击前面那个右三角形才能看到,如何快速展开所有子节点呢? 先按住 ALT 再点击右三角星就可以展开所有啦

7、控制台返回上一次输出结果

$_ 如下图:
在这里插入图片描述

8、快速切换主题

CTRL + SHIFT + P 执行theme(中文版本直接输入“主题”)
在这里插入图片描述

9、快速选中某些元素

在这里插入图片描述

这里$ 有点类是属于jquery,实质上 一个 $ 表示document.querySelector
两个 $ 表示document.querySelectorAll

10、根据条件打断点

在这里插入图片描述
在指定行添加条件断点指定即可

以上就是全部内容啦,这10个小技巧,你会用几个呢

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐