Pixel Perfect 是一个 Firefox 扩展，它允许网页设计师将半透明图像（图层）叠加在网页上。设计师可以微调网页内容，直到它与图层完全匹配。

该扩展最初是在 2008 年为 Firebug 推出的，但多年来一直没有维护。许多现有用户要求我们恢复该功能，并且 Firebug 工作组 有机会使用内置于 Firefox 的远程调试协议从头开始构建它。这使我们能够支持新的功能，如 多进程 Firefox 和 远程调试。该扩展还与 Firebug 3（又名 Firebug.next）集成，但不需要 Firebug。

我们在构建该扩展时，心中有两个目标：

• 使 Pixel Perfect 功能再次可用
• 展示如何在远程调试协议和其他 Firefox API 之上构建现实世界的扩展

这篇文章是关于该功能的，但如果你是一名扩展开发人员，有兴趣学习如何使用最新的 Firefox API 构建开发人员或设计师工具，你可能想了解其 内部架构。

Pixel Perfect 2 入门

最新的 Pixel Perfect 2（PP2）版本可以从 addons.mozilla.org 安装（您需要安装至少 Firefox 36）。安装后，您应该在 Firefox 工具栏中看到一个新项目，左边有一个按钮，右边有一个箭头。

单击按钮将打开 PP2，单击箭头将显示一个菜单，其中包含指向在线资源的链接。

如果您安装了 Firebug 3（目前为 alpha），您也可以从样式编辑器面板打开 PP2。

PP2 UI 包含一个浮动窗口，用于添加和删除图层。这是安装后的样子。

使用“添加图层”按钮添加第一个图层。单击该按钮并从您的硬盘驱动器中选择一个图像文件。

新图层应该在浮动弹出窗口和页面中可见。

您可以更改其属性，例如位置和不透明度。您也可以在页面中拖动图层。

屏幕截图显示了一个页面，其中包含文本“表单编辑器：联系我们”和一个图层，用蓝色虚线边框显示，该图层显示了页面应该是什么样子。现在，您可以使用开发者工具箱将页面调整到完美像素！

Jan 'Honza' Odvarko