1. 元素检查与实时编辑
- 打开开发者工具：按`Ctrl+Shift+I`或右键点击网页选择“检查”→进入“Elements”面板→鼠标悬停HTML标签可高亮对应页面元素。
- 修改页面内容：双击标签内的文本（如按钮名称）→直接输入新值→页面实时更新（适合测试文案或按钮功能）。
- 调整CSS样式：在“Styles”区域点击`::before`伪元素→添加`content: "示例文本"`→页面即时显示效果（无需修改源代码）。
2. 网络请求分析与优化
- 捕获网络日志：在“Network”面板按`F5`刷新页面→查看所有请求资源（如JS、图片、API接口）→点击条目可查看详细信息。
- 模拟弱网环境：在“Network”面板右上角菜单→选择“Throttle”→设置下载速度为10kb/s→测试页面加载性能（适合移动端优化）。
- 拦截并修改请求：在“Network”面板使用Alt+点击请求链接→修改URL参数或Headers→重新发送请求（用于调试API接口）。
3. JavaScript调试与断点管理
- 设置行内断点：在“Sources”面板找到JS文件→点击行号添加断点→按`F8`继续执行→观察变量变化（可调试第三方脚本）。
- 监控XHR请求：在“Sources”面板右侧“XHR”标签页→查看所有异步请求→点击请求可跳转至对应代码位置（快速定位AJAX问题）。
- 执行自定义脚本：在“Console”面板输入`script=document.createElement('script');script.src='https://example.com/test.js';document.head.appendChild(script);`→动态加载外部JS（测试脚本兼容性）。
4. 移动设备与多屏模拟
- 切换设备视图：在开发者工具左上角点击“Toggle device toolbar”→选择iPhone X或iPad等设备→页面自动适配屏幕尺寸（支持旋转模拟）。
- 模拟触摸事件：在“Event Listeners”面板→展开元素事件列表→手动触发“click”或“touchstart”事件→测试触控交互逻辑。
- 多窗口调试：在“Console”面板输入`window.open('http://example.com','_blank');`→在新窗口按`Ctrl+Shift+I`独立调试（适合多开页面场景）。
5. 性能分析与内存泄漏检测
- 录制性能轨迹：在“Performance”面板点击“Start recording”→执行页面操作（如滚动、点击）→停止录制并分析FPS曲线和渲染时间（找出卡顿原因）。
- 抓取内存快照：在“Memory”面板点击“Take snapshot”→对比不同时间点的Heap Size→发现未释放的全局变量（排查内存泄漏）。
- 强制垃圾回收：在“Console”面板输入`window.gc();`→手动触发GC机制→观察内存变化（配合快照分析更直观）。