应先检查元素是否真实渲染：在Chrome DevTools Elements面板悬停节点，若无高亮或节点灰显，则可能被display:none、visibility:hidden、overflow:hidden裁剪，或根本未插入DOM。
检查元素是否真的被渲染出来
页面看起来空白或缺内容，第一反应不是代码写错了，而是元素压根没进 DOM。打开 Chrome DevTools（F12 或右键 → 检查），切到 Elements 面板，用鼠标悬停左侧树状结构里的节点，看右上角是否实时高亮对应区域——如果悬停没反应、或节点是灰色/半透明，说明它可能被 display: none、visibility: hidden、父级 overflow: hidden 裁剪，或根本没被 JavaScript 插入。
常见陷阱：
-
document.write()在页面加载完成后调用会清空整个文档 - JS 脚本放在
<head>里且没加defer或DOMContentLoaded监听，导致执行时document.getElementById()找不到元素 - HTML 标签未闭合（比如漏了
</div>），浏览器自动纠错后 DOM 结构和你写的不一致
定位样式失效的真正原因
明明写了 color: red，文字却还是黑色？别急着改 CSS，先点开 Elements 面板右侧的 Styles 标签页，看当前选中元素的样式列表。重点观察三点：
- 带删除线的样式：表示被更高优先级规则覆盖（注意看选择器权重，
#id>.class>tag） - 灰色字体的属性：表示该属性对当前元素不生效（比如给
<span>设height，但它是内联元素） - 顶部显示的“Computed”值：点开它，确认最终计算出的值是否符合预期；若为
initial或unset，说明样式链完全没命中
小技巧：在 Styles 面板勾选 :hover、:active 等伪类，模拟交互状态看样式是否就绪。
立即学习“前端免费学习笔记（深入）”；
快速验证 JS 是否执行及报错位置
页面逻辑异常，比如按钮点击没反应，先看 Console 面板有没有红色错误信息。常见报错如：
-
Uncaught ReferenceError: xxx is not defined：变量或函数名拼写错误，或声明在调用之后（且非var提升范围） -
Uncaught TypeError: Cannot read property 'xxx' of null：document.querySelector()返回null，后续还强行访问属性 -
Failed to load resource: net::ERR_FILE_NOT_FOUND：本地双击打开index.html时，相对路径的 JS/CSS 图片因缺少 HTTP 服务而 404（此时应启用 Live Server 插件或python3 -m http.server）
临时调试建议：在可疑 JS 行前加 debugger;，刷新后自动断点；或右键 Console 的错误行 → “Reveal in file”，直接跳转源码位置。
排查资源加载失败与跨域问题
图片不显示、API 请求 404 或被拦截，切到 Network 面板刷新页面，按 Img、JS、XHR 分类筛选。重点关注三列：
-
Status：非 200（如 404、0）说明路径错或服务未启 -
Size：显示(blocked:other)或(failed)可能是跨域（CORS）或混合内容（HTTP 资源在 HTTPS 页面加载） -
Initiator：点开某请求，看 “Initiator” 列指向哪行 JS，快速定位发起者
本地开发时，Chrome 默认禁用 file:// 协议下的跨域请求。不要试图关掉安全策略，正确做法是用本地服务器启动，而不是双击打开 index.html。
DOM 结构、样式优先级、JS 执行时机、网络请求链路——这四块不串起来看，单改一行代码往往治标不治本。
