一、基础调试工具操作
1. 快速进入开发者模式
- 使用快捷键组合 `Ctrl+Shift+I`（Windows/Linux）或 `Cmd+Opt+I`（Mac）直接打开开发者工具面板
- 在Chrome右上角菜单栏选择“更多工具”→“开发者工具”，通过拖拽标题栏实现独立窗口显示
- 访问 `chrome://inspect/devices` 连接手机设备，调试移动端网页脚本（需启用USB调试）
- 在Console面板输入 `document.hasFocus()` 强制将焦点切换回当前调试页面
2. 脚本定位与断点设置
- 在Sources面板左侧展开文件目录，双击HTML文件直接跳转到``标签位置
- 使用快捷键 `F10` 步进执行代码，`F8` 跳过当前函数，`Ctrl+Shift+B` 添加行级断点
- 右键点击脚本代码选择“Add breakpoint condition”，设置表达式如 `$var === 'value'br /> - 在Console面板输入 `debugger;` 在特定位置插入手动触发的断点
3. 实时变量监控与修改
- 在Watch面板添加表达式如 `window.userData` 持续追踪全局变量变化
- 使用扩展商店安装Variable Inspector可视化复杂对象结构（支持树状展开）
- 通过开发者工具Snippets面板编写临时代码 `localStorage.setItem('test', 'ok');` 测试存储功能
- 在Console面板输入 `$0.toString()` 快速查看最后一个选中元素的字符串表示
4. 异步脚本调试技巧
- 在Sources面板右侧开启“Pause on exceptions”捕获未处理的错误（包括Promise拒绝）
- 使用扩展商店安装Async/Await Debugger高亮异步函数执行顺序
- 通过开发者工具Network面板筛选“XHR”请求，点击详情查看`payload`参数
- 在Console面板输入 `performance.now()` 手动标记异步操作时间节点（如动画帧率测试）