重構後的Firefox網路監視工具，裡邊加了什麼黑科技？

Firefox開發工具的早期版本已經在Firefox中提供了網路監視器工具，任何關心頁面載入效能和網頁執行速度的使用者都非常喜歡這個工具。不過該工具最近被進行了廣泛的重構（專案代號為Netmonitor.html），這篇文章旨在向大家解釋如何設計新架構以及你如何使用重構之後的新技術。

以下就是Firefox Developer Toolbox中執行的網路監視器使用者介面。

目標

重構的主要目標之一是在標準Web技術之上重建整個工具，開發人員刪除了所有特定於Firefox的舊版程式碼，如XUL（XML使用者介面語言），還有使用特定於Firefox的API的程式碼。這是一個很大的進步，因為使用網路標準可以允許你在兩個不同的環境中執行整個工具的程式碼庫：

1.開發工具箱

2.任何網頁

任何熟悉Firefox開發工具的人都知道第一種情況，開發者工具箱可以在瀏覽器視窗的底部輕鬆開啟，並附帶各種工具（包括網路監視器）。

第二個工具是新的，現在可以像任何其他標準Web應用程式一樣在瀏覽器選項卡中載入該工具，以下就是其介面外觀。

請注意，該頁面是從localhost：8000載入的，這是開發伺服器正在執行的位置。

將工具作為網路應用程式執行的能力是一件很重要的突破，現在你可以使用所有的瀏覽器工具來開發工作流。雖然可以使用DevTools來除錯DevTools，但使用瀏覽器中的工具會讓除錯現在變得更加簡單和方便。當然，你也可以在其他瀏覽器中載入該工具。開發也更簡單，

因為我們不必構建Firefox。總而言之，一個簡單的標籤重新整理就足以讓網路監視器重新載入並測試程式碼更改。

架構

我們已經在以下技術的基礎上構建了新的網路監視器前端：

React
Redux
Immutable
Mocha
Enzyme
Webpack
Yarn

Firefox Developer Tools需要複雜的UI屬性，所以開發人員會使用受歡迎的React和Redux組合來為所有的工具建立一個簡潔而一致的程式碼庫，網路監視器也不例外。目前開發人員已經實現了一組React元件，它們負責渲染UI，起到儲存的作用，通過HTTP攔截收集所有資料，最後是一組使用者可能要執行的操作。

開發人員也改變了以前編寫測試的方式，不再使用Firefox特定的測試工具，而是慢慢轉向比較廣泛使用的庫，如Mocha 和 Enzyme。這樣一來，就更容易理解新的程式碼庫。

開發人員正在使用Webpack在網頁中執行時構建捆綁包，捆綁包會通過localhost：8000服務。

一般架構基於React和Redux概念中引入的流程。

1.表示NetMonitorApp的根元件可以在Developer Toolbox或Web頁面中呈現。

2.操作負責過濾，清除請求列表，排序和開啟具有詳細資訊的側皮膚。

3.我們的所有資料都儲存在儲存物件中，包括有關HTTP流量的所有收集的資料。

新功能

我們一直主要關注程式碼重構，但是還有一些新功能或 UI方面的改進。我們來看看其中的一些。

Column Picker

有一些列包含有關個別請求的附加資訊，使用者可以使用上下文選單來選擇那些認為重要的資訊。

總計資料（Summary Data）

研究人員已經為列表中當前顯示的請求實現了更好的總計，它現在位於皮膚的底部。

列表中的請求數

所有請求的大小或傳送大小

載入所有請求所需的總時間

發生DomContentLoaded事件的時間

載入事件發生的時間

過濾效能（Filtering By Properties）

過濾器UI現在更強大了，可以根據各種屬性過濾請求列表。例如，你可以在過濾器輸入框中鍵入：greater-than：50，只檢視大於50個位元組的請求。

瞭解更多MDN

指向MDN的UI中有許多地方有更多資訊的連結。例如，您可以快速瞭解各種HTTP標頭的使用方式。點選這裡，瞭解更多的MDN

總結

我們相信，根據Web標準構建新一代Firefox Developer Tools是正確的方式，因為這意味著工具可以在不同環境中執行，並且可以更有效地與其他專案（例如IDE）整合。 以網路標準為基礎的工具會使許多事情成為可能，現在你還可以考慮將該工具作為可以從網際網路平臺中受益的線上Web服務。 你可以在網路上分享收集的資料以及除錯上下文，開啟一個真正的社交除錯世界的大門。