1. 打开开发者工具
- 在Chrome浏览器右上角点击三点菜单→选择“更多工具”→点击“开发者工具”（或按F12快捷键）→显示浮动面板（支持分离窗口模式）。
- 通过右键点击页面元素→选择“检查”→直接跳转到Elements面板（快速定位HTML节点）。
2. 元素检查与修改
- 在Elements面板→展开DOM树结构→点击具体标签→右侧样式栏显示对应CSS属性（如修改颜色、字体等实时生效）。
- 通过双击文本内容→直接编辑页面文字（如测试广告文案替换）。
- 右键点击元素→选择“删除”→移除指定节点（验证布局变化影响）。
3. 网络请求分析
- 在Network面板→刷新页面→查看所有资源加载记录（如JS、图片、API请求）→点击条目可查看详细信息（状态码、响应时间、Headers等）。
- 通过筛选栏选择“XHR”→专门查看异步请求→点击具体请求→查看返回数据（调试接口调用）。
- 右键点击请求→选择“Block Request”→阻止重复加载（如屏蔽广告请求）。
4. 控制台输出与调试
- 在Console面板→输入`console.log("测试")`→输出日志信息（验证JS执行情况）。
- 通过“Sources”面板→设置断点→暂停脚本执行（调试复杂交互逻辑）。
- 右键点击网络请求→选择“Copy as cURL”→生成命令行请求代码（便于后端联调）。
5. 设备模拟与性能测试
- 在开发者工具左上角→点击设备图标→选择手机型号（如iPhone 14）→模拟移动端浏览效果（测试响应式布局）。
- 通过Performance面板→点击“录制”→操作页面后停止→分析卡顿原因（如长时间渲染任务）。
- 在Audits面板→运行“Lighthouse”检测→生成性能评分报告（优化加载速度参考）。
6. 存储与缓存管理
- 在Application面板→选择“Cookies”→删除指定键值对（测试登录状态失效场景）。
- 通过“Cache Storage”→清除特定缓存条目→强制重新加载资源（验证缓存策略）。
- 在Local Storage中修改键值→实时反映到页面（如调整用户偏好设置）。