10个谷歌浏览器调试技巧

2024-04-10 02:18:34

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个小技巧，你会用几个呢

10个谷歌浏览器调试技巧相关推荐

Java程序员应该知道的10个Eclipse调试技巧
为什么80%的码农都做不了架构师?>>> Eclipse是众多Java程序员实用的开发工具,其中开发技巧也是繁多,但作为优秀的Java程序员,需要掌握最起码的调试技巧. 1 条 ...
10个java调试技巧
http://www.bdqn.cn/news/201312/12443.shtml-----10个java调试技巧(1) http://www.bdqn.cn/news/201312/12455.s ...
谷歌浏览器调试技巧【三】
前言本文暂未涉及Performance面板的内容. 后续会单独出一篇,以下是目录: 常用命令和调试黑盒脚本:Blackbox Script 控制台内置指令远程调试WebView 1. Chrom ...
Java程序员应该知道的10个调试技巧
摘要:调试不仅可以查找到应用程序缺陷所在,还可以解决缺陷.对于Java程序员来说,他们不仅要学会如何在Eclipse里面开发像样的程序,更需要学会如何调试程序.本文介绍了Java程序员必知的10个调试 ...
Visual Studio原生开发的10个调试技巧
最近碰巧读了Ivan Shcherbakov写的一篇文章,<11个强大的Visual Studio调试小技巧>.这篇文章只介绍了一些有关Visual Studio的基本调试技巧,但是还有其 ...
Java 10个调试技巧
调试不仅可以查找到应用程序缺陷所在,还可以解决缺陷.对于Java程序员来说,他们不仅要学会如何在Eclipse里面开发像样的程序,更需要学会如何调试程序.本文介绍了Java程序员必知的10个调试技巧, ...
这10个实用的Javascript调试技巧，你知道吗？
见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们着急.因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点" ...
谷歌浏览器前端调试技巧01——使用F12清除缓存
对于搞前端开发的人来说,前端调试是不可避免的,使用谷歌浏览器调试更是必备手段,今天主要是给大家分享一下清楚缓存的技巧.已经了解的朋友请移步. 为什么需要清理浏览器缓存? 我们通常说的WEB应用采用BS ...
你可能不知道的 IDEA 高级调试技巧
作者:十光年 www.cnblogs.com/jun1019/p/9741224.html 一.条件断点循环中经常用到这个技巧,比如:遍历1个大List的过程中,想让断点停在某个特定值. 参考上图, ...
你所不知道的 Android Studio 调试技巧
Android Studio目前已经成为开发Android的主要工具,用熟了可谓相当顺手.作为开发者,调试并发现bug,进而解决,可是我们的看家本领.正所谓,工欲善其事必先利其器,和其他开发工具一样, ...

最新文章

热门文章