Firebug 與 DevTools 的整合

2020-06-16 17:50:03

你可能已經聽說過我們對統一 Firefox 的本地開發人員工具（DevTools）和 Firebug 的努力。我們一直在努力地將的所有最喜歡的 Firebug 功能新增到本地 DevTools 中，使他們多進程相容，並且可用於遠端偵錯（即e10s相容）。我們一直也在努力實現簡單和順利從 Firebug 過渡到 DevTools。是的，正如我們前面所提到的，我們專注於為開發者提供一個偉大的開發工具！

那麼，讓我們來看看現在得狀況。

新一代的 Firebug 的主要目標是幫助使用者與本地 DevTools 一起工作時，有一種親切的感覺。這是 Firebug3（又名Firebug.next）誕生的原因。Firebug3 不是另一個新的 DevTools，這是相當於建立在DevTools 之上的一個工具，它提供了一個新的主題，使 DevTools 看起來像 Firebug3。同時還增加了一些附加的功能，更多的功能將一步一步新增到 DevTools 上。

如果你希望得到一些過去 Firebug 的功能，你應該期待他們在未來成為 DevTools 的一部分。

Firebug 3

看看下面的截圖的 DevTools 和你安裝的 Firebug3(first beta)。這看起來是不是相同.

Firebug 3（又名Firebug.ne??xt），不通過AMO分配，所以你可能需要設定 xpinstall.signatures.required 偏好設定（通過about：config中）設定為false。

這是 Firebug 的主題移植到 DevTools 帶來的一些使用者介面和佈局的優勢。還有顯而易見的 Firebug 啟動按鈕在 Firefox 的工具列中，它代表開發者工具箱的入口。

看，Firebug 主題的選項出現在當前活動頁中。

進入你的得心應手的工具，過程是一樣的：你可以按下啟動按鈕或F12鍵。

你可能會經常需要使用 DOM 面板檢查你的頁面的文件物件模型。原生目前還不支援，但是Firebug提供給你。

也支援在控制台面板（很多次請求）XHR預覽。

一些最流行的擴充套件已在 DevTools 頂部重新實現。這不僅使一些流行的功能保持這，同時這些實現還提供了您如何可直接為 DevTools 做出新的擴充套件很好的例子。Firebug 不需要執行這些擴充套件。

如果你是一個擴充套件開發人員，你可能會感興趣的一些例子，並連結到其他資源，幫助了解如何擴充套件DevTools。

讓我們來看看我們可以用什麼擴充套件。

FireQuery 擴充套件

FireQuery 是為 jQuery 開發的一個建立在 Firefox 瀏覽器上 DevTools 頂部的 Firefox 外掛。Firebug 3沒有包含進去，但從下面截圖可以看出 Firebug 主題是支援這個的。

元素所和 jQuery 相關的資料顯示在控制台面板中的小信封圖示裡。您可以通過點選圖示來檢視它。還有一個jQuerify在控制台面板工具列按鈕，你可以點選它，將 jQuery 裝載到當前頁面。

Inspector 面板也將顯示元素的 jQuery 資料的信封圖示。點選圖示能開啟詳細的資訊。

見FireQuery主頁。
下載附加的AMO。
嘗試一下這個線上測試頁。

PixelPerfect 擴充套件

PixePerfect 是一個 Firefox 擴充套件，它允許Web開發人員和設計人員能夠輕鬆地在頁面上覆蓋半透明層（影象）。這些層可用於每個頁面和每個層之間的比較。

有一個 PixelPerfect 的開始按鈕，允許快速使用該功能。

這是最終的 Pixel Perfect 的使用者介面，您可以通過點選上面的按鈕開啟。

見PixelPerfet的主頁。
下載來自AMO。

HAR 匯出

支援從網路面板匯出HAR(HTTP Archive format)資料，現在是一個內建的功能，並且您無需為它安裝擴充套件。所有你需要做的是選擇網路面板（如果需要的話就重新載入頁面），並使用兩個上下文選單操作：

複製所有作為HAR：將收集的資料複製到剪貼簿。
儲存所有作為HAR：將收集的資料匯出到一個檔案中。

從網路面板匯出的資料往往是自動的（例如：使用 Selenium 測試Web應用程式時）。如果您想為每一個載入頁面自動建立一個HAR檔案，你需要設定以下偏好設定（使用about：config中）設定為true：

devtools.netmonitor.har.enableAutoExportToFile

有些自動化系統需要得到的不僅僅是為每個頁面建立的載入後的HAR檔案，而需要的是有更大的靈活性。有時你需要將資料傳送到遠端伺服器，收集和匯出HAR兩個特定的使用者操作等，這就是為什麼我們推出了一個簡單的HARExportTrigger擴充套件，通過提供 HAR API 到網頁內容提高自動化程度。這使您隨時可以使用小指令碼觸發HAR。

下面是從網路面板得到 HAR 資料的範例指令碼：


var options = {
  token: "test",
  getData: true,
};

HAR.triggerExport(options).then(result => {
  console.log(result.data);
});

見HAR匯出觸發主頁
下載外掛從AMO

利用在伺服器上的 console.* API

Firebug 的社群已經實施了許多擴充套件，允許開發者使用 console.*在（HTTP）伺服器端API，然後你就能看到在瀏覽器顯示後台紀錄檔。此功能現在在 Firefox 中原生支援且你不需要安裝額外的擴充套件。

所有您需要做的是在控制台面板啟用伺服器內部紀錄檔。

此功能支援現有協定（使用 Chrome Logger），傳送紀錄檔的方式是通過HTTP頭到用戶端。就好像通過頁面 javascript 在控制台面板輸出紀錄檔一樣。有許多伺服器端庫，提供相應的伺服器端 API 在各種語言中（NodeJS，Ruby，Python，PHP，.NET，Java等）

下面是伺服器端紀錄檔記錄的一個例子：


var chromelogger = require('chromelogger');
var http = require('http');
var server = http.createServer();

server.on('request', chromelogger.middleware);
server.on('request', function(req, res) {
  res.chrome.log('Hello from Node.js %s', process.version);
  res.end();
});

server.listen(7357);

這裡是伺服器端紀錄檔看起來像在控制台面板：

最後的話

正如我在文章開頭提到的，我們正在努力統一本地火狐開發人員工具（DevTools）和 Firebug，因為我們認為這是一種很棒的想法，為Web開發人員提供強大的工具。這裡還有很多沒有提到，但是應該會給你一個對新 Firebug 的大致印象。

請張貼反饋到 Firebug Group，謝謝。