浏览器开发者工具
Browser DevTools
中级网页浏览器开发者工具（Browser DevTools）是浏览器内置的一组页面检查与调试面板。它帮你看到页面实际生成了什么、发出了哪些请求、报了什么错；比如按钮点了没反应时，可先查点击后是否发出请求。
你可能会说：「这个按钮点了没反应，我想看看页面哪里报错了、请求到底有没有发出去。」
读之前建议先了解
动手看看保存设置时排查报错
悬停或按住「保存更改」可以观察真实的按钮反馈；用「模拟点击结果」切换点击后的情形，再切换网络、控制台面板，看浏览器实际记录了什么。
网络里有 POST 请求和 500 状态码，说明点击后请求确实发出了；问题发生在服务器处理阶段。
要点浏览器开发者工具能帮你看清什么？
- 1
看页面实际生成的结构和样式
在元素面板里，你能检查当前页面的结构和生效的样式。比如卡片文字被遮住了，可以先看它的尺寸、溢出设置和覆盖它的元素，而不是只凭截图猜是哪段代码出了问题。
- 2
从控制台寻找运行时线索
控制台会显示页面脚本运行时的报错，也能让你临时执行代码。比如点击按钮后界面不变，先看有没有异常；但控制台没报错，只能说明这里暂时没有可见错误，不能证明功能正常。
- 3
按请求追踪前后端交互
网络面板能看到页面发出的请求、返回状态和响应内容。提交表单失败时，你可以先分清是根本没发请求、服务器返回了错误，还是请求成功但页面没更新，这样和 AI Agent 讨论时就有具体线索。
- 4
区分临时试改与代码修改
你可以在开发者工具里临时改文字或样式，快速验证想法；刷新页面后，这类修改通常就消失了。确认方向后，还得让 AI Agent 修改项目代码，并重新检查页面，才能让结果保留下来。
容易混淆的地方
浏览器开发者工具看到的是浏览器这一侧的页面、脚本和网络活动，不等于项目的代码编辑器：在面板里试改样式，通常不会改动项目文件。它也不等于服务端日志：请求返回错误时，你可以先从网络面板拿到状态和响应；要查服务器内部为何出错，还得看服务端日志。
什么时候用
适合用
- 做响应式页面时，手机宽度下导航挤成一团，用元素面板检查尺寸和生效样式。
- 用户说提交表单后一直转圈，用网络面板确认请求是否发出、何时返回、返回了什么。
- AI Agent 改完交互后，按钮点击没有反应，用控制台寻找脚本报错并反馈给它。
不适合用
- 想排查定时任务为何在半夜失败，但当时没有浏览器页面参与；去看服务端日志和监控更合适。
- 想长期修改产品文案或样式，而不是临时验证效果；直接修改项目代码，再在浏览器里验收。
- 想比较两次代码提交具体改了哪些文件；用 Git 的差异对比更直接。
练一练选一个答案，看看解释
你和 AI Agent 做的后台页面里，点击「保存」后提示失败。你想先判断问题发生在哪一段，最合适的做法是什么？
让 AI 帮你做复制给 AI Agent 直接用
请和我一起用浏览器开发者工具排查「保存」按钮点击后提示失败的问题。先检查控制台报错和网络面板中的保存请求，记录是否发出、返回状态及响应内容；据此判断下一步该查前端代码还是服务端日志，不要仅凭提示文案猜原因。