浏览器调试基础：前端排查

当你在点击按钮没反应，或者页面显示异常时，浏览器自带的 开发者工具 (DevTools) 是你最好的帮手。

1. 打开开发者工具

任何调试的第一步都是打开它。

• 快捷键：
  • Windows/Linux: F12 或 Ctrl + Shift + I
  • macOS: Cmd + Option + I
• 鼠标操作：在页面任意位置 右键 -> 选择 "检查" (Inspect)。

提示：如果是排查弹窗或样式问题，建议直接在出问题的元素上右键点击“检查”。

2. Console (控制台) - 查看报错

Console 面板是查看前端代码报错的地方。如果你的点击事件没有反应，大概率这里会有红色的错误。

1. 点击 DevTools 顶部的 Console 标签。
2. 这里的日志分为不同级别：
   • ⚪ Info/Log: 普通打印信息，通常可以忽略。
   • 🟡 Warning: 黄色警告，通常不影响功能，但值得留意。
   • 🔴 Error: 红色错误，这是重点！通常意味着脚本崩溃。

常见错误解读

• ReferenceError: xxx is not defined: 你使用了一个不存在的变量。拼写错误？
• TypeError: Cannot read properties of undefined (reading 'xxx'): 空指针异常。你试图访问一个空对象的属性。即数据还没加载回来，你就急着去读它的字段。
• Vue warn: Vue 框架抛出的警告，通常也会指向具体的组件位置。

3. Elements (元素) - 样式与结构

如果东西没显示出来，或者长得不对，看这里。

1. 点击 Elements 标签。
2. 使用左上角的 小箭头图标 (Select Element)。
3. 点击页面上的元素，你可以在右侧看到它的 Styles (样式)。
   • 被划掉的样式：被其他更优先的样式覆盖了。
   • 找不到元素？检查它是否有 display: none 或 visibility: hidden。

4. Application (应用) - 缓存与存储

如果你觉得登录状态不对（如 Token 丢失），或者缓存数据没更新：

1. 点击 Application 标签。
2. 在左侧菜单找到：
   • Local Storage: 查看本地持久化存储。
   • Cookies: 查看 Cookie 信息（如 Session ID）。
3. 如果需要重置状态，可以右键点击对应的域名 -> Clear。