1. 快捷键启动：按 `Ctrl+Shift+I`（Mac用 `Cmd+Option+I`）→ 直接打开开发者工具 → 默认显示“Elements”面板。
2. 右键菜单进入：在网页空白处右键点击 → 选择“检查” → 快速定位当前元素位置。
3. 命令行强制开启：关闭Chrome后重新打开 → 在启动时添加参数 `--auto-open-devtools-for-tabs` → 自动打开所有标签页的控制台。
二、核心功能操作
1. 元素检查与修改：在“Elements”面板选择DOM节点 → 直接修改HTML属性 → 实时查看页面变化 → 支持拖动调整布局。
2. 样式调试技巧：在“Styles”栏修改CSS属性 → 使用箭头键微调数值 → 点击颜色值直接调用拾色器 → 练习无需保存即可预览效果。
3. 事件监听分析：在“Event Listeners”标签查看绑定事件 → 双击事件名称可触发 → 验证点击/悬浮等交互逻辑 → 排查脚本冲突问题。
三、网络请求监控
1. 捕获资源加载：切换到“Network”面板 → 刷新页面 → 显示所有请求类型 → 包括文档/图片/脚本/字体文件。
2. 筛选关键资源：使用过滤器输入关键词（如`jpg`或`api`）→ 右键点击请求项选择“Block Request” → 模拟禁用特定资源。
3. 分析加载顺序：查看“Waterfall”图表 → 识别阻塞渲染的关键点 → 优化首屏加载速度 → 检查是否有未压缩的资源文件。
四、脚本调试流程
1. 设置断点方法：在“Sources”面板打开脚本文件 → 点击行号设置断点 → 当代码执行到此处时自动暂停 → 支持条件断点设置。
2. 逐步执行代码：使用“Step over”和“Step into”按钮 → 逐行检查变量值 → 在“Watch”窗格添加表达式 → 实时监控数据变化。
3. 控制台输出调试：在代码中插入`console.log()`语句 → 查看打印结果 → 支持表格/图片/对象等多种格式输出。
五、移动端模拟测试
1. 切换设备模式：按 `Ctrl+Shift+M`（Mac用 `Cmd+Shift+M`）→ 显示手机尺寸界面 → 模拟触摸操作 → 测试响应式布局。
2. 自定义屏幕尺寸：在“Device Toolbar”中取消预设 → 手动输入宽度/高度 → 精确匹配特殊设备分辨率。
3. 网络环境模拟：在网络面板选择“Online”或“Slow 3G” → 测试不同网速下的加载情况 → 优化图片质量与文件大小。
六、性能优化分析
1. 运行性能审计：在“Lighthouse”面板点击“Generate report” → 自动检测性能/访问性/SEO等问题 → 获得优化分数和建议。
2. 查找内存泄漏：在“Memory”面板多次采样 → 对比堆栈信息 → 发现未释放的全局变量 → 使用“Heap snapshot”功能分析。
3. 优化渲染路径：在“Rendering”面板查看重绘次数 → 减少不必要的CSS动画 → 启用“Composite layers”提升动画性能。
