Pixel Perfect 2:Firefox 開發者工具擴充套件

Pixel Perfect 本身為 Firefox 擴充套件,可讓 Web 開發者以半透明的圖像 (圖層) 覆蓋於網頁之上,接著可微調網頁內容直到確實符合該圖層為止。

logo_64x64

此擴充套件本於 2008 年時透過 Firebug 釋出,但已有數年未妥善維護。許多愛用者要求 Mozilla 能精進其功能,而 Firebug Working Group 則把握機會,以 Firefox 所內建的「Remote Debugging Protocol」,再次從頭打造此擴充套件。這也讓我們能支援如多程序 (Multiprocess) Firefox遠端除錯等的新功能,同時亦整合了 Firebug 3 (也就是 Firebug.next),但 Firebug 並非必備環境。

我們為了兩個目標而打造此擴充套件:

  • 再次提供 Pixel Perfect 功能與特色
  • 要以 Remote Debugging Protocol 與其他 Firefox API 為基礎,建構實際的擴充套件

本文將概述其相關功能。如果你就是擴充套件的開發者,想進一步使用最新的 Firefox API 寫出開發者或設計者工具,則可參閱其內部架構

Pixel Perfect 2 入門

你必須先安裝 Firefox 36 或更高版本,才能從 addons.mozilla.org 安裝最新版本的 Pixel Perfect 2 (PP2)。安裝完畢後,就能在 Firefox 主工具列上看到新的選項,其左邊為按鈕;右邊為箭頭。

點擊按鈕即可開啟 PP2;點擊箭頭則會顯示選單以連接線上資源。

start-button

如果你也安裝了 Firebug 3 (目前為封閉測試版),就能從「樣式編輯器 (Style Editor)」面板上開啟 PP2。

firebug-integration

PP2 的使用者介面 (UI) 包含一組浮動視窗,可用以新增\移除圖層。即如上圖所示。

empty-panel

若要新增第一圖層,則點擊「Add Layer」按鈕即可從硬碟選擇圖檔。

接著就能從浮動的彈出型視窗中看到此圖層,當然亦可在網頁中看到。

layer-form-panel

接著可變更其屬性,如位置與「透明度 (Opacity)」。亦可於頁面中直接拖曳圖層。

layer-form-page

此截圖所顯示的頁面,包含「Form Editor: Contact Us」文字以及一組圖層 (即以藍色虛線框住),呈現目前頁面的顯示方式。現在即可透過開發者工具箱調整頁面,以達到最佳的呈現效果。

 

─ By Jan ‘Honza’ Odvarko

 

 

原文連結:Pixel Perfect 2: extension for Firefox Developer Tools

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *