编程知识 cdmana.com

前端小技巧之debug与测试网络请求负载

需求:更改前端的某个ajax网络请求的负载(payload)并测试保证功能正常

假如此次的修改改动较大,或者原本的构建 payload 的逻辑比较复杂,我们可能需要反复地修改和测试。

如果这个 ajax request发送后对后端资源造成的影响很小的话 —— 比如 创建一本书籍记录,更新一篇文章的标签,其实我们也不需要考虑太多,直接一边修改一边测试就可以了。

因为这些不痛不痒的资源即使在测试过程中被创建或者修改了,测试结束后也可以轻松地删掉,不会造成大影响。


但是,假如这个ajax request 在后端会触发比较重的操作 —— 比如创建某个服务集群,重新部署某个服务节点,我们就得谨慎考虑了。

这类比较重的操作一方面会花费比较长的时间,另一方面会真实地修改或消耗线上资源,随意且频繁地测试并不合适。

这种情形要求我们除了最后的一两次验收,其余的测试都不该真的发请求到后端.

那应该怎么做呢?


方案一:修改并注释请求发送的代码

假如以下是原本的代码

getFormData = ()=> {
  // construct the payload from form data
}

onSubmit = () => {
    const payload = getFormData();
    httpClient.postRequest(payload);    
};

测试时期的代码

getFormData = ()=> {
  // construct the payload from form data - updated some code and logic
}

onSubmit = () => {
    const payload = getFormData();
    console.log(payload); 
    //httpClient.postRequest(payload);     
};

我们把 httpClient.postRequest(payload); 这行代码注释掉,并增加 console.log(payload); 把payload 打到 console 里查看。确认修改后的payload完全正确后(这个过程可能会反复多次),再去掉注释代码。


这种方案的确避免了真正的网络请求的发起,代码逻辑也清晰简单。

但这种方案的缺点也很明显,我们修改了原本能工作的代码——即注释了httpClient.postRequest(payload); 在开发结束后,假如我们忘记了去掉这行注释,把代码推到线上,就会导致这个表单功能失效。


方案二:在表单提交的代码设置断点

同样用上面的代码为例

getFormData = ()=> {
  // construct the payload from form data
}

onSubmit = () => {
    const payload = getFormData();
    httpClient.postRequest(payload); // set breakpoint here
};

我们需要在 httpClient.postRequest(payload); 这行打断点

具体怎么做呢?

打开Chrome 开发者工具,然后看下图(注意各个箭头)

ebbf919f2ffe52701c2258f651ecca82.jpeg

触发网络请求前,代码会被断点拦截,此时我们就能在右边栏里看到ajax request的payload了。

由于断点阻断了代码的执行,这个ajax request不会发送到服务器。

假如发现payload不对,继续修改代码后,只需要刷新页面就可以重置当前页面的js代码运行状态(脱离断点)。

这种方案解决了方案一的问题 —— 不修改任何原本能正常工作的代码

但是这种方案的缺陷也很明显:假如打断点的js文件正是正在被修改的代码文件,一旦增加或减少代码行数,断点的位置却仍然打在原本的那行上(或最靠近的可执行代码上)

举个例子:上面截图的23行代码现在是 httpClient.postRequest(payload) 但是这个文件的其他地方增加或减少了代码,导致 httpClient.postRequest(payload) 现在在 27行,而断点偏移到了 25 行上(因为 23行不可执行)

a2f9b6124f4350652095e5ae12312bca.jpeg

为了避免这种情况,我们可以在 httpClient.postRequest(payload); 前加 debugger —— 可以起到一样的断点效果 (前提是打开 Chrome 开发工具栏)且不会随意偏移,代码如下:

getFormData = ()=> {
  // construct the payload from form data
}

onSubmit = () => {
    const payload = getFormData();
    debugger;
    httpClient.postRequest(payload); 
}


但使用 debugger 会带来类似方案一的缺点 —— 在开发完成后,记得清理 debugger 这行代码。

另一个避免断点偏移的方案是把断点打到非修改的js文件上 ,但这种方案有前提条件——上述的 httpClient代码 是在另一个js 文件内。

总之,方案二使用 Chrome 开发者工具打断点 或者 加入 debbuger 仍然有局限性,有些情况下不是非常方便。


方案三:巧用Chrome开发者工具使网页离线

阻止请求发送到后端的最快办法是什么——拔网线断网!

当然,有了chrome开发者工具帮助,我们不用拔网线也能使网页离线,具体做法如下图(注意箭头)

79a0c5c2cea306c61421ae077cacca68.jpeg

点击第三个箭头所指可以看到 request 的 payload 和其他信息

23403a95a10e8cf13e24566db4b08b3d.jpeg

虽然网页离线了,但是ajax request的所有信息都能看到。

这种方案既不会像方案一那样影响其他代码,也不会像方案二那样因为js文件的修改产生影响。

现代前端框架如 React 或者 vue 都可以热部署——修改完代码,界面就会自动刷新,但其实热部署的底层原理借助了网络请求,因此网页离线会导致热部署失败。所以,一旦修改完代码,记得重新打开网络让页面刷新,测试之前再离线。

这就是方案三的缺点——得重复地打开或关闭网络,操作略繁琐。




前端小技巧之debug与测试网络请求负载到此就介绍完了,三种方案各有利弊,你最喜欢哪个方案?


拓展:

本文其实只是抛砖引玉,Chrome 开发者工具是所有前端开发者日常开发的好帮手,推荐大家找时间认真阅读官方文档,学习更详细的使用技巧

https://developers.google.com/web/tools/chrome-devtoolsdevelopers.google.com



版权声明
本文为[osc_6lwba9kg]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4319574/blog/4837724

Scroll to Top