需求：更改前端的某个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 开发者工具，然后看下图（注意各个箭头）
触发网络请求前，代码会被断点拦截，此时我们就能在右边栏里看到ajax request的payload了。
由于断点阻断了代码的执行，这个ajax request不会发送到服务器。
假如发现payload不对，继续修改代码后，只需要刷新页面就可以重置当前页面的js代码运行状态（脱离断点）。
这种方案解决了方案一的问题 —— 不修改任何原本能正常工作的代码
但是这种方案的缺陷也很明显：假如打断点的js文件正是正在被修改的代码文件，一旦增加或减少代码行数，断点的位置却仍然打在原本的那行上（或最靠近的可执行代码上）。
举个例子：上面截图的23行代码现在是 httpClient.postRequest(payload) 但是这个文件的其他地方增加或减少了代码，导致 httpClient.postRequest(payload) 现在在 27行，而断点偏移到了 25 行上（因为 23行不可执行）
为了避免这种情况，我们可以在 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开发者工具帮助，我们不用拔网线也能使网页离线，具体做法如下图(注意箭头）
点击第三个箭头所指可以看到 request 的 payload 和其他信息
虽然网页离线了，但是ajax request的所有信息都能看到。
这种方案既不会像方案一那样影响其他代码，也不会像方案二那样因为js文件的修改产生影响。
现代前端框架如 React 或者 vue 都可以热部署——修改完代码，界面就会自动刷新，但其实热部署的底层原理借助了网络请求，因此网页离线会导致热部署失败。所以，一旦修改完代码，记得重新打开网络让页面刷新，测试之前再离线。
这就是方案三的缺点——得重复地打开或关闭网络，操作略繁琐。
前端小技巧之debug与测试网络请求负载到此就介绍完了，三种方案各有利弊，你最喜欢哪个方案？
拓展：
本文其实只是抛砖引玉，Chrome 开发者工具是所有前端开发者日常开发的好帮手，推荐大家找时间认真阅读官方文档，学习更详细的使用技巧
https://developers.google.com/web/tools/chrome-devtoolsdevelopers.google.com