1. 打开开发者工具
- 使用快捷键`F12`或`Ctrl+Shift+I`（Windows/Linux）→直接调出工具面板。
- 例如：在网页任意区域右键点击→选择“检查”→同样可打开工具。
2. 查看和修改网页元素
- 在“Elements”面板中→展开HTML标签结构→鼠标悬停或点击元素→实时高亮页面对应部分。
- 例如：双击文本内容可直接编辑→修改后自动同步到页面，适合测试样式调整。
3. 调试CSS样式
- 在“Styles”面板中→展开某元素的CSS规则→点击属性值进行修改（如颜色、字体、定位等）。
- 例如：临时禁用某条样式→勾选右侧小方框即可屏蔽该规则，观察页面变化。
4. 监控网络请求
- 切换到“Network”面板→刷新页面→查看所有加载的资源（JS、图片、API请求等）。
- 例如：点击某个请求→在右侧栏分析响应时间、状态码、Headers和Payload数据。
5. 模拟移动设备调试
- 在“Rendering”面板中→勾选“Emulate CSS Media”→选择设备类型（如iPhone 14）。
- 例如：查看网页在手机屏幕尺寸下的布局效果，避免移动端显示问题。
6. 调试JavaScript代码
- 在“Sources”面板中→展开脚本文件→设置断点（点击行号左侧）→重新加载页面触发调试。
- 例如：当代码执行到断点时→自动暂停→可逐步执行（Step Over/Into）并查看变量值。
7. 分析页面性能
- 在“Performance”面板中→点击“录制”按钮→操作页面后再次点击停止→生成性能报告。
- 例如：查看FPS（流畅度）、脚本执行时间、重绘次数等关键指标，优化卡顿问题。
8. 使用控制台输出日志
- 在“Console”面板中→输入`console.log("测试信息")`→页面JS代码中添加调试语句。
- 例如：快速验证变量值或接口返回数据，辅助排查错误原因。
9. 模拟不同网络环境
- 在“Network”面板中→点击“Online”下拉菜单→选择“Slow 3G”或自定义限速。
- 例如：测试弱网环境下的页面加载速度，优化资源加载策略。
10. 检查存储数据
- 在“Application”面板中→展开“Local Storage”或“Cookies”→查看键值对数据。
- 例如：手动修改存储值→刷新页面后验证是否生效，适合调试本地数据逻辑。
