Emmet Re:view插件,多视图形式查看不同分辨率和设备下的网页展示效果
Emmet Re:view,是一个可以辅助测试和前端的浏览器插件,可以用于查看网页在不同分辨率和设备下的显示效果。
Emmet Re:view,是一个可以辅助测试和前端的浏览器插件,可以用于查看网页在不同分辨率和设备下的显示效果。
对于网站测试人员来说,经常要做到的工作之一就是监测不同设备和不同分辨率下网站是否能够正常显示。
如果带入正式的环境的中查看网站效果的话,就需要非常多的适配机型,这个实行起来可能会有些麻烦。
这时候Emmet Re:view插件就派上用场了,作为一个测试型chrome插件,Emmet Re:View可以以多种视图的形式并排显示你需要测试的网站,让你能够在同一页面中查看当前网页在不同屏幕分辨率下的表现。
插件使用
首先,通过当前页面下载Emmet Re:view离线安装包,打开扩展程序内的开发者模式,将解压后的crx文件拖拽至扩展程序管理,选择添加扩展,即可安装成功。
插件安装完毕后,在浏览器右上方的插件栏即会显示Emmet Re:view图标。
打开你需要测试的网站,并单击Emmet Re:view图标,当前网站会自动进入测试视图,分别为:Breakpoints View和Device Wall。
Breakpoints View:断点视图
Breakpoints View是从当前页面提取所有CSS断点,并显示每个断点的视图。
Breakpoints View中视区的最大宽度为600,比这个值更宽的视图的内容将被缩小。大视区的内容会按比例缩放以适合你屏幕的尺寸。
在此模式下,你可以使用右边缘手柄水平调整视图的大小,双击此句柄则恢复原始大小。
Device Wall:设备墙
Device Wall同一显示了你的网页在不同设备上的外观。每个视图的大小都会根据实际设备规格和页面来呈现。
有多设备可供选择,并且支持自己添加设备信息。
在此视图中,按住Shift键可进入控制模式,在“控制模式”下屏幕边缘将显示为绿色,并且支持使用鼠标滚轮放大和缩小,可以拖动视图以平移。
Emmet Re:view插件控制了所有视图都是同步的,你可以在一个视图中进行滚动、单击或填写表单等操作,在其他视图中也会同步显示该操作结果。
Emmet Re:view插件,多视图形式查看不同分辨率和设备下的网页展示效果 - Extfans”