前端高手10个谷歌浏览器调试技巧

713 阅读2分钟

1、在控制台直接重新发送网络请求

打开谷歌浏览器控制台的network,选中已经发起的某条网络请求,然后右键,直接点击Replay XHR即可重新发送买个网络请求

image.png

2、在console里快速发送请求

在谷歌浏览器控制台的network,选中已经发起的某条网络请求,然后右键,点击如下图就可以获取到当前选中的网络请求的fetch的具体信息, image.png 然后到console里粘贴,就可以看见刚刚复制的网络请求,回车就可以在console里发送网络请求。如下:

image.png 在这里还可以修改网络请求的头部,传参等

3、复制object

在浏览器里有时候我们可能想看一些变量的信息,这时候就可以如下图去复制:

image.png 复制出来的数据结构如下:

image.png 注:在Store object as global variable中还可以将变量存储为全局变量:

image.png

4、如何快速查看元素

先在如下图的地方选中一个元素,注意当我们选中时,元素后面会有一个$0的样式:

image.png 接下来直接在控制台里使用$0就可以获得元素的引用:

image.png

5、截完完整整的一整个页面

打开控制台,然后按下快捷键:Ctro+Shift+P 会有一个弹框如下图所示:

image.png 在该弹框中有如下的几种截屏方式:1、当前节点屏幕截图,2、截取区域屏幕截图,3、截取完整尺寸的屏幕截图,4、截取屏幕截图。点击第二个按钮,就可以实现,网页里所有内容的截图

ai.taobao.com__pid=mm_131341970_42698365_258142393&u=0 (2).png

6、一下展开所有元素节点

先按住alt(Mac是按住option键)键再点击要展开的元素,这样元素的所有子节点都会展示出来,而不用一个节点一个节点的展开,如下图:

image.png

7、在控制台快速获取上一次输入的内容

可以在控制台使用 ”$_“ 来获取上一次输入的内容

image.png

8、快速切换控制台主题

按下快捷键:ctri+Shift+P 然后运行:主题(如果是英文格式的就输入:switch),如下图所示:

image.png

9、在控制台快速选中元素

在控制台输入:$('选择器'),就可以获取被选中的元素,相当于:document.querySelector,如下图:

image.png 注使用:$$('选择器') 会选中所有与选择器对应的元素,相当于:document.querySelectorAll

image.png

10、可以根据条件打断点

可以在断点上右键会有如下弹框:

image.png 在这里可以设置当valid==true时才进入断点 image.png