1. 启用开发者工具调试功能
按`F12`或右键点击页面选择“检查” → 切换到“Console”标签 → 输入`console.log("测试")`验证是否生效。此操作快速定位代码错误（如对比不同浏览器输出），支持实时修改（适合前端调试），但需注意控制台输出可能影响性能（建议关闭多余日志）。
2. 通过“网络”面板分析请求加载
在开发者工具中切换到“Network”标签 → 刷新页面 → 查看资源加载顺序和耗时。此方法识别瓶颈资源（如对比图片与JS加载时间），优化带宽分配（建议压缩大文件），但数据仅反映单次结果（需多次测试取平均值）。
3. 使用“Sources”面板映射源代码
在“Sources”标签中找到目标脚本文件 → 设置断点（点击行号） → 手动触发相关功能观察执行流程。此操作逐行调试逻辑（如对比预期与实际运行结果），修复复杂问题（适合异步代码），但需熟悉基础调试命令（建议学习`step over`/`step into`用法）。
4. 调整“Rendering”模拟不同设备效果
切换到“Rendering”面板 → 勾选“Emulate CSS Media” → 选择“Screen”或自定义分辨率 → 实时查看响应式布局变化。此方法测试多端适配（如对比手机与电脑显示），避免重复切换设备（适合移动端优化），但无法完全还原真实环境（需结合真机测试）。
5. 通过“Application”管理本地存储数据
在“Application”标签左侧选择“Local Storage”或“Session Storage” → 双击编辑键值 → 刷新页面验证修改效果。此操作直接操作缓存（如对比修改前后数据持久性），调试离线应用（适合PWA开发），但误操作可能导致数据丢失（建议备份后操作）。