u3d中inspector_在浏览器中细化：使用Visual Inspector获得完美像素

u3d中inspector

作为“像素完美”是一些东西，变得不那么重要的网页设计师，一旦大家都接受，网站可以看看在不同的屏幕和设备的不同。 但这并不意味着对细节的关注就不那么理想了。 在本教程中，我将向您介绍一个工具（Chrome扩展程序），该工具可以帮助您实现网页设计中的像素完美。

视觉检查器简介

使用Visual Inspector

首先，请访问www.canvasflip.com/visual-inspector下载Chrome扩展程序。 安装后，系统会要求您注册一个帐户（免费，但升级费用为每位用户每月$ 5）。 您已经开始跑步了！

检查器允许您选择页面上的任何元素并检查其属性。 例如，当我们在Tuts +主页上选择徽标时，检查员将显示以下内容：

我们可以看到使用的标记以及分配给元素的各种类。 我们还可以看到填充，边框和其他样式。 在这种情况下，我们可以看到图像源，向下滚动可以看到更多。

出口

在此阶段，我们可以导出可见的任何资产。 图像文件虽然不是SVG格式，但可以随时获取。 甚至文本和其他样式也可以导出为JPG或PNG，并带到您选择的设计应用程序中，这非常有用。

测量

在浏览器中移动鼠标并单击各种元素，将显示已指定和隐含的度量和对齐方式，从而帮助您牢固地了解所有事物与其他事物之间的关系，并帮助您实现像素完美。

更改和保存属性

与浏览器的许多其他检查工具一样，您可以更改喜欢的任何元素的属性和样式。 但是，正如您可能要检查的那样，对于Visual Inspector，所有样式都可以通过视觉工具（滑块，颜色选择器等）进行更改。

更改后，您可以单击CSS Output按钮以显示您创建的新样式。

或者，您可以在“ 信息”选项卡上单击“ 同步更改 ”，然后您所做的编辑将保存到您的帐户中。 这使您可以在将来重新审视那些更改，而这些更改是普通浏览器检查员默认情况下不允许的。

结论

对于那些喜欢在浏览器中进行优化的人来说，Visual Inspector是一个很好的工具。 检查已经存在的内容，进行所需的任何更改，然后导出这些更改或将其保存以供以后使用。 而且，如果您升级，也可以与团队成员进行协作。 去检查一下，然后在评论中告诉我们您的想法！

翻译自: https://webdesign.tutsplus.com/tutorials/pixel-perfection-with-visual-inspector--cms-30822

u3d中inspector