浏览器开发者工具Browser DevTools

你可能会说

保存按钮点了没有更新，请用浏览器开发者工具帮我找到证据，不要只凭页面现象猜。

浏览器开发者工具是一组用来检查网页结构、样式、错误、请求和存储状态的内置工具。例如保存按钮没有更新页面时，可以在 Elements 看节点和样式，在 Console 看脚本错误，在 Network 看请求状态与响应，在 Storage 看 Cookie 等浏览器数据。DevTools 提供证据和临时修改，不会代替服务端日志、权限检查或真正的代码修复。

先知道

HTML HTTP

也常被叫作DevTools开发者工具浏览器开发工具

页面现象应该对应哪个证据面板

保存个人资料当前页面

ElementsConsoleNetworkStorage

<button class="primary">保存</button>
.primary { background: #4338ca; }

工具只提供证据：结构和样式看 Elements，脚本错误看 Console，请求结果看 Network，浏览器数据看 Storage。

四个常用面板分别回答什么

怎样打开开发者工具：右键单击并选择“检查”或“审查元素”。快捷键：Mac 为 Cmd+Option+I，Windows 为 F12 或 Ctrl+Shift+I。默认打开 Elements 面板，点击标签页可切换至 Console、Network 或 Application 面板。

Elements 和 Console：Elements 检查当前 DOM、属性和 CSS；Console 显示脚本报错、日志以及可以复现的运行时信息。

Network 和 Storage：Network 检查请求、状态码、请求与响应；Storage 检查 Cookie、Web Storage 等浏览器保存的状态。先按现象选面板，再把证据带回修改和复测。

你可以这样告诉 AI Agent

请用浏览器开发者工具排查保存失败：说明你在 Elements、Console、Network 或 Storage 中分别看到了什么，重点记录保存请求的状态码和响应内容。找到证据后再修改代码，并重新发送一次请求确认页面更新。

接下来学什么

1HTTP→2服务端日志Server Logs→

保存按钮点击后没有更新，页面提示需要看服务器返回的失败原因。先打开哪个面板？

A. 打开 Network，查看保存请求的状态码、请求内容和响应B. 打开 Elements，反复修改按钮文字直到页面看起来像保存成功C. 打开 Storage，先删除所有浏览器数据再重新点击保存