HTML调试需综合运用浏览器开发者工具、W3C验证器和outline CSS：Elements面板查看真实DOM结构，W3C验证器检查语法合规性，outline高亮暴露布局问题，并须通过HTTP本地服务绕过file://协议限制。
HTML 页面调试不是靠猜，而是靠验证——浏览器开发者工具能直接告诉你 DOM 实际长什么样，W3C 验证器能指出你写的 HTML 是否合规，而 outline 一行 CSS 就能暴露所有溢出和错位元素。
用 Elements 面板看真实 DOM，别信源码
浏览器会自动修复很多语法错误，比如未闭合的 <p></p> 或非法嵌套的 <div> 在 <code><p></p> 里，但修复后的 DOM 树可能和你写的完全不同。这时候看源码没用，必须看 Elements 面板里渲染后的结构。
- 右键页面 → “检查”，或按
Ctrl+Shift+C（Windows/Linux）/Cmd+Option+C（macOS）进入元素选择模式 - 在 Elements 面板中右键某个节点 → “Break on” → “Subtree modifications”，可捕获 JS 动态插入/删除导致的结构变化
- 输入
document.body.innerHTML到 Console，对比输出与原始 HTML 文件，能快速发现差异来源 - 注意灰色文字、自动补全标签、红色高亮节点——这些是浏览器容错修正的明确信号
用 W3C Validator 检查语法合法性
HTML 语法错误不会报红，但会静默改变 DOM 结构。W3C Markup Validation Service 是唯一能按标准逐行指出问题的工具，尤其适合排查语义错误和废弃用法。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 访问
https://validator.w3.org/，选 “Validate by Direct Input” 粘贴完整 HTML 源码 - 重点关注
Stray end tag "div"、Start tag "p" seen but an element of the same type was already open这类提示 - 它不检查样式或 JS 行为，只验证是否符合 HTML5 规范，所以结果干净、无干扰
- 注意：如果页面含服务端模板（如
），需先预编译或剔除再验证
用 outline 快速定位溢出与错位
横向滚动条、元素“消失”、布局偏移——90% 的这类问题，靠肉眼根本找不到元凶。一行 outline CSS 就能强制所有元素显形，比手动查 margin/padding 高效得多。
- 在 Console 中粘贴执行：
document.head.appendChild(Object.assign(document.createElement('style'), {textContent: '* { outline: 1px solid #f00 !important; background: rgba(255,0,0,0.03) !important; }'})) - 只标记特定类型：输入
div, section, article { outline: 2px solid #0088ff !important; }聚焦布局容器 - 临时禁用 JS 后再加 outline，可排除动态操作干扰（方法：Console 输入
javascript:void(0)，然后刷新） - 慎用
* { outline: ... }在大型 SPA 页面，可能卡顿；优先用更窄的选择器
绕过 file:// 协议限制，本地调试要走 HTTP
双击打开 HTML 文件走的是 file:// 协议，这时 fetch、localStorage（部分浏览器）、@import 等都会被同源策略拦截，导致行为和线上不一致——这不是 bug，是协议限制。
- 用
npx serve（需 Node.js）启动本地服务，地址变成http://localhost:5000 - 或用 Python：终端运行
python3 -m http.server 8000，访问http://localhost:8000 - VS Code 安装 Live Server 插件，右键 HTML 文件 → “Open with Live Server”，自动启用 HTTP + 热重载
- 别依赖
file://下的 Network 面板结果——很多请求根本不会发出，状态栏也不会报错
真正难调的 HTML 问题，往往藏在“看不见”的地方：JS 删除了节点、CSS 把元素藏成 visibility: hidden、父容器 overflow: hidden 截断了子元素。调试时得交叉验证——Elements 看结构，Console 看逻辑，Network 看资源，outline 看视觉边界。漏掉任一环，都可能把时间浪费在错误的方向上。
