chrome浏览器F12测试使用

1.模拟网速的快慢
打开需要测试的网站,点击F12,再点击选项里的network-no throttling,展示的有几种,offline,快3g,慢3g,或者自定义
chrome浏览器F12测试使用_第1张图片
点击add可以自定义网速,具体给多少值一般按照产品需求自定义
chrome浏览器F12测试使用_第2张图片
注意:测完需要恢复为no throttling
2.获取接口的参数
F12打开开发者工具,点击network,点击只筛选Fetch/XHR(如果没有需要升级版本),这样可以直接过滤一些不需要参考的数据
点击下方的链接,再preview可以查看接口返回的信息

3.UI元素的使用
点击左上角的图标,再点击页面,可以快速定位到元素行,这个时候可以修改元素,也可以复制元素的xpath,CSS,Ctrl+F可以调出调试框,辅助调试元素定位
chrome浏览器F12测试使用_第3张图片
4.查看接口响应的时间
点击接口后,点击图下的timing,主要是关注waitin for server response和总值的时间,具体多少时间合理需要根据需求确定。
chrome浏览器F12测试使用_第4张图片

你可能感兴趣的:(chrome,前端)