开发者工具看着复杂，日常其实只用五六个面板。按"遇到什么问题用它"来记，比背功能列表有用得多。
1. Elements：查布局与样式
- 点左上角箭头再点页面元素，直接定位到它的 DOM
- 右侧改数值看效果，改的是临时预览、不会保存到文件，刷新即还原，可以放心试
- 盒模型那一块能直接看出 margin / padding 是谁在捣乱
2. Console：跑一行代码试试
- 直接输
document.title看结果，不用改文件再刷新 - 看报错：红色行会写明是哪个文件哪一行
- "页面没反应"这类问题，先看这里
安全提醒：控制台里粘贴来路不明的代码是常见骗局（对方可以借此拿到你的登录态）。除非你确定自己在做什么，别粘。
3. Network：接口到底发了什么
- 刷新页面，请求按时间排好；点任意一条看请求头、请求体、响应
- "状态码 200 但页面不对"这类问题，答案都在响应里
- 勾上 Preserve log 可以保留跳转前的记录，排查登录跳转特别有用
4. Application：Cookie、缓存、存储
- 看当前站点的 Cookie（HttpOnly 的会标出来，JS 读不到）
- 清缓存、清某个键值 —— 调试"改了代码但页面没变"时最常用
- 看 localStorage / sessionStorage 里存了什么
5. Lighthouse：跑一次体检
- 性能、可访问性、最佳实践、SEO 四项打分
- 重点看它给出的具体建议（图片太大、没设尺寸、对比度不足），照着改最有性价比
一个建议
别一上来就装一堆插件。先把这五个面板用熟，遇到具体问题再装对应的扩展。
