分析防范前端BUG

薛定喵君 2021-06-16 19:01:05
前端 分析 bug 防范


总结下前端bug

# ​​需求理解

# 原因

  • 开发和产品对需求的理解不一致
  • 沟通一致的需求有遗漏,后期忘做
  • 没有彻查模块的依赖使用关系,错估修改产生的影响范围

# 对策

  • 疑问或有不确定的及时与产品沟通
  • 细小功能点不要后补以防忘记或者加到自己的 todolist 做完自测时再过一遍
  • 修改代码时多全局搜索查看引用的地方

# 前端基础

# 原因

  • 基础知识不足
    • 对循环,执行顺序理解不够
    • 全局对象使用不当,未及时重置
  • 缺少异常处理
    • 接口异常处理未做
    • 接口返回值判断直接引用了可能是空对象的属性

# 对策

  • 搬砖时理解一些基础原理
    • 宏任务微任务等等
    • 自己整理下常用es语法
  • 测试不同浏览器下的状态
  • 遇到印象深刻的问题或者bug可以写个博客,做个笔记

# 代码逻辑

# 原因

  • 逻辑复杂、函数太长
    • 一个函数做了多个操作
  • 注释不足难以阅读理解
  • ifelse分支太多
  • 重复代码多容易漏改
  • 边界考虑不足

# 对策

  • 函数拆分
  • 能提炼出来的写公共函数补足注释(输入输出)
  • 养成写注释的习惯
  • 写纯函数
  • ifelse优化
    • 单层时用switch替代
    • 多层时把易判断的提前后return
  • 代码提交
    • commit日志尽量细点
    • 单个功能完成后就提交(日志就可以覆盖本次修改内容)
    • 不要复杂的功能合在一起提交
  • 反问自己
    • 是否考虑了大部分情况
    • 自己下次改好不好改
    • 是否隔几天依然能看懂自己的代码
    • 是否易复用

# 接口管理

# 原因

  • 变动信息未同步
  • 错误估计修改影响范围

# 对策

  • 变动可以记到自己的 todolist
  • 要求对接的后端变动时通知自己
  • 全局搜索接口,确定变更影响的模块

# 自测方法

# 原因

  • 操作习惯单一
  • 边界值测试不足

# 对策

  • 对照checklist
  • A/B测试
  • 边界值
    • 空值情况
    • 单一状态不同值:极小值>偏小值>引起UI变化的值>偏大值>极大值
  • 不能只满足UI展现的情况(UI反映的只是状态的一种)
    • 特殊情况的展示需要UI补图,及时提出需求或抛给产品
    • 文案:关注无文字、少文字、过多文字,不同浏览器下显示

# 思维方式

# 原因

  • 产品需求理解欠缺
  • 用户体验理解不足
  • 甩锅思维

# 对策

  • 学会从产品角度理解需求
    • 必要性:影响范围、对用户有没有用、体验好不好
    • 难易度:功能复杂、逻辑复杂
  • 用户思维培养
    • 跳出开发人员的思路,把自己当小白去使用功能,理解用户可能产生的困惑,进而明白产品设计的思路
  • 场景思维
    • 把自己带入产生需求的实际场景,可寻求产品的帮助,深度理解功能产生的缘由,理解公司产品的边界,什么能做,什么不适合做
  • 学习思维
    • 核心在于解决问题提升自己,不沉溺于甩锅(都是一条船上的)
    • 保持一个开放接受容纳的状态,每个问题都是提升的机会
    • 做好记录,PDCA 用起来
      • bug改完要记录原因
      • 项目不忙或者结束后分析归纳bug原因(看你自己了)
      • 反思总结,找到问题根源,不会跌倒两次
      • 定期提醒自己,check 一下

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

