Lighthouse无需修改HTML代码即可生成报告，它通过Chrome DevTools静态扫描DOM及属性来审计无障碍和SEO问题，如img缺alt、表单无label、语义化错误等均会扣分。
Chrome DevTools 里点一下就出报告
新版 Chrome（≥ v110）已深度集成 Lighthouse，打开目标页后：
• 按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）唤出 DevTools
• 点顶部 Lighthouse 标签（没看到就点右上角 ⋯ → More tools → Lighthouse）
• 勾选 Performance、Accessibility 等类别，设备选 Mobile 或 Desktop
• 点击 Analyze page load —— 它会刷新页面并跑完整套审计
• 报告出来后，所有 HTML 相关问题（比如 img 缺 alt、label 和 input 的 for/id 不匹配）都会列在 Accessibility 和 SEO 分类下
为什么改 HTML 能提分，但不用动 JS 或 CSS
Lighthouse 的无障碍（Accessibility）和 SEO 审计是静态 DOM 扫描，不执行 JS，也不依赖运行时状态。所以：
• img 没 alt？补上就行，哪怕 alt="" 也要加 role="presentation"
• div onclick="submit()" 当按钮？换成 button 或补 role="button" tabindex="0"
• 表单字段没 label？加 <label for="xxx">邮箱</label><input id="xxx">，ID 必须完全一致
• 用 div 写导航？包一层 <nav></nav>，主标题用 <h1></h1>，别跳级
命令行跑 Lighthouse 时怎么指定 HTML 相关审计
CLI 方式适合自动化或批量检测，关键参数要对得上 HTML 层面的检查需求：
• --only-categories=accessibility,seo：只跑这两类，省时间且聚焦 HTML 问题
• --emulated-form-factor=mobile：移动端模拟会影响 viewport 和 UA，间接影响 HTML 渲染上下文
• --throttling-method=devtools：确保网络节流真实，避免因资源加载失败导致 HTML 元素未渲染而漏检
• 示例命令：lighthouse https://example.com --only-categories=accessibility,seo --emulated-form-factor=mobile --output=html --output-path=./report.html --view
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
容易被忽略的 HTML 审计干扰项
很多人跑完报告发现分数低却找不到原因，其实问题常出在测试环境本身：
• 浏览器扩展（尤其是 Dark Mode、广告屏蔽类）可能往 DOM 里注入元素或覆盖样式，直接干扰无障碍扫描
• 别用隐身窗口测试 —— 某些扩展在隐身模式下仍生效，而且 Lighthouse 无法捕获 Service Worker 缓存行为，导致 HTML 资源加载路径和线上不一致
• 页面必须已完全加载（不能是重定向中、空白页或 JS 跳转中途），否则 Lighthouse 读到的是不完整 DOM，img、form 等节点可能根本不存在
立即学习“前端免费学习笔记（深入）”；
