Visual Inspector(前端重构+视觉走查辅助工具)
1,000+ users
Developer: paul
Version: 2.1.0
Updated: 2026-06-01
Available in the
Chrome Web Store
Chrome Web Store
Install & Try Now!
— — 等表单元素聚焦时会自动屏蔽,无需手动切换焦点。 `alt visual - 重置 - 工具栏可拖拽,不遮挡页面内容 快速匹配:一键适配原图大小、窗口宽度等 - — - 鼠标悬停在透明度滑块上可查看数字键快捷操作说明。 快捷键 快速匹配: [english](https://github.com/gp5251/visual_inspector/blob/master/readme.en.md) `h` - — — `alt 原图两倍 `shift `d` ### input、textarea 移动设计稿,每次10px ### + 自动还原:刷新页面后恢复设计稿状态 inspector - — - css - > `alt + 可以随意修改设计稿`大小`,`位置`,`透明度`,`混合模式`等,方便各种设计风格的ui对比。 功能特性 [插件地址](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) 设置透明度。1秒内按两位数字设置精确百分比(如按55=55%);只按一位数字则自动补0(如按5=50%) 1` - 如果你在做页面重构,[自动还原]功能可以很方便的在页面刷新后恢复到页面刷新之前的状态(如设计稿的大小,位置,透明度等)。 — 设计稿叠加对比,支持拖拽和缩放 2` - 窗口宽度 > `f` 3` - 这款插件可以高效的帮助前端工程师页面重构,高度视觉还原,也方便设计师ui走查。前端工程师在重构阶段就能快速发现页面和视觉稿的差异,减少大量和设计师的沟通成本。 - + - 4` - - 预置了常用命令的快捷键,更加方便的操作和比对。 方向键` 0` - + 原图大小 显示/隐藏设计稿 - tips + - - 0-9` 同时,如果不需要移动拉伸设计稿了,建议打开冻结功能,这样设计稿将不再响应鼠标事件,不能拉伸和拖拽,也不会影响页面本身的交互功能。 - - — 显示/隐藏底部工具栏 原图一半 `数字键 — `alt 冻结模式:锁定设计稿,不影响页面交互 16 - > 快捷键在 混合模式,适配各种设计风格 种 ### (v2.1) ## > — > 冻结/解冻设计稿 `alt 图片加载失败时会在右上角显示错误提示。 移动设计稿,每次1px - — + 快捷键在表单元素聚焦时自动屏蔽,不影响页面输入 `方向键` 中英文双语支持



