调试技巧

共 17 题
#

1. 断点(行、条件、logpoint、DOM)的合理使用

A 所有场景都用行断点即可,无需其他类型
B DOM 断点与 DOM 变化无关
C Logpoint 会在每次执行时暂停
D 条件断点过滤高频调用、Logpoint 只打印不暂停、DOM 断点定位 DOM 变化,按需选择可提升效率 ✓ 正确答案
#

2. Snippets 代码片段的复用

A Snippets 与 Console 一样,关闭即丢失
B Snippets 无法访问页面 DOM
C Snippets 只能运行一次,无法编辑
D Snippets 可持久保存、随时运行,适合复用常用调试脚本,与 Console 的一次性输入不同 ✓ 正确答案
#

3. Workspace 本地文件映射与覆盖(Overrides)

A 两者功能完全相同,都是写回真实源码
B Workspace 把本地源码映射到资源并写回磁盘,Overrides 用本地副本临时覆盖线上资源 ✓ 正确答案
C Overrides 修改会直接改动线上服务器
D Workspace 无法编辑源码
#

4. 请求阻止(Blocking)与重放(Replay)

A 请求阻止可模拟资源不可用以测试降级,重放可重新发送请求反复调试接口 ✓ 正确答案
B 请求阻止用于加速请求,重放用于删除请求
C 两者都只能作用于静态资源,无法作用于 XHR
D 请求阻止会修改服务器代码
#

5. xhr/fetch breakpoints 在请求 payload 的断点的工程价值

A 它只能在请求完成后暂停,无法看 payload
B 它可在匹配 URL 的请求发出前暂停,查看 payload 与调用栈,定位请求来源 ✓ 正确答案
C 它只能用于 GET 请求,无法用于 POST
D 它无法按 URL 关键字过滤
#

6. Performance Trace 在 RUM(Real User Monitoring)

A RUM 与 Performance Trace 完全等同
B RUM 采集真实用户核心指标发现异常,Performance Trace 深入定位根因,两者互补 ✓ 正确答案
C RUM 只能在本地采集,无法采集生产用户
D Performance Trace 可以替代 RUM 覆盖所有用户
#

7. Chrome DevTools 的 Device Mode(移动端模拟)

A 能完美模拟真实设备的 CPU 与 GPU 性能
B 无法自定义设备参数
C Device Mode 只能模拟桌面端
D 可模拟视口、DPR、触摸与 UA,但性能等硬件行为仍需真机验证 ✓ 正确答案
#

8. Chrome DevTools 的 Sensors(地理位置、加速度计)

A 可模拟地理位置、设备方向与传感器,位于桌面即可调试移动端定位与传感器功能 ✓ 正确答案
B 只能模拟地理位置,无法模拟加速度计
C Sensors 面板无法覆盖 geolocation API
D 传感器模拟必须连接真实设备
#

9. Chrome DevTools 的 $_ 与 $0~$4 在控制台的工程应用

A $_ 引用最后选中的元素,$0 引用上一次求值结果
B $0 引用最近在 Elements 选中的元素,$_ 引用上一次求值结果,可组合提升调试效率 ✓ 正确答案
C $0~$4 只能引用桌面元素,无法用于 Console
D $_ 与求值结果无关
#

10. Chrome DevTools 的 Performance Insights 在关键渲染路径的诊断

A 它与关键渲染路径无关,只分析网络
B 关键路径优化无法用任何工具诊断
C 它只能分析动画,无法分析首屏
D Performance Insights 自动归类瓶颈并给出建议,可诊断关键路径中的渲染阻塞与长任务 ✓ 正确答案
#

11. Chrome DevTools 的 Network 面板的 HAR 导出与协作的工程价值

A HAR 是标准化的请求日志格式,可导出分享给他人分析请求时序与耗时,便于协作排障 ✓ 正确答案
B HAR 只能本地查看,无法导出分享
C HAR 不包含请求的响应信息
D HAR 只能用于性能分析,无法用于 bug 排查
#

12. Chrome DevTools Issues 面板与跨源 cookie deprecation 警告的工程价值

A Issues 面板只显示 UI 错误,不涉及 Cookie
B 第三方 Cookie 永远不会被弃用,无需关注
C Issues 面板集中展示浏览器的警告与建议,包括跨源 cookie 弃用警告,帮助提前迁移避免功能失效 ✓ 正确答案
D Issues 面板无法提供修复建议
#

13. Chrome DevTools 的 console.log 的格式化(%c、%o)的现代实践

A %c 只能格式化数字,无法用于文本
B %c 用于给文本应用 CSS 样式,%o 以对象形式展开,可提升日志可读性 ✓ 正确答案
C console.log 不支持任何格式占位符
D %o 会输出字符串而不是对象
#

14. Chrome DevTools 的 Network Throttling 在慢网络模拟的工程实践

A 它只能模拟离线,无法模拟慢速网络
B 无法自定义带宽与延迟
C 节流只影响视觉,不影响加载
D 提供预设与自定义节流,可模拟弱网验证加载、超时与降级策略 ✓ 正确答案
#

15. Chrome DevTools 的 chrome://flags 在实验功能的工程应用

A 它是实验功能开关,可用于提前测试新特性,但功能可能不稳定、不应作为生产依赖 ✓ 正确答案
B 它是稳定功能,可放心在生产中依赖
C 它只能禁用实验,无法启用
D 实验功能完全稳定,无任何风险
#

16. Chrome DevTools 的 Animations 面板的动画调试与编辑的现代实践

A 它只能查看动画是否存在,无法慢放或调整参数
B 它只能调试 JS 动画,无法调试 CSS 动画
C 可捕获 CSS 动画与过渡,支持慢放、暂停、拖拽调整参数并实时预览,便于动画调试 ✓ 正确答案
D 动画调试必须改代码刷新
#

17. Chrome DevTools 的 DOM Breakpoints(子树修改、属性修改)

A 可监听子树修改、属性修改、节点移除,在变化时暂停到触发代码、配合调用栈定位来源 ✓ 正确答案
B 只能监听节点移除,不支持属性修改
C 它只能在浏览器内部暂停,无法定位业务代码
D 它用于暂停网络请求