[vscode插件]这是一个HTML边界检测生成工具
很多情况下,HTML原型(小程序)都是最完美的状态,对于文字过多或者为空,图片尺寸大小等可能并没有做相关的设定,可能导致在实际上线后出现各种边界问题(比如文本溢出、高度塌陷、图片过大等等)
该插会件生成-test目录,里面包含三个文件夹,分别是empty
、overflow
、random
,如下
./test -> test生成目录
|--empty -> 文本内容为空、图片为空的情况
|--overflow -> 文本内容很多、图片资源随机的情况
|--random -> 文本图片资源随机的情况
提示:目前支持HTML原型(.html)、小程序(.wxml/.qml)、vue项目(.vue)
安装完以后左下角会出现ui-check
的按钮
点击该按钮,编辑器顶部会出现输入框,输入所需要检测目录,默认为./dist/
提示:相对路径,比如
./
表示当前目录,../
表示上一层目录等等
回车Enter
,会自动生成与检测目录并列的目录,文件夹名称为/检测目录-test
,比如检测文件夹为/src
,生成的则是/src-test
,同时右下角提示“目录生成完成”
点击打开,则会跳转到文件管理器
如果输入目录不存在,则会提示错误
原始页面 | 文本内容为空、图片为空的情况 | 文本内容很多、图片资源随机的情况 |
---|---|---|
各种极限情况一目了然
Enjoy!