🔍 核心功能解析
DOM结构
样式调试
网络分析
1. DOM树形结构分析
通过F12快捷键[3]()打开审查面板，左侧展示网页完整的DOM树结构，支持：
- 实时高亮显示页面元素
- 右键复制元素代码（支持HTML/CSS）[2]()
- 拖拽调整元素层级关系
2. 样式实时调试
右侧面板显示选中元素的CSS样式规则，支持：
/* 实时编辑样式示例 */
.selector {
color: #1a73e8;
margin: 0 auto;
}
可即时查看修改效果并导出CSS文件[5]()
3. 网络请求监控
Network面板记录所有资源加载信息[7]()：
- 文件加载时间线
- HTTP状态码分析
- API请求响应预览
⚡ 高级应用技巧
设备模拟模式
点击
切换移动端调试：
- 支持主流设备分辨率预设[2]()
- 模拟触摸事件和传感器
- 查看媒体查询断点[5]()
控制台指令
// 获取元素属性
document.querySelector('h1').clientWidth;
// 监控事件
monitorEvents(window, "resize");
⚠️ 注意事项
- 修改仅当前会话有效，需手动保存变更[5]()
- 获取User-Agent需查看Network面板[4]()
- 禁用缓存需开启Disable cache选项