1. 打开开发者工具的方法
- 快捷键：按`Ctrl+Shift+I`（Windows）或`Cmd+Option+I`（Mac）。
- 菜单路径：点击右上角三个点→“更多工具”→“开发者工具”。
- 右键网页→“检查”可快速打开并定位到当前元素。
2. Elements面板核心功能
- 实时查看和修改HTML结构：选中页面元素后，可直接在右侧编辑其标签、属性或内容。
- 样式调试：通过“Styles”子面板调整CSS属性（如颜色、边距），支持即时预览效果。
- 移动端模拟：点击“Toggle device toolbar”（切换设备模式），选择手机型号并调整屏幕尺寸。
3. Console面板日志与命令执行
- 查看错误信息：红色字体显示JavaScript报错，点击错误行可跳转源代码位置。
- 手动输入命令：支持直接执行`console.log()`、`document.querySelector()`等JS代码。
- 清除日志：右键点击面板→“Clear console”或按`Ctrl+K`（Windows）。
4. Network面板网络请求分析
- 记录所有网络请求：包括加载时间、状态码（如404）、文件大小及类型（JS/CSS/图片）。
- 禁用缓存：勾选“Disable cache”强制刷新资源，用于测试最新修改效果。
- 筛选请求类型：通过过滤器（如XHR、Doc、CSS）快速定位接口调用或静态资源。
5. Sources面板与代码调试
- 设置断点：在JavaScript文件左侧点击行号，播放按钮启动后会暂停在断点处。
- 步进调试：使用“Step over”（逐行执行不进入函数）、“Step into”（进入函数内部）按钮。
- 修改代码：直接在源文件区域编辑，保存后自动应用至当前页面（仅限本地文件）。
6. Performance面板性能优化
- 录制页面加载过程：点击“Record”后操作页面，停止录制生成性能报告。
- 分析关键指标：查看“First Contentful Paint”（首次内容渲染）和“Time to Interactive”（可交互时间）。
- 捕获屏幕录像：勾选“Capture screenshots”可生成加载过程的可视化时间轴。
7. Application面板数据存储管理
- 查看Cookies：展开“Cookies”列表，双击条目可直接修改键值对。
- LocalStorage/SessionStorage操作：支持删除单条或全部数据，右侧显示存储容量。
- Service Worker调试：在“Service Workers”标签页查看注册状态并触发推送事件。
8. Audits面板自动化检测
- 运行审计：点击“Run audits”分析页面SEO、PWA兼容性、无障碍访问等指标。
- 优化建议：根据评分结果（如“提高首页加载速度”）获取具体改进方案。