一、基础操作步骤
1. 打开开发者工具：按F12键或右键点击页面选择“检查”→显示调试面板→默认进入元素查看模式。
2. 切换设备模式：点击左上角手机图标→选择预设设备或自定义分辨率→模拟移动设备浏览效果。
3. 启用网络监控：在面板顶部选择“Network”标签→刷新页面开始记录→查看资源加载顺序和耗时。
二、高级功能配置
1. 设置断点调试：在Sources面板找到脚本文件→点击行号添加断点→使用步进工具逐行执行代码。
2. 修改DOM节点：在Elements面板右键点击元素→选择“Edit as HTML”→实时编辑页面结构并预览效果。
3. 模拟表单输入：在Console输入 `document.querySelector('input').value = 'test'` →验证前端逻辑处理能力。
三、网络请求分析
1. 过滤资源类型：在Network面板右侧输入 `.css` 或 `.js` →仅显示特定类型请求→快速定位关键文件。
2. 查看请求详情：点击具体请求条目→查看Headers/Preview/Cookies等信息→分析接口返回数据。
3. 捕获XHR请求：在Filter栏选择“XHR”→专门显示Ajax请求→调试异步数据传输过程。
四、性能优化检测
1. 生成性能报告：按Ctrl+Shift+P打开命令菜单→输入“Generate CPU profile”→分析函数执行耗时。
2. 检测内存泄漏：在Memory面板多次采样→对比heap快照变化→找出未释放的全局变量。
3. 优化首屏加载：在Audits面板运行Lighthouse测试→根据评分改进图片压缩和代码拆分。