分析防范前端BUG

简介: 复盘下前端bug

总结下前端bug

​​需求理解

原因

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

对策

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

前端基础

原因

  • 基础知识不足

    • 对循环,执行顺序理解不够
    • 全局对象使用不当,未及时重置
  • 缺少异常处理

    • 接口异常处理未做
    • 接口返回值判断直接引用了可能是空对象的属性

对策

  • 搬砖时理解一些基础原理

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

代码逻辑

原因

  • 逻辑复杂、函数太长

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

对策

  • 函数拆分
  • 能提炼出来的写公共函数补足注释(输入输出)
  • 养成写注释的习惯
  • 写纯函数
  • ifelse优化

    • 单层时用switch替代
    • 多层时把易判断的提前后return
  • 代码提交

    • commit日志尽量细点
    • 单个功能完成后就提交(日志就可以覆盖本次修改内容)
    • 不要复杂的功能合在一起提交
  • 反问自己

    • 是否考虑了大部分情况
    • 自己下次改好不好改
    • 是否隔几天依然能看懂自己的代码
    • 是否易复用

接口管理

原因

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

对策

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

自测方法

原因

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

对策

  • 对照checklist
  • A/B测试
  • 边界值

    • 空值情况
    • 单一状态不同值:极小值>偏小值>引起UI变化的值>偏大值>极大值
  • 不能只满足UI展现的情况(UI反映的只是状态的一种)

    • 特殊情况的展示需要UI补图,及时提出需求或抛给产品
    • 文案:关注无文字、少文字、过多文字,不同浏览器下显示

思维方式

原因

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

对策

  • 学会从产品角度理解需求

    • 必要性:影响范围、对用户有没有用、体验好不好
    • 难易度:功能复杂、逻辑复杂
  • 用户思维培养

    • 跳出开发人员的思路,把自己当小白去使用功能,理解用户可能产生的困惑,进而明白产品设计的思路
  • 场景思维

    • 把自己带入产生需求的实际场景,可寻求产品的帮助,深度理解功能产生的缘由,理解公司产品的边界,什么能做,什么不适合做
  • 学习思维

    • 核心在于解决问题提升自己,不沉溺于甩锅(都是一条船上的)
    • 保持一个开放接受容纳的状态,每个问题都是提升的机会
    • 做好记录,PDCA 用起来

      • bug改完要记录原因
      • 项目不忙或者结束后分析归纳bug原因(看你自己了)
      • 反思总结,找到问题根源,不会跌倒两次
      • 定期提醒自己,check 一下
相关文章
|
23天前
|
缓存 监控 前端开发
前端开发中的性能瓶颈分析与优化
【7月更文挑战第27天】前端开发中的性能优化是一个系统工程,需要从多个角度入手,综合运用多种策略。通过减少网络延迟、优化资源加载、优化DOM操作、优化JavaScript执行以及第三方服务优化等措施,可以显著提升前端应用的性能。同时,通过性能监控和调优工具的使用,可以持续监控和优化应用性能,确保用户获得流畅、高效的体验。
|
3月前
|
前端开发 JavaScript Android开发
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
【5月更文挑战第16天】Uniapp是一个基于Vue.js的跨平台前端框架,能将代码编译成iOS、Android、H5等多个平台应用,简化跨平台开发。相比React和Angular,Uniapp更适合移动应用,减少平台适配工作。Vue.js的组件化和灵活性在Uniapp中得到延伸,增加了移动端特性。而Flutter性能优越,但学习成本高。开发者应根据项目需求和技术栈选择合适的框架。
101 4
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
|
1月前
|
前端开发 JavaScript 流计算
前端 JS 经典:打印对象的 bug
前端 JS 经典:打印对象的 bug
26 0
|
2月前
|
前端开发 安全 JavaScript
如何区分是前端BUG还是后端BUG
1 基于经验 前端BUG特点: (1)界面排版、布局错误、兼容性问题 (2)网络不稳定导致JS或CSS未完全加载或请求超时(一般不需要提BUG),正常网络下加载超时 后端BUG特点: 业务逻辑、性能问题、数据问题、安全性问题 2 通过HTTP请求和响应信息 可以通过浏览器开发者工具(F12)、postman、fiddler(移动端可通过该工具抓包)、Charles、Proxyman、Wireshark、HttpCanary、tcpdump等工具。
46 1
|
2月前
|
缓存 监控 前端开发
前端性能优化:从系统分析到实践策略
**前端性能优化概述** 本文探讨了前端性能优化的重要性,强调了从整体角度而非仅关注局部优化手段的必要性。作者指出,建立性能评价系统是关键,通过**性能指标**(如FP、FCP、LCP、CLS等)来量化页面性能,然后使用**性能监控**工具收集数据。文章列举了9个关键性能指标,并介绍了如何通过SDK或工具进行数据收集。 在实际操作中,文章提到了**性能优化方法论**,包括了解何时何地出现性能问题,以及如何根据性能指标采取相应优化措施。作者推荐使用Chrome的Lighthouse工具进行性能测试,并讨论了**CDN**、**缓存策略**和**懒加载**作为常见的优化手段。
77 0
|
3月前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目
|
3月前
|
前端开发 JavaScript 开发者
一个前端应用性能分析工具
一个前端应用性能分析工具
|
3月前
|
前端开发 JavaScript 搜索推荐
前端网页手册(2)--菜鸟教程网站分析
前端网页手册(2)--菜鸟教程网站分析
36 2
|
3月前
|
前端开发 JavaScript 网络协议
【专栏】探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验
【4月更文挑战第29天】本文探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验。通过 Performance,可检测资源加载时间、JavaScript 执行时间、重绘与回流等关键指标,找到性能瓶颈。文中列举了三个实践案例,如优化图片加载、减少 JavaScript 执行时间和避免重绘回流,展示如何利用 Performance 改进页面性能,提升用户体验。开发者应定期使用 Performance 分析并学习新优化技术,以适应Web开发的快速发展。
160 1
|
3月前
|
前端开发 JavaScript 开发者
深入理解前端性能优化:从加载到渲染的全流程分析
前端性能优化是Web开发中的关键一环。本文将从加载资源、解析HTML、执行JavaScript、样式计算、布局和渲染等多个方面深入探讨前端性能优化的全流程,为开发者提供全面的技术指南和实用建议。