以下是谷歌浏览器的Web开发工具与调试技巧汇总：
1. 元素检查与实时编辑
- 按`Ctrl+Shift+I`打开开发者工具→切换到Elements面板→右键点击网页元素选择“检查”→直接修改HTML标签或CSS属性。可双击样式表数值（如width:100px）输入新值，按回车生效。
2. 网络请求分析
- 在Network面板刷新页面→按文件类型筛选（如JS/CSS/图片）→点击具体请求查看响应头/时间线。长按条目可拖动排序，右键导出为HAR文件用于性能分析。
3. 断点调试JavaScript
- 在Sources面板找到脚本文件→点击行号设置断点→使用Step Over/Into逐步执行代码。右侧Watch Expressions可添加变量监控，Call Stack显示函数调用路径。
4. 模拟移动设备
- 点击开发者工具左上角的设备图标→选择手机型号（如iPhone X）→自动调整窗口分辨率。Throttling下拉框可模拟不同网络速度（如3G/4G/Slow 3G）。
5. 性能分析与优化
- 切换到Performance面板→点击录制按钮后操作页面→停止后查看FPS曲线和加载时间。红色区域表示卡顿，可针对性优化DOM操作或减少重绘。
6. 控制台日志输出
- 在Console面板输入`console.log('测试')`→查看输出结果。支持自定义样式（如`%c`）、分组（`console.group()`）和异常捕获（`try...catch`）。
7. 远程调试移动端
- 安卓设备开启开发者模式→USB连接电脑→在Chrome地址栏输入`chrome://inspect/devices`→点击设备前的Inspect按钮。需确保手机与电脑处于同一WiFi环境。
8. 颜色取值与对比度检测
- 在Elements面板选择文字或背景→右键选择“颜色选择器”→获取HEX/RGB值。Audits面板生成报告时会提示颜色对比度问题（如按钮文字不可见）。
9. 网络拦截与修改
- 在Network面板勾选“禁用缓存”→修改请求参数（如URL/Headers）→重新发送请求。ModHeader扩展可永久添加自定义请求头（如X-Test-Header:123）。
10. 应用内存泄漏检测
- 在Memory面板多次录制堆快照→对比前后差异找出未释放的对象。Heap snapshot图表可可视化显示内存占用情况，适合排查长时段运行的网页应用。
完成调试后，可通过`Ctrl+R`强制刷新页面验证修改效果，或使用快捷键`Alt+Shift+C`快速呼出/隐藏开发者工具。