何昌全博客当你看到同行网站极具高级感的配色和精美的排版时，想要“借鉴”参考，难道还要按F12在密密麻麻的CSS源码里痛苦地翻找色号和Margin值吗？
这不仅效率极低，而且极度消耗耐心。对于站长、前端开发者和设计师而言，浏览器就是最高效的解剖台。
今天何昌全博客为你精选5款真正硬核的Chrome浏览器扩展插件。只需鼠标轻轻一点，任何网页的视觉参数都将毫无保留地暴露在你面前。
1.ColorZilla：统治级别的全能网页拾色器
ColorZilla是拥有超千万用户的骨灰级装机必备插件。它能极其精准地读取浏览器中任意一个像素点的颜色。
-
官方扩展链接：点击安装 ColorZilla
-
核心优势：
-
精准吸色：点击图标变身滴管，点哪里吸哪里，自动将Hex或RGB色值复制到剪贴板。
-
网页色彩分析器：能够一键扫描并提取当前网页所使用的所有颜色，直接生成一套完整的DOM调色板，极大方便你全盘复制竞品网站的主题色。
-
自带CSS渐变生成器：吸取颜色后可以直接在插件内生成极其复杂的CSS渐变代码。
-
2.CSS Peeper：颜值极高的现代CSS审查工具
如果你厌倦了系统自带开发者工具(F12)的繁琐，这款专门为设计师打造的CSS提取插件绝对会让你惊艳。
-
官方扩展链接：点击安装 CSS Peeper
-
核心优势：
-
可视化数据：开启插件后，鼠标悬停在任何网页元素上，立刻在右侧面板清晰展示该元素的字体、字号、行高、对齐方式以及具体的色值。
-
一键提取全站素材：它是扒站神兵。可以一键将网页上的所有图片、SVG图标甚至背景图打包成ZIP下载，再也不用手动右键另存为了。
-
3.Dimensions：测量元素间距的魔法棒
做前端切图最痛苦的就是量间距。Dimensions是一款专为测量网页元素距离而生的极客插件。
-
官方扩展链接：点击安装 Dimensions
-
核心优势：
-
智能边缘吸附：开启后，你的鼠标变成一个十字线。把它放在图片或文字上，它会自动测量该元素边缘到屏幕边缘、或者到下一个元素的水平和垂直距离(精确到px)。
-
完美复刻排版：当你需要像素级还原一张设计稿或者完美复刻别人网站的排版间距时，它是无可替代的绝对神器。
-
4.Page Ruler Redux：网页上的实体像素直尺
当你在网站后台上传Banner图，却不知道该做多大尺寸时，Page Ruler Redux能给你最直接的答案。
-
官方扩展链接：点击安装 Page Ruler Redux
-
核心优势：
-
框选即测量：在网页上随意拖拽画出一个矩形框，屏幕顶端会立刻显示这个框的精确宽度、高度以及左上右下的绝对坐标位置。
-
辅助线功能：支持像Photoshop一样拉出参考线，非常适合用来检查网站两边的元素是否完全对齐。
-
5.Eye Dropper：极致纯粹的轻量级吸色管
如果你觉得ColorZilla的功能过于繁杂，只想要一个简简单单的吸色工具，那么开源免费的Eye Dropper是你的最佳平替。
-
官方扩展链接：点击安装 Eye Dropper
-
核心优势：
-
极致轻量：没有花哨的功能，只有一个纯粹的放大镜吸色管。
-
自动历史记录：自动记录你最近吸取过的所有色号，方便你在编写CSS时随时调取对比，不占内存，用完即走。
-
构建你的网页解剖工具箱
把这几款插件装进你的Chrome浏览器：
-
用ColorZilla吸取精准色号。
-
用CSS Peeper扒下全站图片素材与字体样式。
-
用Dimensions和Page Ruler Redux精准丈量排版间距。
彻底告别F12的低效翻找，让你的仿站与网页开发效率产生质的飞跃。
