Terrance

20 天前

如何快速提高页面健壮性

本文作者: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还提供各种类型的抓包调试、移动端调试等功能,感兴趣的话可以自行下载体验~

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。