DevTools里找不到Lighthouse标签时，应点击右上角⋯→More tools→Lighthouse；测试前需禁用所有扩展、确保页面完全加载，并在配置中仅勾选Accessibility、选Navigation模式、点击Analyze page load。
DevTools里找不到Lighthouse标签怎么办
新版 Chrome（≥ v110）已深度集成 Lighthouse，但标签默认可能被隐藏。按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）打开 DevTools 后，若顶部活动栏没看到 Lighthouse，直接点右上角 ⋯ → More tools → Lighthouse 即可唤出。
常见误操作是误开“隐身窗口”测试——此时部分浏览器扩展仍会注入 DOM 或劫持样式，导致报告失真；更关键的是，Lighthouse 无法捕获 Service Worker 缓存行为，结果不反映真实二次访问体验。
- 务必在普通窗口、页面完全加载完成后再运行（不是重定向中、不是空白页）
- 测试前禁用所有浏览器扩展，尤其是广告屏蔽、Dark Mode 类插件
- 不要依赖“刷新后立刻点 Analyze”，等 Network 面板显示全部请求完成（无 pending 状态）
只测无障碍（Accessibility）该选什么配置
Lighthouse 的无障碍审计是纯静态 DOM 扫描，不执行 JS，所以结果完全取决于 HTML 结构和属性是否合规。要聚焦这一项，必须在配置面板中：
- 设备选
Mobile或Desktop—— 移动模式会切换 UA 并模拟 viewport，影响渲染后 DOM 树，间接改变无障碍节点可见性 - 只勾选
Accessibility，其他类别全清空（别留着SEO或Best Practices） - 模式保持默认
Navigation（不是Timespan或Snapshot），否则不生成无障碍分数 - 点击按钮必须是
Analyze page load（不是旧版文案Generate report）
如果误选了 Timespan 模式，报告里压根不会出现 0–100 分的无障碍总分，只有零散检查项，无法用于提分对标。
立即学习“前端免费学习笔记（深入）”；
HTML 层面哪些修改能立竿见影提无障碍分
70% 的无障碍警告靠改 HTML 就能解决，无需 JS 或重构逻辑。核心是让 DOM 节点具备明确语义和可读文本上下文：
-
<img>必须有alt：功能性图写描述，装饰性图统一用alt="" role="presentation" - 把
<div onclick="submit()>提交</div>改成<button type="button">提交</button>，否则屏幕阅读器无法识别交互意图 - 表单字段必须配
<label for="xxx">，且for值与对应<input id="xxx">的id严格一致（大小写、拼写、有无空格都算错） - 导航菜单包在
<nav>里，主标题用<h1>，禁止跳级（如<h1>后直接<h3>） - 避免内联样式写死颜色，比如
style="color:#333;background:#fff"—— Lighthouse 计算对比度时依赖 CSS 继承链，内联样式可能打断它
为什么修复了 HTML 还是扣分
最常被忽略的不是代码写法，而是测试上下文和属性细节：
-
aria-label或alt值为空格或纯符号（如alt=" "、aria-label="→"）会被判定为“无有效文本”，必须是可读字符串 -
<button>内若只含 SVG，需确保 SVG 有aria-hidden="true"，且按钮本身带aria-label或可见文本 - 颜色对比度不足不是“写了颜色就行”，Lighthouse 会提取最终计算出的
color和background-color值，如果父元素用opacity或半透明背景，可能导致对比度失效 - 动态插入的 DOM（如 JS 渲染的弹窗、下拉菜单）在
Navigation模式下不会被扫描——得切到Snapshot模式手动触发后截图分析
真正卡分的往往藏在 ID 拼写、空格、SVG 属性、CSS 继承断裂这些细节里，而不是大结构问题。
