开源源码部署时如何快速排查Bug?

我第一次把星宿UI的开源小程序搬到本地跑，刚部署完页面就死转圈，心里直打鼓：到底是哪里出错了？后来摸索出几招快速定位 bug 的“神器”，现在跟大家分享一下，免得你们像我当初一样在日志里翻来覆去。

1. 先看控制台，别把错误埋在代码里

打开 Chrome 开发者工具（F12），切到 Console。大多数“页面卡死”“图片不显示”之类的问题都会抛出明确的报错信息，比如 Failed to load resource、Uncaught TypeError。我记得第一次看到 “Cannot read property ‘data’ of undefined” 时，立马定位到请求的 API 参数写错了，改了下就好。

2. 网络请求是关键

在 Network 面板点开每个请求，检查状态码和返回体。常见的 404、500，或者返回的 JSON 结构不符合预期，都会导致评论提交失败、激励视频播放不了。我们可以把返回的原始数据复制出来，和文档里示例对比，快速判断是后端还是前端的问题。

3. 本地缓存与构建产物

很多奇怪的乱码或样式错位，往往是旧的缓存残留。执行 npm run clean && npm run build，或者手动删掉 dist 目录再重新编译，能把 “插件乱码” 这类问题一键刷掉。记得在部署完成后，打开小程序的调试模式，清除本地缓存再测试。

4. 对照官方部署文档

星宿UI的部署教程在枫瑞博客里有完整步骤（https://docs.frbkw.com/xingshu/sidebar/fast/fast），我在按照文档配置环境变量时，曾经把 APP_ID 写成了测试号，结果所有接口都 401。把文档里每一步都对照一遍，尤其是云函数入口和数据库权限，能省掉不少排查时间。

5. 逐步排除法——把功能拆开跑

如果一个页面里集成了首页轮播、评论、激励视频三大模块，先把它们分别注释掉，只保留一个最小功能跑通。比如先只保留首页渲染，确认不再转圈后，再逐步打开评论模块，最后再接入视频广告。这样可以明确是哪块代码引起的连锁错误。

6. 记录复现步骤，别忘了截图

每次定位到一个 bug，我都会在笔记里写下复现的点击路径、控制台报错和网络返回的关键字段。有人说“没有日志就找不到问题”，其实截图和简短的复现描述同样重要，后面回头查时省时省力。

小提示：如果你在部署过程中遇到 “图片无法显示”，先确认图片的 CDN 地址是否被防火墙拦截，或者检查项目根目录下的 static 文件夹是否已经正确复制。

把这些经验串在一起，我已经把星宿UI的常见 14 类高频问题从“摸不着头脑”变成了“点开就知道怎么修”。希望你们在开源源码部署时，也能像我一样，先从控制台和网络抓包入手，逐步排除，最后把 bug 打回原形。祝大家玩得开心，别再为转圈卡顿抓狂了！