Elements面板改HTML/CSS未生效是因未触发重绘或忽略样式优先级；Styles中划掉的属性被高权重选择器覆盖，内联样式优先级最高但刷新丢失；Console是JS执行环境，支持table、time、debugger等；Network中200不等于数据正确，需查Response内容和Content-Type；Sources断点失效常因未加载源码或sourcemap未对齐。
Elements 面板：改 HTML 和 CSS 为什么没立刻生效？
改完 style 属性或删了某个 class，页面却没变——不是浏览器卡了，而是你没触发重绘或忽略了样式优先级。
- 右侧
Styles面板里被划掉的属性，说明被更高权重的选择器覆盖（比如#header .btn覆盖了.btn） - 直接在
element.style区域改的值，属于内联样式，优先级最高，但刷新后就丢失 - 想临时禁用某条规则？点它前面的复选框即可，不用删，方便来回对比
- 盒子模型（margin/padding/border/content）在面板底部实时显示，颜色区分明显：淡蓝=content、淡绿=padding、橙色=margin
Console 面板：console.log 之外还能干啥？
别只当它是“打印日志的地方”，它本质是可交互的 JS 执行环境。
-
console.table()查数组或对象结构比console.log()清晰得多，尤其字段多时 -
console.time('label')+console.timeEnd('label')测一段逻辑耗时，比手动记时间靠谱 - 输入变量名回车，直接看当前值；输
debugger再回车，等于在控制台临时插入断点 - 右键某条日志 → “Store as global variable”，会生成一个临时变量（如
temp1），方便后续查它的属性或方法
Network 面板：接口明明返回 200，为啥数据没出来？
看到 200 OK 就放心？错。很多问题藏在响应体、请求头或预检阶段。
- 点开某条请求 →
Response标签页，确认返回的是 JSON 还是 HTML（常见于后端路由未配 CORS 或 fallback 到 index.html） - 看
Headers里的Content-Type：如果是text/html却期望 JSON，大概率是路径错了或服务端异常降级 - 过滤器输
XHR只看接口，输js或css快速定位资源加载失败 - 勾选
Disable cache再刷新，排除本地缓存干扰（尤其开发时改了接口返回但前端没更新）
Sources 面板：断点设了，但代码根本没停？
常见原因不是断点失效，而是脚本没被正确加载或 sourcemap 没对上。
- 确保你在
Sources里打开的是带映射的源码文件（通常显示为项目路径，如src/utils.js），而不是压缩后的bundle.js - 如果用了构建工具（Vite/Webpack），检查是否启用了
sourceMap: 'inline'或类似配置 -
debugger语句只有在非压缩、且未被移除的代码中才有效；构建后常被terser干掉 - 条件断点右键设置，比在代码里写
if (x === 5) debugger更干净，也避免提交调试代码
真正卡住人的，往往不是面板不会开，而是改了 Elements 不生效时没看 computed 样式，或是 Network 里看到 200 就跳过 Response 内容——这些细节不盯住，问题就永远在“看起来正常”的表象下藏着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
