1. 元素检查与实时修改
按`Ctrl+Shift+I`打开控制台→点击“Elements”面板→鼠标悬停页面元素→查看HTML结构及CSS样式→双击属性值直接修改→例如将div的宽度从`100px`改为`200px`（需观察布局变化）。
2. 网络请求监控与优化
切换到“Network”面板→刷新页面→查看所有资源加载顺序→点击某个文件查看Headers和Response信息→例如禁用`example.jpg`的缓存→右键选择“Block Request”→刷新后确认加载时间减少（需对比前后数据）。
3.
控制台日志调试JavaScript
在“Console”面板输入`console.log("测试")`→页面输出调试信息→例如在购物车页面输入`document.querySelector('.total').innerText`→直接显示总价数值（需检查元素路径是否正确）。
4. 移动端模拟与响应式测试
点击右上角菜单→“更多工具”→“设备模式”→选择iPhone X
分辨率→拖动视口宽度→观察弹性布局变化→例如将导航栏`display`改为`block`→解决移动端隐藏问题（需
清除缓存后重试）。
5. 性能分析与优化建议
在“Performance”面板点击“录制”→执行页面操作→停止录制→查看FPS曲线和脚本执行时间→例如发现某动画导致帧率下降→定位到`requestAnimationFrame`代码段（需结合源代码分析）。
6. 断点调试与事件监听
在“Sources”面板打开JS文件→点击行号设置断点→例如在支付按钮点击事件处暂停→查看`event`对象属性→逐步执行代码排查错误（需关闭其他调试工具避免干扰）。
