在遇到一个 bug 时，我会先通过浏览器控制台查看是否有 JavaScript 错误，再通过网络面板检查接口请求是否成功。如果请求失败，我会进一步查看后端日志和接口实现，确认是否是后端服务的问题；如果请求成功但页面没有正确显示，我会检查前端代码逻辑和 DOM 结构，判断是否是前端渲染问题。通过这样的分步排查，我可以快速定位问题来源。

步骤详解

在开始定位 bug 前，首先要确认以下几点：用户描述是否清晰？Bug 的表现形式是什么？查看浏览器控制台（Console）检查网络请求（Network）检查 DOM 结构与样式模拟用户操作查看后端日志使用工具测试接口检查数据库操作定位 bug 是前端还是后端的核心逻辑是：通过 请求链路 和 错误信息 来判断问题源头。

另一个回答范例

首先，打开浏览器开发者工具，切换到Console标签页，看是否有红色的错误信息。如果有JS错误，那基本就是前端问题。然后切换到Network标签页，复现bug，看请求是否发出，状态码是多少。如果状态码是5xx，那就是后端问题；如果是200但返回数据不对，也可能是后端；如果请求都没发或数据对了但页面不对，那就是前端。

实际案例分享

假设有一个 bug：点击按钮后页面没有更新。先看Console，有没有错误？没有。再看Network，请求发出了，状态200，返回数据也对，但页面没变。那就是前端渲染问题，检查setState或者v-model绑定。反过来，如果Network里状态500，那就是后端接口炸了，去看日志。

工具辅助

用Chrome DevTools是最快的，前端直接Console和Network就够了。后端用Postman单独测接口，排除前端调用问题。还要看服务端日志，比如nginx/error.log或者应用日志。数据库用sql日志看是否有慢查询或异常。

系统性排查

1. 复现bug，记录现象。2. 检查前端控制台错误。3. 检查网络请求&响应。4. 如果后端异常，看日志、接口代码。5. 如果前端，看组件逻辑、状态管理。6. 交叉验证：前端模拟后端数据，后端模拟前端请求。

FAQ

Q: 如果Network没请求是怎么回事？
A: 可能是前端事件没绑定、JS错误阻止了执行，或者按钮被样式盖住了，都属于前端问题。

Q: 状态码200但数据不对怎么办？
A: 用Postman测接口，如果数据还是错就是后端；如果Postman正常就是前端传参或处理逻辑问题。

Q: 怎么快速确认是缓存问题？
A: Network里看Cache-Control头，或者Ctrl+F5硬刷新；后端看是否用了Redis缓存。

Q: 生产环境怎么调试？
A: 加埋点日志、用sentry监控错误、灰度发布分环境测。