当前位置: 首页 > news >正文

用AI开发Chrome插件的真实踩坑记录:拼多多开票工具做出来了,但过程不是网上说的那么简单

一句话结论:AI帮我做出了一个能用的插件,这个结果是真的。但过程里有太多"网上教程没说的事"——AI会删掉之前对的代码、复杂逻辑需要你画出流程图、调试的时候你盯着报错信息完全不懂是什么。能做出来,但你要有心理准备。

坑一:AI改bug的时候会破坏之前已经修好的东西

这是最让我崩溃的一点。你已经调好了导出功能,CSV文件格式完美——然后让AI去优化一下批量开票的逻辑。AI改完批量开票之后,导出功能坏了。不是小坏,是整个导出按钮点下去没反应。你问AI"为什么导出不行了?"AI说"我没有改动导出相关的代码。"你去看代码diff——它确实改了导出相关的部分,只是它自己不觉得相关。

这个问题在大型项目里更严重。代码模块之间有关联,AI不一定理解这种关联。它可能因为批量开票需要加一个数据处理逻辑,顺手改了数据处理模块里的一个函数——而这个函数也被导出功能用着。改完批量开票好了,导出挂了。

怎么解决:每次AI改完代码,把主要功能全部点一遍——导出、开票、查询、状态显示。别只测它改的那个。这个回归测试的习惯是被坑出来的。

坑二:AI对"简单需求"的理解跟你不一样

有一次我想让发票申请失败的时候弹一个提示告诉用户"这张票开不了,因为XXX"。我跟AI说:"如果发票申请失败,显示一条错误提示。"

AI给我加了一个弹窗——每次失败都弹一个alert框,你需要手动点确定才能继续下一张。问题来了——批量开票一次跑50张,如果有十几张失败了,你得点十几个确定弹窗。这不是自动化,这是把"点提交按钮"换成了"点确定按钮"。

AI没有错,它确实加了错误提示。但它不理解"批量自动化"的上下文——在这个上下文中,"提示"不应该是阻断性的弹窗,而应该是在面板里静默标记失败的订单。

这件事教会我:跟AI描述需求的时候,不光要说"做什么",还要说"在什么场景下"和"不能怎么做"。后来我学会了加约束条件——"失败提示静默显示在面板列表里,不要弹窗阻断流程"。

坑三:拼多多页面变化了,插件跟着坏

插件做到一半的时候,拼多多改版了订单详情页。原来发票申请按钮的CSS类名变了,插件找不到按钮了——整个批量开票功能失灵。

我完全不知道该怎么修——我对拼多多的页面结构根本不了解,我连那个按钮原来叫什么类名都不知道。AI以前写的代码里引用了那个类名,AI能找到自己引用过什么。但我得告诉AI"页面变了,以前的选择器现在找不到了"。

我把拼多多新页面的HTML片段截下来给AI:"这个页面里发票申请按钮的HTML结构变了,帮我更新选择器。"AI对比了新旧结构,找到了新按钮的位置,更新了代码。但我当时完全不懂为什么坏了,慌了至少半小时。

这个坑告诉我:用AI做出来的产品,维护的时候还是得靠AI。你的维护成本不是"自己改代码",是"描述清楚哪里变了"。

坑四:看不懂报错,不知道怎么跟AI说

Chrome浏览器F12打开Console,红色的报错信息有时候是完整的一句话,比如"TypeError: Cannot read property 'xxx' of undefined"。这种直接丢给AI它能看懂。

但有时候报错只有一行"Failed to load resource: the server responded with a status of 404",没有堆栈、没有文件名。我也不知道哪个资源报的404。丢给AI看,AI也猜不到——因为404可能是几十个网络请求中的任何一个。

这种情况只能回到基础:哪里出问题就看哪里的网络请求。打开开发者工具的Network面板,看看点批量开票按钮的时候哪个请求是红色的。把那个请求的URL和状态码发给AI。从"现象"定位到"具体请求"这一步,AI帮不了你,得你自己找。

但说实话,这些坑踩完了也就踩完了

上面说的都是踩坑经历,但没有一个坑是踩完过不去的。AI删了你之前的代码——你可以用git回退,再重新让AI改。页面改版了选择器失效——截屏给AI让它更新。报错看不懂——F12慢慢翻,总能找到那个红色的请求。

