1. 实时编辑CSS样式
- 在Chrome浏览器中按`Ctrl+Shift+I`打开开发者工具→选择“Styles”面板→直接修改页面元素的CSS属性（如将`font-size`从14px调整为18px）→立即查看效果。
- 通过右键点击网页元素→选择“Inspect”→在弹出的样式表中新增临时规则（如添加`box-shadow: 2px 2px 5px 333`测试阴影效果）。
2. 调整HTML结构布局
- 在Elements面板双击DOM元素→进入HTML编辑模式→修改标签属性（如将div改为section）→验证语义化结构对SEO的影响。
- 通过Console面板输入`document.querySelector('.header').insertBefore(document.createElement('h1'), null)`→动态插入标题标签→检查页面可访问性评分。
3. 模拟不同设备适配
- 在开发者工具左上角点击“平板图标”→选择“iPhone X”预设→观察移动端布局断点（如导航栏是否折叠）→调整CSS媒体查询参数（如将`@media (max-width: 768px)`改为`576px`）。
- 通过命令行启动Chrome→添加参数`--user-agent="Mozilla/5.0 (Galaxy S23)"`→强制加载移动页面版本→对比PC端与移动端显示差异。
4. 调试JavaScript交互逻辑
- 在Sources面板找到主JS文件→设置断点在第10行→触发页面滚动事件（如滑动到底部）→逐行执行代码（查看变量`scrollPosition`数值变化）。
- 通过Console面板输入`performance.mark('Start'); performance.mark('End'); performance.measure('Test', 'Start', 'End')`→生成脚本执行时间报告→优化动画加载效率。
5. 分析网络请求性能
- 在Network面板点击“录制”按钮→刷新页面→查看所有资源加载状态（如图片是否启用缓存）→右键点击CSS文件→选择“Block Request”模拟加载失败场景。
- 通过“Lighthouse”工具运行审计→获取性能评分（如90分以上为优秀）→根据建议优化图片格式（将JPEG转为WebP节省空间）。
6. 测试跨浏览器兼容性
- 在Rendering面板取消勾选“默认配置”→手动关闭“CSS Grid支持”→检查网格布局是否降级（如使用Flexbox替代方案）。
- 通过BrowserStack扩展→同步测试Firefox和Edge浏览器→对比弹性盒子在不同内核下的渲染差异（调整`flex-grow`值为0.5）。