视觉化查看网页样式及标注 - Visual Inspector

网页设计师通常会使用 Chrome 或 firefox 这两款浏览器，为什么？不仅仅是因为好用，而是为了使用按 F12 出现的「查看网页元素」这个 Web 开发者工具，然而这个工具真的没代替品吗？有的，Visual Inspector 这个视觉查看器就相当好用，建议设计师们去试试。

Visual Inspector 是 Chrome 的一个扩展，它可以方便的查看页面的字体、颜色、盒子模型、及元素间的间距标注等等，全是视觉化展示，这比代码展示形式的 F12 工具更易观看，是网页设计师必备辅助工具之一。

扩展名称：Visual Inspector

扩展主页：https://www.canvasflip.com/visual-inspector/

安装扩展（科学上网）：https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en

查看 / 修改样式、标注（好用啊）

点击「INSPECT」按钮（第 2 个）可以实时查看选中元素的盒子模型、样式以及与其它元素的标注，尤其是查看邻元素的间距标注功能，这个相当好用。

PS: 除了查看还可以实时修改的哦~

颜色

点击第 3 个图标（水滴 icon）可以查看当前网站样式的所有颜色。

用了这个功能才知道设计达人的网站颜色还是有点多，有时间真的要修理修理啊……

图像查看与导出

这个就实用了，如果一些网站禁止右键复制图像，那么这功能就可以很方便的将其导出来。我们只需要点击第 4 个相机按钮，就可以想看当前页面的所有图片，并可以单独导出来哦！

虽然我有 100 种方法我可以扣出网页的图片，但这个工具实在太方便了。

值得使用的理由

视觉化形式来查看元素的结构样式，同时也可以修改

查看元素间的间距功能（超实用）

图像导出功能，不仅是为了导出图片，有时还想导出某个图标……

有了这个，是不是可以不用 F12 了？非也，F12 还有很多强大的功能，只是作为设计师很少用到。所以结合 Visual Inspector 二者相互使用会更好。