本文作者:IMWeb Terrance 原文出处:IMWeb社区 未经同意,禁止转载
前端页面的成功呈现,不仅要求在理想情况下如此,当一些后台CGI访问异常、静态文件获取不到时,仍然需要尽可能提供降级方案或给用户良好的反馈,不至于整个页面的奔溃。本文将结合腾讯课堂个人中心页面,分享一些测试和提高页面健壮性的技巧。
如果要构造CGI或静态文件的响应情景,往往需要修改前端或者后台代码,这种方式既不优雅,又对代码造成了破坏,严重的话还有可能将测试代码发布到生产环境酿成事故。这里介绍一个快速修改响应又不侵害代码的技巧,使用whistle来进行代理和抓包,针对不同的需求只需在Rules中配置一条规则即可。
PS:如果对whistle还不熟悉,可以关注下Github,有详细实用教程,上手贼快~
情景模拟:在whistle中新建一条rule,更改cgi的HTTP状态码
ke.qq.com/cgi-bin/user/user_center/get_plan_list statusCode://404
期望结果:弹框提示服务暂不可用
情景模拟:在whistle中新建一条rule,修改cgi的返回结果
ke.qq.com/cgi-bin/user/user_center/get_plan_list resMerge://{"retcode":10000}
期望结果:弹框提示服务暂不可用
情景模拟:在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
}
}
期望结果:提示暂无学习安排
情景模拟:在whistle中新建一条rule,延长返回时间
ke.qq.com/cgi-bin/user/user_center/get_plan_list resDelay://3000
期望结果:显示loading态
情景模拟:在whistle中新建一条rule,将从CDN加载的css修改为不可用
7.url.cn/edu/user/index_a0a98ee456adab130acdcde056c7bdde.css statusCode://404
期望结果:自动进行主域重试
另外,whistle做了很多细节上的优化,熟练掌握可以事半功倍哦。这里给大家分享下几个常见的:
在平时的需求开发中,我们往往容易忽略这些极端情况(放到现网中去检验是十分危险的),想要去做往往又觉得构造起来相当繁琐,如果有一种工具能帮我们构造,那么提升页面健壮性的成本无疑小了很多,便只差我们愿不愿意去做了!如有文中未覆盖的场景,欢迎留言交流^o^
其实whistle还提供各种类型的抓包调试、移动端调试等功能,感兴趣的话可以自行下载体验~