如何快速提高页面健壮性

本文作者：IMWeb Terrance 原文出处：IMWeb社区 未经同意，禁止转载

前端页面的成功呈现，不仅要求在理想情况下如此，当一些后台CGI访问异常、静态文件获取不到时，仍然需要尽可能提供降级方案或给用户良好的反馈，不至于整个页面的奔溃。本文将结合腾讯课堂个人中心页面，分享一些测试和提高页面健壮性的技巧。

如果要构造CGI或静态文件的响应情景，往往需要修改前端或者后台代码，这种方式既不优雅，又对代码造成了破坏，严重的话还有可能将测试代码发布到生产环境酿成事故。这里介绍一个快速修改响应又不侵害代码的技巧，使用whistle来进行代理和抓包，针对不同的需求只需在Rules中配置一条规则即可。

PS：如果对whistle还不熟悉，可以关注下Github，有详细实用教程，上手贼快～

1. 模拟CGI不可用

情景模拟：在whistle中新建一条rule，更改cgi的HTTP状态码

ke.qq.com/cgi-bin/user/user_center/get_plan_list statusCode://404

期望结果：弹框提示服务暂不可用

2. 模拟CGI逻辑错误

情景模拟：在whistle中新建一条rule，修改cgi的返回结果

ke.qq.com/cgi-bin/user/user_center/get_plan_list resMerge://{"retcode":10000}

期望结果：弹框提示服务暂不可用

3. 模拟数据为空等边界情况

情景模拟：在whistle中新建一条rule，替换cgi的返回结果

ke.qq.com/cgi-bin/user/user_center/get_plan_list resBody://{plan_list.json}

在whistle中新建value：plan_list.json（相信你已经发现了，通过这种方式可以任意修改响应数据）

{
  "retcode": 0,
  "result": {
    "ts": 0,
    "page": 2,
    "map_list": [],
    "end": 0
  }
}

期望结果：提示暂无学习安排

4. 模拟CGI响应时间过长

情景模拟：在whistle中新建一条rule，延长返回时间

ke.qq.com/cgi-bin/user/user_center/get_plan_list resDelay://3000

期望结果：显示loading态

5. 模拟CDN加载静态资源失败

情景模拟：在whistle中新建一条rule，将从CDN加载的css修改为不可用

7.url.cn/edu/user/index_a0a98ee456adab130acdcde056c7bdde.css statusCode://404

期望结果：自动进行主域重试

6. 一定有帮助的tips

另外，whistle做了很多细节上的优化，熟练掌握可以事半功倍哦。这里给大家分享下几个常见的：

1. 一键注释功能，方便快速修改：Windows快捷键Ctrl+/，Mac快捷键Command+/
2. 自动补全功能，输入protocal时，whistle会进行智能推荐，从此不再死记繁琐的关键字，写起rule来简直不能更流畅
3. 遇到不会用的protocal了？不要紧，光标移上去后F1自动打开官方文档，这体验，服！
4. 常用的一些rules、values可以直接在whistle中保存起来，需要的时候一键切换即可，升级whistle也不会丢失～

结束语

在平时的需求开发中，我们往往容易忽略这些极端情况（放到现网中去检验是十分危险的），想要去做往往又觉得构造起来相当繁琐，如果有一种工具能帮我们构造，那么提升页面健壮性的成本无疑小了很多，便只差我们愿不愿意去做了！如有文中未覆盖的场景，欢迎留言交流^o^

其实whistle还提供各种类型的抓包调试、移动端调试等功能，感兴趣的话可以自行下载体验～