文章背景：
前端小伙伴照着UI图写完的页面，还原度有多少呢？没有一个标准，给大家推荐介绍一款chrome插件，以及使用方法，帮助前端小伙伴自测插件，帮助提升还原度
工具：
Visual Inspector
安装使用的方法：
- 自行科学上网去谷歌商城（chrome.google.com/webstore/ca… 去搜索框里搜索 Visual Inspector，选择红框内的插件
2.点击安装此插件，安装完之后，插件栏里面会有这样的一个图标，证明已安装成功
3.使用方法：
3.1 点击插件进行插入设计图，上传从蓝湖（其它的平台也可以）下载的图（使用png的就行）
3.2 上传完设计图，就会出现下面的这个示例，上传图的时候，注意调整一下窗口的尺寸，因为设计图是1366的，所以，需要将窗口的大小调整成1366的，调整透明度，即可对比与设计图的差异（重点）.
3.3 Visual Inspector常用功能和快捷键的应用
- h 键: 显示和隐藏图片
- f 键: 显示和隐藏底部工具栏
- d 键: 冻结和解冻图片
- 数字键（0-9）：`设置图片透明度`。如：1秒内快速按下两次5，将设置图片55%的透明度。如果1秒内只按下了一次数字键，如5，一秒后将自动补0，即设置图片透明度为50%。
- 方向键：移动图片，一次移动1px。如果同时按下Shift键，将一次移动10px。
- 快速匹配
- alt + 0 : 重置
- alt + 1 : 原图大小
- alt + 2 : 原图两倍
- alt + 3 : 原图一半
- alt + 4 : 窗口宽度
冻结的使用：点击完冻结，就可以将设计图固定在网页的上面，可以点击后面的网页操作
正片叠底：这个功能相对用的也比较多，可以将设计图的背景去掉，可以清晰的对比页面中功能的差异
