前端调试技巧--关于chrome浏览器重新发起请求

1,767 阅读2分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

背景

最近做了一个需求,就是我们自己的页面,在接口调取成功后,会带着response跳转第三方页面。在调试过程中,就出现扯皮问题了。前端请求接口拿到数据跳转第三方,第三方那面老是说我们传的数据不对,让我们排查。因为涉及到跨域,跳转到第三方页面,我们在调试面板根本看不到我们自己的请求结果。

1678087900292.png

后来我们借助抓包软件完成了追踪。但是这种问题一旦出现在线上。我们该怎么解决,总不能让客户去装一个抓包软件吧

该怎么办呢?解铃还需系铃人,既然是浏览器限制了,那我们就从浏览器入手

查看资料,发现chrome有Replay XHR,一键发起重新请求

image.png

兴冲冲的试了一下,根本无任何反应。应该还是跨域问题,根本发不出请求。 那我切回自己项目的页面,是不是就能发出请求?然而还是没有任何用。 这时候,旁边的小伙伴说chrome还有一个方法,可以试试,比Replay XHR功能还多,在控制面板修改入参,快速请求

image.png

赶紧试了下

1678095459535.png

好像有用,好像又没用,是重新发出了一个请求,但是没返回值,看了network,也是这样,根本没response。 静下心想想。重新看了控制台fetch请求,发现浏览器复制下来的代码,发现他根本没写接收的代码,问题应该解决了

1678095712286.png

真的解决了

总结

正如开头所说,这个问题有更好,更快速的解决方法,但是仅针对chrome浏览器来说,这个方法在某个特定时刻还是值得一试的

目前我就想到抓包和这个浏览器方法,不知是否还有其他方法,求学习