以下是谷歌浏览器网页调试功能的实用指南：
1. 打开开发者工具
- 按`F12`或右键点击页面选择“检查”，打开开发者工具，默认显示元素面板和控制台。
2. 查看元素与样式
- 在“Elements”面板中，鼠标悬停HTML标签可高亮页面对应区域，修改属性（如`color`、`font-size`）实时预览效果。
- 右键点击元素选择“Edit as HTML”或“Delete element”，直接编辑或删除代码测试页面变化。
3. 监控控制台日志
- 在“Console”面板查看JavaScript报错信息（如语法错误、网络请求失败），点击错误链接跳转到具体代码行。
- 使用`console.log("变量名")`在脚本中输出调试信息，帮助追踪变量值和执行流程。
4. 分析网络请求
- 在“Network”面板刷新页面，查看所有资源加载记录（如JS、图片、API接口），点击条目可查看响应数据、耗时和状态码。
- 勾选“Disable Cache”强制刷新缓存，测试资源是否最新；右键点击请求选择“Block request domain”模拟资源加载失败。
5. 调试JavaScript代码
- 在“Sources”面板找到脚本文件，点击行号添加断点，页面运行时会自动暂停，逐步执行代码（Step over/Into）。
- 在右侧“Scope”区域查看当前作用域变量，使用“Watch expressions”监控自定义表达式值。
6. 模拟移动设备
- 点击右上角设备图标（Toggle device toolbar），选择手机型号或自定义屏幕尺寸，测试响应式布局和触屏交互。
- 在“Network”条件中选择“Fast 3G”或“Slow 3G”，模拟弱网环境下的页面加载性能。
7. 性能优化检测
- 在“Performance”面板点击录制按钮，操作页面后停止录制，查看FPS曲线、长任务（如复杂动画）和资源加载耗时。
- 根据建议优化图片压缩、减少DOM操作，提升页面流畅度。
8. 修改Cookie与LocalStorage
- 在“Application”面板的“Cookies”选项卡中，手动添加或删除Cookie，测试登录状态或用户配置变化。
- 在“Local Storage”中修改键值对，模拟不同用户数据下的页面表现。