前端重构和视觉走查的辅助工具。
## Visual Inspector (v2.1)
[ENGLISH](https://github.com/gp5251/visual_inspector/blob/master/README.en.md)
[插件地址](https://chrome.google.com/webstore/detail/visual-inspector%E5%89%8D%E7%AB%AF%E9%87%8D%E6%9E%84%20%E8%A7%86%E8%A7%89%E8%B5%B0%E6%9F%A5/jgimcbonbekgeahallgcmiibdidjeeim)
> 这款插件可以高效的帮助前端工程师页面重构，高度视觉还原，也方便设计师UI走查。前端工程师在重构阶段就能快速发现页面和视觉稿的差异，减少大量和设计师的沟通成本。
> 可以随意修改设计稿`大小`，`位置`，`透明度`，`混合模式`等，方便各种设计风格的UI对比。
> 如果你在做页面重构，[自动还原]功能可以很方便的在页面刷新后恢复到页面刷新之前的状态(如设计稿的大小，位置，透明度等)。
> 同时，如果不需要移动拉伸设计稿了，建议打开冻结功能，这样设计稿将不再响应鼠标事件，不能拉伸和拖拽，也不会影响页面本身的交互功能。
> 预置了常用命令的快捷键，更加方便的操作和比对。
### 功能特性
- 设计稿叠加对比，支持拖拽和缩放
- 16 种 CSS 混合模式，适配各种设计风格
- 自动还原：刷新页面后恢复设计稿状态
- 冻结模式：锁定设计稿，不影响页面交互
- 工具栏可拖拽，不遮挡页面内容
- 快速匹配：一键适配原图大小、窗口宽度等
- 中英文双语支持
- 快捷键在表单元素聚焦时自动屏蔽，不影响页面输入
### 快捷键
- `H` — 显示/隐藏设计稿
- `F` — 显示/隐藏底部工具栏
- `D` — 冻结/解冻设计稿
- `数字键 0-9` — 设置透明度。1秒内按两位数字设置精确百分比（如按55=55%）；只按一位数字则自动补0（如按5=50%）
- `方向键` — 移动设计稿，每次1px
- `Shift + 方向键` — 移动设计稿，每次10px
- 快速匹配：
- `Alt + 0` — 重置
- `Alt + 1` — 原图大小
- `Alt + 2` — 原图两倍
- `Alt + 3` — 原图一半
- `Alt + 4` — 窗口宽度
### Tips
- 快捷键在 input、textarea 等表单元素聚焦时会自动屏蔽，无需手动切换焦点。
- 图片加载失败时会在右上角显示错误提示。
- 鼠标悬停在透明度滑块上可查看数字键快捷操作说明。