前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何快速提高页面健壮性

如何快速提高页面健壮性

作者头像
IMWeb前端团队
发布2019-12-03 17:33:43
6310
发布2019-12-03 17:33:43
举报
文章被收录于专栏:IMWeb前端团队

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

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

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

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

1. 模拟CGI不可用

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

代码语言:javascript
复制
ke.qq.com/cgi-bin/user/user_center/get_plan_list statusCode://404

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

2. 模拟CGI逻辑错误

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

代码语言:javascript
复制
ke.qq.com/cgi-bin/user/user_center/get_plan_list resMerge://{"retcode":10000}

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

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

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

代码语言:javascript
复制
ke.qq.com/cgi-bin/user/user_center/get_plan_list resBody://{plan_list.json}

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

代码语言:javascript
复制
{
  "retcode": 0,
  "result": {
    "ts": 0,
    "page": 2,
    "map_list": [],
    "end": 0
  }
}

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

4. 模拟CGI响应时间过长

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

代码语言:javascript
复制
ke.qq.com/cgi-bin/user/user_center/get_plan_list resDelay://3000

期望结果:显示loading态

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

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

代码语言:javascript
复制
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还提供各种类型的抓包调试、移动端调试等功能,感兴趣的话可以自行下载体验~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 模拟CGI不可用
  • 2. 模拟CGI逻辑错误
  • 3. 模拟数据为空等边界情况
  • 4. 模拟CGI响应时间过长
  • 5. 模拟CDN加载静态资源失败
  • 6. 一定有帮助的tips
  • 结束语
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档