前端小技巧之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 开发者工具，然后看下图（注意各个箭头）

触发网络请求前，代码会被断点拦截，此时我们就能在右边栏里看到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 仍然有局限性，有些情况下不是非常方便。