1. 打开开发者工具
- 在Chrome菜单→更多工具→选择“开发者工具”（或按`Ctrl+Shift+I`）→显示调试面板（如检查网页元素时快速调用）。
- 使用快捷键`F12`→直接打开开发者工具→替代鼠标操作（适合全屏模式下调试）。
2. 查看和修改HTML元素
- 在Elements面板→点击页面元素→直接编辑标签属性（如修改按钮文本或图片路径）。
- 右键点击元素→选择“Edit as HTML”→可视化调整代码结构（如临时添加新节点测试布局）。
3. 调试JavaScript代码
- 在Sources面板→找到脚本文件→设置断点（点击行号）→刷新页面→逐步执行代码（如排查事件绑定问题）。
- 在Console面板→输入`script.js:10`→直接跳转到指定行号（如快速定位错误位置）。
4. 监控网络请求状态
- 切换到Network面板→刷新页面→查看所有资源加载情况（如检查图片是否成功加载）。
- 点击具体请求→查看Headers和Response数据→验证API返回内容（如确认服务器是否正确处理表单）。
5. 模拟移动设备环境
- 在左上角设备图标→选择“iPhone X”→切换分辨率→测试响应式布局（如检查手机端显示效果）。
- 在Network面板→勾选“Throttling”→模拟3G网络→测试加载速度（如优化图片资源时观察差异）。
6. 使用控制台输出日志
- 在Console面板→输入`console.log("测试")`→在脚本中插入调试信息（如跟踪函数执行顺序）。
- 使用`console.dir(element)`→查看对象属性和方法→分析DOM节点结构（如检查自定义组件的状态）。
7. 保存本地调试配置
- 在Workspaces面板→点击“New”→保存当前调试状态→下次直接加载（如保留断点和控制台命令）。
- 通过命令行启动Chrome→添加参数`--auto-open-devtools-for-tabs`→自动打开新标签的开发者工具（如多窗口调试时使用）。