对于web测试同学，Chrome DevTools几乎是必不可少的工具，从网络请求到性能分析，Chrome DevTools 基本涵盖了 Web 开发的方方面面，功能十分强大。关于它的功能介绍，网上相关的文章资料已经很多了。在这里我也不想重复，只是挑选几个测试能用上的几个面板进行阐述。
目录
一、设备模式
二、控制台面板
三、网路面板
四、性能面板
五、内存面板
六、应用面板
一、设备模式
各位测试同学都遇到过测试手机H5页面的经历，但是在手机上操作不但日志查看不方便，还有很多调试接口无法查看，特别难受；于是有了Chrome DevTools 中的 Device Mode 模拟移动设备；用我们公司的软件来给大家讲解以下一些功能（device mode只是外观近似，使用时，实际不是在移动设备上运行代码，而是在笔记本电脑或者桌面设备上模拟移动用户体验，移动设备的某些方面视devtools永远无法模拟的。）：
1、模拟移动设备视口
2、限制网路流量
3、限制cpu占用率
4、模拟地理定位
5、设置屏幕方向
备注：以下操作都是在mac上进行的
1、模拟移动设备视口
移动设备视口.png
-
默认情况下，设备工具栏在打开时处于自适应适口模式，拖动可调整大小，如图：视口调整.png
视口调整.png
-
还可以选择手机型号，devtool已经把这些尺寸收入，如图：移动设备.png
移动设备.png
-
可以调整视口为横向，如图：屏幕调整.png
屏幕调整.png
-
选择show rulers可以看到视口上方和左侧的标尺。如图：标尺.png
标尺.png
2、限制网络流量
- 还可以限制网路流量和cpu占有率，Mid-tier mobile 可模拟快速 3G 网络，并限制 CPU 占用率，以使模拟性能比普通性能低 4 倍，Low-end mobile 可模拟慢速 3G 网络，并限制 CPU 占用率，以使模拟性能比普通性能低 6 倍；
（请记住，限制是相对于笔记本电脑或桌面设备的普通性能而言。）
image.png
-
只限制网络占有率，network面板，fast 3g，slow 3g
image.png
3、限制cpu占有率
-
只限制cup占有率，performance面板，capture settings，4x slowdown 或 6x slowdown；
image.png
4、模拟地理位置
-
显示传感器
image.png
- 很多测试场景都需要定位位置，这时，传感器功能就可以很好的解决我们测试定位的问题；
-
设置一个geolocation，如图
image.png
-
添加一个定位，如图
image.png
image.png
-
运用，从此以后定位想怎么玩就怎么玩，如图
image.png
5、设置屏幕方向
image.png
（ps：自己尝试吧，多做90度旋转，就知道具体玩法了！）
网友评论