大多数前端er不知道的浏览器调试骚技巧

1,075 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第6天,点击查看活动详情


前言

介绍两个浏览器调试的小技巧,90%的前端 er 都不知道的骚操作,绝对让你眼前一亮,直呼:好骚啊。

条件断点

断点调试是前端 er 很重要的工具,它的作用是在我们关注的代码出断住,然后可以一步一步的看到代码的执行逻辑。大部分前端 er 使用断点调试时都在使用它最基础的功能。 image.png

在我们开发过程中,经常会需要测试某种场景下的代码,大多数前端 er都是写一行假数据以满足特定的场景。以下面这段代码为例,介绍一下条件断点的使用方法,使得不修改源码也能满足不同的 if 条件:

let num = 0;
if (num > 0) {
  console.log("大于");
} else if (num == 0) {
  console.log("等于");
} else {
  console.log("小于");
}

设置普通的断点只需要在 F12 > 控制台 > Sources 找到对应的代码左键一下就可以打上断点,如果我们要添加条件的话,可以在需要添加断点的位置右键,选择 Add conditional breakpoint这是会出现一个输入框,在输入框内输入表达式num = 3,回车保存。然后执行断点代码,会发现if 语句大于 0 的判断会被执行,控制台输出“大于”。同样修改表达式num = -1,就会进入 else 的条件判断。

image.png

image.png

image.png

再看这段代码:

for (var i = 0; i < 20; i++) {
  console.log(i);
  // 其他业务逻辑
}

还是同样的方式,这次我们输入表达式 i == 10,会发现代码会执行到i为10时才会断住,继续执行的话i不满足等于10的条件,就不会被断住。。

QQ20220429-230203-HD.gif

条件断点的方式可以大大的提高我们使用断点调试的效率。

请求重发

我们跟后端联调接口时候,后端经常会要求我们再调用一下接口这时候大部分人都会刷新页面重新触发,有的业务甚至需要依赖好几步,非常的浪费时间。其实这种请求重发是有骚操作的。

F12 > 控制台 > Network 中找到需要重新发送的请求,右键,点击 Replay XHR,这个请求就会被重发。

QQ20220429-225854-HD.gif

如果想要修改请求的信息,可以右键选择 Copy as fetch,然后回到Console面板,粘贴,会发现请求的参数、header等信息一目了然,可以在控制台修改参数,然后回车,即可重新发送请求。

image.png

image.png

结尾

本次介绍了两个使用谷歌浏览器调试的骚操作,如果对你有点点帮助的话,可以帮忙点个赞吗!!!