关键是心态。如果你期待的是"一句话描述需求,AI变出一个完美应用"——你会失望。如果你期待的是"有一个很聪明的东西能帮你写90%的代码,但需要你不断试、不断改、不断纠偏"——那AI编程就是这样,它确实是这样的。

用AI写代码不是坐电梯,是爬楼梯。每一级都能迈上去,但每一步都得自己迈。

常见问题

遇到AI删掉之前的正确代码,除了手动回退还有什么办法?

用Git。每次AI改之前commit一次,改完测完没问题再commit。出问题了直接git diff看改了哪些文件,不想保留的回退。Git是AI编程的安全绳,不用Git等于高空作业不系绳。

AI对不同类型的技术栈支持有差别吗?

差别很大。JavaScript、Python、React这种主流技术栈AI表现很好。但特定平台的小众API——比如Chrome Extension的某些API——AI可能不够熟。我的经验是让AI读官方文档再写代码,比直接让它写效果更好。

踩了这么多坑,你觉得值得吗?

值得。因为踩坑的过程虽然折磨,但踩完之后你手里有一个真正能用的东西。而且它能一直帮你省时间。如果我不自己做这个插件,到现在每个月底我还是得手工点发票、手抄Excel。跟那个比,踩坑的苦算不了什么。

如果现在重新用AI做一次,会快多少?

大概快三到四倍。第一次大部分时间花在"不知道怎么描述"和"看不懂报错"上。现在知道怎么拆需求、怎么给上下文、怎么用Git配合AI——这些经验是通用的。工具差不多,但用工具的人不一样了。

我的成果:duoduoke.net

http://www.jsqmd.com/news/1087864/

相关文章:

  • 如何轻松抢到B站会员购热门门票:5个自动化抢票技巧指南
  • 3步搭建你的全平台B站观影站:PiliPlus跨平台客户端深度体验指南
  • 维盟路由器PPPoE服务配置实战:从租户断网到全楼恢复的排查与设置
  • 联想拯救者BIOS深度解锁:终极性能调优与隐藏功能开启指南
  • Android逆向实战:脱壳与反调试核心技术解析
  • 三步配置Chrome for Testing:终结Web自动化测试的浏览器版本之痛
  • 如何用Lean引擎在5天内搭建专业量化交易系统
  • 550+免费插件:让RPG Maker游戏开发变得简单又有趣的终极方案
  • GPT Plus 低价方式还能不能选?长期使用先看这几个风险
  • 创业团队技术选型:在有限预算下做出不后悔的架构决策
  • 彻底解决数据库慢查询:深入B+树索引与执行计划优化
  • 深度学习优化器原理与工业级调优实战指南
  • PHP反序列化漏洞:从CTF实战到代码审计的深度解析
  • AI技术简报的范式革命:从信息过载到行动锚点
  • Tiled地图编辑器终极指南:从零打造专业2D游戏地图的完整手册
  • ESP32 SSD1306驱动终极指南:从点亮OLED到构建智能物联网界面
  • (一)QML离线地图实战:瓦片加载与精准标记全解析
  • WPF 3D可视化利器:HelixToolkit库从入门到实战
  • 在deepin-wine环境下配置ClamAV进行Windows恶意软件扫描
  • 大气层整合包系统:Nintendo Switch破解的终极完整解决方案
  • 全链路压测实战:从RESAR工程化体系到性能瓶颈精准定位
  • AIOps 故障根因诊断:从告警洪流到精准定位的架构设计
  • YimMenu终极指南:如何安全使用GTA5免费辅助工具提升游戏体验
  • FME实战入门:从零构建你的第一个数据转换模板
  • 【深度解析】EVPN路由类型:从理论到实战的演进之路
  • sysmaster与systemd兼容性测试:现有服务配置迁移终极指南 [特殊字符]
  • 超越游戏限制:如何用GoldHEN Cheats Manager重塑你的PS4游戏体验
  • 如何快速掌握AMD处理器调优:5个实用技巧完全指南
  • 从 Demo 到商业闭环:AI 生产力工具的 PMF 验证与指标体系构建
  • BSManager:Beat Saber一站式管理解决方案的技术架构与实践