# 1. Chrome DevTools Performance Insights / Lighthouse 的现代面板协作的工程价值 A Lighthouse 建立全局基线并审计，Performance Insights 深入录制定位具体瓶颈，二者互补闭环 ✓ 正确答案 B Lighthouse 负责深度定位根因，Performance Insights 负责评分 C 两者功能完全重复，任选其一即可 D Performance Insights 只能用于调试动画，与性能审计无关
# 2. Chrome DevTools Recorder（含 @chrome/recorder） A 只能录制，不能回放或导出测试脚本 B 它只能用于性能录制，与测试无关 C 它记录的用户流可导出为 Puppeteer/Playwright 脚本，且 @chrome/recorder 提供编程化 API ✓ 正确答案 D 它与 Lighthouse 是同一个功能
# 3. Console API 深度（console.table、console.time、monitor、$ 选择器） A $0 是全局变量，始终代表 document B monitor 只能用于计时，不能用于监听事件 C $ 与 document.querySelector 完全等价且无任何区别 D $0 引用最近一次在 Elements 面板选中的元素，$_ 引用上一次求值结果 ✓ 正确答案
# 4. 性能面板的帧与长任务分析？ A 一帧超过 16.7ms 就是长任务，两者互为同义 B 帧与长任务无关，掉帧只可能由网络引起 C 长任务指主线程超过 50ms 的连续任务，会阻塞渲染与输入，帧超时会掉帧 ✓ 正确答案 D 长任务只发生在子线程，不影响主线程
# 5. Chrome DevTools 的 Accessibility 面板与无障碍检查，axe 集成、名称/角色/状态审计与对比度检查在组件审计中的工程价值？ A 它只检查对比度，不检查语义 B 它展示可访问性树的名称/角色/状态，并支持 axe 集成与对比度检查，可左移到组件开发阶段 ✓ 正确答案 C 无障碍检查在组件开发阶段无意义，只能在生产环境做 D axe 检查只能手动运行，无法集成到 CI
# 6. Chrome DevTools Elements 面板的 DOM 审查、Styles 调试、Computed、Event Listeners A Computed 面板用于编辑样式，Styles 面板用于查看计算值 B 伪类状态（:hover）只能在代码中切换，面板不支持 C Styles 面板无法查看被覆盖的规则 D Event Listeners 面板可列出元素绑定的事件监听器及其所在函数 ✓ 正确答案
# 7. Network 面板的请求过滤、瀑布流、Throttling、Replay A 瀑布流主要用于修改请求参数，不反映耗时 B Throttling 可模拟网络条件，瀑布流可区分 TTFB 与下载耗时等阶段 ✓ 正确答案 C Replay 只能重放静态资源，不能重放 XHR D 请求过滤只能按类型过滤，无法按 URL 或者正则
# 8. Sources 面板的断点类型（行、条件、logpoint、DOM、XHR、事件、函数） A Logpoint 不暂停执行，而是把表达式结果打印到控制台 ✓ 正确答案 B 条件断点无论条件是否满足都会暂停 C DOM 断点只能暂停在 JavaScript 代码行，与 DOM 无关 D 函数断点必须打开对应文件才能设置
# 9. DevTools 自定义面板（chrome.devtools.panels） A 可通过 chrome.devtools.panels.create() 创建面板，并借 inspectedWindow 访问被调试页面 ✓ 正确答案 B 它只能放在 Chrome 菜单栏，无法进 DevTools C 自定义面板无法访问任何被调试页面的信息 D 创建自定义面板必须修改 Chrome 源码
# 10. Layers 面板与 Paint Profiler 在渲染图层与绘制分析的工程价值 A Layers 面板只能查看静态页面，无法反映图层 B Paint Profiler 用于分析网络请求耗时 C Layers 面板可查看合成图层，Paint Profiler 可查看绘制步骤耗时，用于定位渲染瓶颈 ✓ 正确答案 D 两者都只能用于音频调试
# 11. DevTools 的性能面板，录制与帧分析？ A 录制时操作应尽量多且杂，以覆盖更多场景 B 性能面板只能录制网络请求，无法记录主线程 C 录制后 Frames 区红色表示掉帧，火焰图中的红色块表示主线程耗时函数 ✓ 正确答案 D 帧分析只能通过第三方工具完成，性能面板不支持
# 12. Application 面板（Service Worker、Cache、IndexedDB、Storage） A 它可查看 Service Worker 状态、Cache Storage、IndexedDB 与各存储配额，并支持一键清除 ✓ 正确答案 B 它只能管理 Cookie，无法查看 IndexedDB C Service Worker 的更新与否无法在面板中控制 D 它主要用于编辑 CSS 样式
# 13. 网络面板与请求分析，瀑布图与时间线？ A 瀑布图可拆分为 DNS、连接、TTFB、下载等阶段，用于定位网络瓶颈 ✓ 正确答案 B 瀑布图只显示请求总数，不显示各个阶段耗时 C TTFB 长只可能由前端 JS 引起 D 瀑布图无法反映请求之间的串行阻塞
# 14. Console 与调试技巧，断点、监视与条件断点？ A 条件断点会在每次暂停时都暂停 B 条件断点只能用于网络请求，不能用于 JS C 条件断点仅在表达式为真时暂停，可在断点暂停时用 Watch 或控制台观察变量 ✓ 正确答案 D Watch 面板只能看全局变量，无法看局部变量
# 15. Elements 面板，样式覆盖与盒模型调试？ A 被覆盖的样式在面板中不会显示任何标记 B 被覆盖规则以删除线显示，盒模型可视化展示 content/padding/border/margin 尺寸 ✓ 正确答案 C 盒模型调试只能看 margin，无法看 padding D 样式覆盖与优先级无关，纯属随机
# 16. Lighthouse 审计与 CI 集成？ A Lighthouse 只能手动运行，无法自动化 B Lighthouse 从 Performance、Accessibility、Best Practices、SEO、PWA 五维审计，并可通过 Lighthouse CI 配置性能预算作门禁 ✓ 正确答案 C Lighthouse 只审计性能，不涉及无障碍 D 性能预算无法在 CI 中强制执行
# 17. Elements 面板的 Break on（subtree modification、attribute modification、node removal）在定位 DOM 被谁修改的调试应用？ A 它只能监听节点移除，不支持属性修改 B 设置后 DOM 变化会暂停到触发修改的 JS 代码处，配合调用栈定位修改来源 ✓ 正确答案 C 它只能暂停在浏览器内部，无法定位业务代码 D 它用于暂停网络请求，与 DOM 无关
