浏览器开发者工具
浏览器开发者工具
简介
浏览器开发者工具（Browser Developer Tools）是现代 Web 开发中非常重要的工具，提供了许多强大的功能，用于调试、分析和优化 Web 应用程序。每个主流浏览器都提供了自己的开发者工具
开发者工具打开方式
- 工具目录 --> 开发者工具
- 右击页面任何位置 --> 审查元素
- F12
Elements 面板
- 定位元素
- 查看元素源码
- 查看元素样式
- 页面跳转到元素面板指定的元素：Scroll into view
Network 面板
- 记录网络活动
- 清除缓存
- 模拟网络
- 查看网络数据
- 筛选资源
记录网络活动
- 停止记录网络请求
- 清除记录
- 保存跨页面加载的请求
清除缓存
- 禁用浏览器缓存
- 手动清除浏览器缓存
- 清空缓存并硬性重新加载
模拟网络
- 离线模拟
- 慢速网络模拟
查看网络数据
- Name：资源名称以及 URL 路径
- status：Http 状态码/文字解释
- Type：请求资源的类型
- Initiator：解释请求是怎么发起的
- Size：服务器提供的响应头加上响应主体的总大小
- Time：从请求开始到响应中最后一个字节接收的总持续时间
- Waterfall：每个请求活动的可视细分
筛选资源
- 显示过滤器
- 按资源类型筛选
总结
- Elements 面板
- Network 面板