F12 浏览器开发者工具

1. 打开方式

• 在浏览器页面按下 F12 键可以打开大多数现代浏览器中的开发者工具（DevTools）

• 浏览器页面右键点击 检查 或 检查元素 等

• 点击浏览器设置-更多工具-开发者工具

2. 抓取慢请求

• 2.1 点击 network(网络)，勾选 Preserve log(保留日志) 和 Disable cache(禁用缓存)

• 2.2 进入到复现慢的问题的页面，点击 clear network log 按钮，清空网络日志

复现问题抓取前，可以先清理历史日志，避免历史记录干扰抓取结果

• 2.3 浏览器上复现慢的问题

注意：必须要在复现问题的页面上打开F12，才能抓到对应的网络请求

如果是某个页面加载慢，可以先进入这个页面，打开F12之后，再通过刷新的方式复现问题

如果是某个功能按钮慢，则进入页面打开F12之后，再点击复现问题

• 2.4 页面加载完成后，根据请求耗时，找到一个或几个慢请求.

提示： 可以按时间倒序排列，选择All类型

然后点击慢的请求，可以查看请求的详细信息，记录下url

3. 查看前端报错

• 3.1 进入报错页面，切换至 console(控制台) 面板

• 3.2 点击 clear console 按钮，清空网络日志

• 3.3 复现报错问题

通过刷新页面或者点击功能按钮复现报错，控制台将记录报错信息

• 3.4 将报错信息保存截图，例如：

编撰人：wangyxyf

快速跳转

• F12 浏览器开发者工具
  • 1. 打开方式
  • 2. 抓取慢请求
  • 3. 查看前端报错