Firebug與DevTools整合

jopen 9年前發布 | 8K 次閱讀 Firebug


為了進一步提供更將強大的功能,Mazilla的工程師近期一直在努力進行原生Firefox開發者工具( DevTools )和 Firebug 的整合工作。Firebug團隊的領袖Jan Honza Odvarko近日 披露 了該項目的進展情況。

作為網頁瀏覽器 Mozilla Firefox下的一款開發類插件,Firebug集中了HTML查看和編輯、Javascript控制臺、網絡狀況監視器等多種功能,是開發 JavaScript、CSS、HTML和Ajax的有效工具。然而,Firebug之前一直不能和原生Firefox開發者工具(DevTools)結 合起來。最近一段時間,Mazilla的工程師開始了把原生Firefox開發者工具(DevTools)和Firebug的整合工作。該項目努力把所有 的Firebug特性移植到DevTools中,使得其兼容多進程,并支持遠程調試。而且,項目努力保證從Firebug到DevTools的轉變過程盡 可能平緩和簡單,不影響用戶體驗。接下來,本文就從 Firebug 3 以及新的插件入手介紹該項目進展。

Firebug 3

最新版的Firebug 3已經不是一個單獨的工具,而是DevTools之上的一個外殼。它為DevTools提供了與之前版本Firebug相同的主題。用戶可通過點擊 Firebug Theme 選項打開主題。Firebug 3為DevTools帶來了UI和布局上的好處,并提供了經典的Firebug開始按鈕。用戶通過開始按鈕或者 F12 快捷鍵即可訪問開發者工具箱。

而且,新版的Firebug繼續提供DOM面板和Console面板,分別供用戶審查頁面的文檔對象模型和預覽XHR。

此外,整合后的工具還在DevTools之上重新實現了很多流行的擴展。這些擴展不僅保證了很多流行特性的使能,還為用戶提供了創建新擴展的案例。

FireQuery擴展

FireQuery 是Firefox中、基于DevTools的jQuery開發插件。此插件并不需要Firebug 3,但是可以在Fierbug主題中使用。在其Console面板中,和 jQuery數據 相關聯的元素會顯示一個小信封。開發者點擊這些圖標就可以審查相應數據。而且,用戶還可以利用Console面板中的jQuerify按鈕來加載jQuery到當前頁面。此外,點擊Inspector面板中的信封圖標這可以顯示相關細節。

目前,用戶已經可以通過 AMO 下載該擴展,并通過在線的測試頁面進行嘗試。

PixelPerfect擴展

PixelPerfect 是一個允許網頁開發人員和設計人員把很多半透明層覆蓋在一個網頁組件的Firefox擴展。這些層可以被用作頁面和層之間的逐像素比較。用戶可以通過Firefox中的Pixel Perfect開始按鈕直接打開其UI界面,配置相關參數。目前,用戶已經可以通過 AMO 下載該擴展。

導出HAR

支持從Network面板中導出 HAR 已經成為瀏覽器內置的特性。用戶只需要選擇Network面板,并依次執行Copy All As HAR和Save All As HAR即可。該過程一般可以自動化進行。而如果用戶需要為每一個加載的頁面創建一個HAR文件,只需要設置下列選項即可:

DevToolss.netmonitor.har.enableAutoExportToFile

為了提供更多的靈活性,Mozilla推出了 HARExportTrigger 擴展。該擴展支持利用腳本來完成HAR的導出工作。以下就是從Network面板中獲取HAR數據的示例腳本。

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

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

目前,用戶已經可以通過 AMO 下載該擴展。

在服務器上使用`console.*``API

Firebug社區開發了很多擴展來支持在服務器端使用 console.* API。這樣,用戶就可以在瀏覽器中查看后端的日志文件。目前,Firefox已經內置了該特性,無需安裝其他任何擴展。用戶只需要在Console面板中時能服務器列表中的Log選項即可。

該特性支持通過HTTP頭發送日志到客戶端的協議。如果這些日志是通過頁面中的JavaScript產生,它們就可以顯示在Console面板 中。而且,有很多服務器端的庫可以提供各種語言版本(NodeJS、Puby、Python、PHP、.NET和Java等)的服務器端API。

以下為服務器端記錄日志的 例子

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);

在Console面板中所看到的對應服務器端日志文件如下所示:

Firebug與DevTools整合

最后, Jan表示 ,Firebug和DevTools的合并工作已經取得一定的進展,但還有很多工作在進行。如果有用戶任何意見和建議,可以直接聯系 Firebug組 。該消息一經發布便引來網友 熱烈討論 。有網友提出目前的工具還不支持Cookie編輯、瀏覽websocket幀等,希望下一步能夠有所改善。而另有網友則堅持認為Firebug 2已經能夠很好的處理調試相關的問題,對新工具表示一定的懷疑。此外,網友還對Chrome和Firefox的開發體驗進行了比較,提出firefox支 持更加快速、輕量的開發。

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!