一、打开与基础界面操作
1. 快速打开开发者工具：
- 使用快捷键 `Ctrl + Shift + I`（Windows）或 `Cmd + Option + I`（Mac），也可右键点击页面选择“检查”。
- 在手机端Chrome中，可通过“USB连接”或“远程设备”调试移动端页面。
2. 界面布局调整：
- 拖动面板边缘可调整大小，点击左上角的“分隔符”图标切换垂直/水平布局。
- 按 `Esc` 键可隐藏工具，仅保留悬浮的“选择元素”按钮。
二、核心功能模块详解
1. Elements（元素检查）：
- 右键点击网页元素选择“检查”，直接定位到HTML代码，支持实时编辑样式（如修改颜色、边距）。
- 使用“Toggle element state”（切换元素状态）模拟 `hover`、`active` 等效果，方便调试交互组件。
2. Console（控制台）：
- 输入 `log('测试')` 输出信息，支持 `error`、`warn` 等不同级别日志。
- 在“Sources”面板中设置断点，结合控制台查看变量值（如 `typeof variable`）。
3. Network（网络分析）：
- 按 `F5` 刷新页面后，记录所有资源加载情况，查看请求头、响应时间、文件大小。
- 长按某条请求可复制链接地址，或右键生成二维码分享资源。
4. Performance（性能分析）：
- 点击“录制”按钮后操作页面，停止录制生成性能报告，重点关注“First Contentful Paint”（首次内容绘制）和“Long Task”（长时间任务）。
- 使用“Filmstrip”模式查看每一帧的渲染耗时，优化动画卡顿问题。
三、高级调试与优化技巧
1. 移动端模拟：
- 在“Settings” > “Devices”中添加自定义设备（如iPhone 14），模拟触屏操作（如滑动、缩放）。
- 启用“Disable CSS media queries”强制禁用媒体查询，检查响应式布局兼容性。
2. Lighthouse自动化评分：
- 点击“Lighthouse”面板生成报告，评估性能、可访问性、SEO等指标，并根据建议优化（如压缩图片、减少未使用CSS）。
- 在“Audits”标签页中勾选“Field Data”查看真实用户数据（需网站接入Chrome User Experience Report）。
3. Sources代码调试：
- 在“Workspaces”中映射本地项目文件夹，直接修改保存后自动同步至浏览器。
- 使用“Snippets”保存常用代码片段（如清除缓存命令：`cache.clear()`），按 `Ctrl + Enter` 执行。
四、实用快捷键与效率工具
1. 快捷键组合：
- `Ctrl + .`（Windows）或 `Cmd + .`（Mac）：快速切换元素选框。
- `Ctrl + Shift + P`（Windows）或 `Cmd + Option + P`（Mac）：打开命令菜单，搜索功能（如“Show console”）。
2. 扩展插件集成：
- 安装“Web developer”插件，直接在工具栏添加“查看盒模型”“液化模式”等按钮。
- 使用“ColorZilla”扩展取色，并生成CSS代码（如 `background-color: f00;`）。
五、网络请求与安全调试
1. 拦截与修改请求：
- 在“Network”面板右键点击请求，选择“Block request domain”屏蔽特定域名资源（如广告）。
- 修改请求头：右键点击请求 > “Edit and resend”，添加自定义参数（如 `X-Test: value`）。
2. HTTPS证书与安全性：
- 在“Security”面板查看证书详情，模拟过期证书场景（需在“Settings”中启用“Override certificate errors”）。
- 使用“View certificate”导出密钥，检查是否支持TLS 1.3协议。
