1. 打开开发者工具
- 按`Ctrl+Shift+I`或`F12`快捷键，或右键点击页面选择“检查”，可打开开发者工具。
- 工具界面分为多个面板，包括Elements（元素）、Console（控制台）、Sources（源代码）、Network（网络）等。
2. 元素检查与修改
- 在Elements面板中，直接点击网页元素查看其HTML标签和CSS样式。
- 双击样式规则可实时编辑属性值（如颜色、字体），立即观察页面效果。
- 右键点击元素选择“Edit as HTML”，可直接修改标签结构并预览结果。
3. 网络请求分析
- Network面板记录所有网络请求，包括加载时间、文件大小、状态码等信息。
- 点击具体请求可查看Headers（请求头）、Response（响应数据）、Cookies等细节，用于排查资源加载问题。
- 使用“Throtttle”功能模拟不同网络速度（如3G、DSL），测试页面性能表现。
4. JavaScript调试
- 在Sources面板中，可设置断点、逐行执行代码，观察变量变化和函数调用流程。
- Console面板支持输入命令（如`document.querySelector`）快速获取页面元素或执行脚本。
- 通过“Event Listeners”断点功能，直接在事件触发时暂停代码执行（如点击按钮时）。
5. 移动端模拟
- 点击右上角手机图标，进入移动设备模式，支持选择不同机型（如iPhone、Pixel）和屏幕尺寸。
- 在Device Mode中调试触屏操作、viewport适配问题，并记录移动端专属错误日志。
6. 性能优化工具
- 在Performance面板录制页面加载过程，生成火焰图分析脚本执行耗时、重绘次数等关键指标。
- 使用Audits面板自动检测网页SEO、PWA兼容性、无障碍访问等问题，并提供优化建议。
7. 存储与缓存管理
- Application面板显示本地存储、Cookie、IndexedDB等数据，支持手动编辑或清除。
- 通过“Clear storage”按钮重置所有网站数据，用于测试登录态或缓存逻辑。