版权声明
本文为[薛定喵君]所创,转载请带上原文链接,感谢
https://cloud.tencent.com/developer/article/1835940

  1. HTML + CSS + JavaScript to achieve cool Fireworks (cloud like particle text 3D opening)
  2. HTML + CSS + JavaScript realizes 520 advertising love tree (including music), which is necessary for programmers to express themselves
  3. Solve the problem of Web front-end deployment server (it can be deployed online without a server)
  4. HTML + CSS + JS make wedding countdown web page template (520 / Tanabata Valentine's Day / programmer advertisement)
  5. What else can driverless minibus do besides "Park connection"?
  6. Cloud native leads the era of all cloud development
  7. NRM mirror source management tool
  8. Bring it to you, flex Jiugong
  9. Lolstyle UI component development practice (II) -- button group component
  10. Deconstruction assignment in ES6
  11. Luo 2 peerless Tang clan was officially launched. The official gave a key point, and the broadcast time was implied
  12. 20初识前端HTML(1)
  13. 当新零售遇上 Serverless
  14. 20 initial knowledge of front-end HTML (1)
  15. When new retail meets serverless
  16. [golang] - go into go language lesson 5 type conversion
  17. [golang] - go into go language lesson 6 conditional expression
  18. HTML5(八)——SVG 之 path 详解
  19. HTML5 (8) -- detailed explanation of SVG path
  20. 需要开通VIP以后页面内容才能复制怎么办?控制台禁用javascript即可
  21. Web前端|CSS入门教程(超详细的CSS使用讲解,适合前端初学者)
  22. 实践积累 —— 用Vue3简单写一个单行横向滚动组件
  23. Serverless 全能选手,再下一城
  24. What if you need to open a VIP to copy the page content? Just disable JavaScript on the console
  25. Web front end | CSS introductory tutorial (super detailed CSS explanation, suitable for front-end beginners)
  26. Practice accumulation - write a single line horizontal scroll component simply with vue3
  27. Dili Reba is thin again. She looks elegant and high in a strapless hollow skirt, and her "palm waist" is beautiful to a new height
  28. Serverless all-round player, next city
  29. The difference between MySQL semi synchronous replication and lossless semi synchronous replication
  30. Vue表单设计器的终极解决方案
  31. The ultimate solution for Vue form designer
  32. Nginx从理论到实践超详细笔记
  33. Yu Shuxin's red backless swimsuit is split to the waist and tail, with a concave convex figure and excessive color matching, and his face is white to dazzling
  34. Nginx ultra detailed notes from theory to practice
  35. 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
  36. typecho全站启用https
  37. CCTV has another popular employee. The off-site interpretation is very professional, and the appearance ability is no less than that of Wang Bingbing
  38. [animation Xiaole | CSS] 086. Cool water wave loading transition animation
  39. Enable HTTPS in Typecho
  40. 50天用JavaScript完成50个web项目,我学到了什么?
  41. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  42. What have I learned from completing 50 web projects with JavaScript in 50 days?
  43. "My neighbor doesn't grow up" has hit the whole network. There are countless horse music circles, and actor Zhou Xiaochuan has successfully made a circle
  44. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
  45. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  46. Implement the Ajax of jQuery according to the native XMLHttpRequest in JavaScript
  47. 30 + women still wear less T-shirts and jeans. If they wear them like stars, they will lose weight
  48. 数栈技术分享前端篇:TS,看你哪里逃~
  49. Several stack technology sharing front end: TS, see where you escape~
  50. 舍弃Kong和Nginx,Apache APISIX 在趣链科技 BaaS 平台的落地实践
  51. Abandon the landing practice of Kong and nginx, Apache apisik on the baas platform of fun chain technology
  52. 浪迹天涯king教你用elementui做复杂的表格,去处理报表数据(合并表头,合并表体行和列)
  53. 前端HTML两万字图文大总结,快来看看你会多少!【️熬夜整理&建议收藏️】
  54. Wandering around the world king teaches you to use elementui to make complex tables and process report data (merge header, merge table body rows and columns)
  55. 路由刷新数据丢失 - vuex数据读取的问题
  56. Front end HTML 20000 word graphic summary, come and see how much you can【 Stay up late to sort out & suggestions]
  57. Route refresh data loss - vuex data reading problem
  58. Systemctl系统启动Nginx服务脚本
  59. Systemctl system startup nginx service script
  60. sleepless