Visual Inspector(前端重构+视觉走查辅助工具)

Tracking since Apr 18, 2026.

Changelog

• Jun 3, 2026
  description

  ## Visual Inspector
  [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对比。
  
  > 如果你在做页面重构，[自动保存]功能可以很方便的在页面刷新后恢复到页面刷新之前的状态(如设计稿的大小，位置，透明度等)。
  
  > 同时，如果不需要移动拉伸设计稿了，建议打开冻结功能，这样设计稿将不再响应鼠标事件，不能拉伸和拖拽，也不会影响页面本身的交互功能。
  
  > 预置了常用命令的快捷键，更加方便的操作和比对
  
  ### 新版(1.3.9+)去掉了测量功能，如果需要请安装测量插件，如：[better ruler](https://chrome.google.com/webstore/detail/better-ruler/ilcnadaaninblgbekoaihdhoiecaflie),支持吸附测量。
  
  ### 快捷键:
  
  - 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 : 窗口宽度
  
  ### Tips: 
  - 如果快捷键不起作用，请检查当前页面焦点是否在其他页面控件内(eg.input, textarea...)？最简单的方法，点击设计稿，或者页面空白处再试一试：）
  - 测量模式下，双击页面可以暂停辅助线跟随鼠标，再双击可恢复跟随。

  ## 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 等表单元素聚焦时会自动屏蔽，无需手动切换焦点。
  - 图片加载失败时会在右上角显示错误提示。
  - 鼠标悬停在透明度滑块上可查看数字键快捷操作说明。

Permissions & access

Permissions

unlimitedStoragestorageactiveTab

Host access

None declared

Screenshots

Similar extensions

Alternatives to Visual Inspector(前端重构+视觉走查辅助工具), ranked by description similarity.

Better Ruler

一款网页测量工具，支持吸附测量。为前端开发和ui设计提供便利。

30.0K

★ 4.8

出海成章CHCZ · Design Checker

Designed for Visual SEO: One-click inspection Broken links, Image Alt text, and Heading hierarchy.

4

ChiSu - Pixel Perfect Ruler（网页像素尺/取色器） & UI Measure Tool(前端像素眼)

featuring a high-precision Color Picker, Pixel Ruler, and Spacing Measurement for pixel-perfect CSS debugging.

10

check-ui

UI走查还原工具，用于辅助前端和UI进行设计稿的比对和开发，拥有图片比对、标尺、吸色等实用功能。

264

★ 5.0

UI元素捕获手|Levi

由Levi.zhang编写的一个浏览器扩展插件，一款为自动化测试与开发设计的元素捕获和属性探查插件。支持快捷键激活，所见即所得高亮，丰富属性一键复制，支持主题切换与 iframe 元素识别，如果觉得好用，请多多支持，鼓励一下吧！

13

放大镜工具

强大的屏幕放大镜，支持吸色器和截图功能。最高支持100倍放大，采用iOS风格玻璃效果。

33

draft_paper

前端草稿纸 - 帮助开发者进行页面布局对比和元素定位的Chrome扩展

9

SpecChecker

UI/UX design specification checker for frontend development

6