如何使用 ChatGPT 帮我们分析前端 Bug

背景

作为前端程序员,我们每个月都能够大量稳定的产出 bug 😂,而每个月的 bug 统计都会令人无从下手。

以下是测试组提供的一份 bug 清单,通过 Tapd 的 excel 文档导出,可以看到满满的 bug,琳琅满目,应接不暇。

以上还只是本月的其中一人的bug,整个前端组加起来的 bug 可达到数百个以上。如何把这些杂乱的信息归类整理,并能更好的为我们的复盘提供支持,成为当下的问题。

改进

类似这种大量无序的信息,想来应该特别适合用 AI 帮我们处理。说干就干,马上登录 ChatGPT,把数据喂给 AI 并经过无数次的调教,终于得出令人满意的结果:

经过 AI 的重新归类整理,现在我们的 bug 清单清晰明了,可读性大大增加,bug 也可以有效的沉淀复盘了。

后续

除了编码方面的帮助,ChatGPT 对一些软技能的方面的协助也不容小觑,欢迎大家一起讨论,继续探索 AI 在我们日常工作中的帮助~

附录

提供一份由 ChatGPT 生成的前端常见 bug 类型清单:

  • 语法错误: 这是最基本的错误,通常是由于拼写错误、缺少分号或括号不匹配等引起的。
  • 逻辑错误: 程序在逻辑上不正确,导致功能不能按预期工作。
  • 页面布局问题: HTML、CSS、布局框架等方面的问题,导致页面元素错位、错乱或不按预期排列。
  • 样式问题: 包括样式不生效、样式覆盖、样式失效等。
  • 响应式设计问题: 页面在不同设备上(如移动设备、平板电脑、桌面)上显示不正确,导致页面不适应不同的屏幕尺寸。
  • 浏览器兼容性问题: 不同浏览器对CSS和JavaScript的解释可能不同,导致在某些浏览器上出现问题。
  • 缓存问题: 旧的资源被缓存导致更新未能及时生效。
  • 网络请求问题: AJAX 请求失败、响应不正确,或者跨域请求问题。
  • 性能问题: 页面加载速度慢、资源过多、内存泄漏等。
  • 安全问题: XSS(跨站脚本攻击)、CSRF(跨站请求伪造)等安全漏洞。
  • 框架或库问题: 使用的框架或库本身的bug,或者与其他库不兼容。
  • 事件处理问题: 事件监听、触发、冒泡等问题,导致交互不正常。
  • 移动端特有问题: 触摸事件、手势、视口问题等。
  • 本地存储问题: 使用localStorage或sessionStorage时的问题,包括数据不正确、存储限制等。
  • 异步操作问题: 回调地狱、Promise处理不当等。
  • 数据处理问题: 数据格式不正确、处理逻辑错误等。
  • 路由问题: 单页面应用中的路由配置、切换问题等。
  • 跨域问题: 跨域资源共享(CORS)问题。
  • 缺乏错误处理: 没有适当的错误处理机制,导致问题难以定位和解决。
  • 环境问题: 开发环境和生产环境之间的差异导致问题。
  • 版本问题: 使用的库、框架或工具的版本问题。
  • 工具配置问题: Webpack、Babel等工具的配置错误。
  • 测试问题: 缺乏充分的测试,导致问题在发布后才被发现。
  • 移动端适配问题: 页面在不同移动设备上显示不正常。
  • 国际化问题: 多语言支持引起的问题。
  • 特定场景问题: 只在特定情况下才出现的bug,难以重现和修复。
  • 调试问题: 缺乏有效的调试技巧和工具,导致问题难以定位和修复。
  • 功能缺失问题:没有调研好产品需求,需求漏做少做。
  • 前后端对接问题:接口请求出入参和文档不一致,导致的接口报错。
  • 数据处理问题:数据取数不对,或者对数据的加工过滤有误导致的错误。
相关推荐
有梦想的刺儿18 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具38 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json