本文講的是<b>重構後的Firefox網絡監視工具，裡邊加了什麼黑科技？</b>，
Firefox開發工具的早期版本已經在Firefox中提供了網絡螢幕工具，任何關心頁面加載性能和網頁運作速度的使用者都非常喜歡這個工具。不過該工具最近被進行了廣泛的重構（項目代号為Netmonitor.html），這篇文章旨在向大家解釋如何設計新架構以及你如何使用重構之後的新技術。
以下就是Firefox Developer Toolbox中運作的網絡螢幕使用者界面。
目标
重構的主要目标之一是在标準Web技術之上重建整個工具，開發人員删除了所有特定于Firefox的舊版代碼，如XUL（XML使用者界面語言），還有使用特定于Firefox的API的代碼。這是一個很大的進步，因為使用網絡标準可以允許你在兩個不同的環境中運作整個工具的代碼庫：
1.開發工具箱
2.任何網頁
任何熟悉Firefox開發工具的人都知道第一種情況，開發者工具箱可以在浏覽器視窗的底部輕松打開，并附帶各種工具（包括網絡螢幕）。
第二個工具是新的，現在可以像任何其他标準Web應用程式一樣在浏覽器頁籤中加載該工具，以下就是其界面外觀。
請注意，該頁面是從localhost：8000加載的，這是開發伺服器正在運作的位置。
将工具作為網絡應用程式運作的能力是一件很重要的突破，現在你可以使用所有的浏覽器工具來開發工作流。雖然可以使用DevTools來調試DevTools，但使用浏覽器中的工具會讓調試現在變得更加簡單和友善。當然，你也可以在其他浏覽器中加載該工具。開發也更簡單，
因為我們不必建構Firefox。總而言之，一個簡單的标簽重新整理就足以讓網絡螢幕重新加載并測試代碼更改。
架構
我們已經在以下技術的基礎上建構了新的網絡螢幕前端：
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
總結
我們相信，根據Web标準建構新一代Firefox Developer Tools是正确的方式，因為這意味着工具可以在不同環境中運作，并且可以更有效地與其他項目（例如IDE）內建。 以網絡标準為基礎的工具會使許多事情成為可能，現在你還可以考慮将該工具作為可以從網際網路平台中受益的線上Web服務。 你可以在網絡上分享收集的資料以及調試上下文，打開一個真正的社交調試世界的大門。
原文釋出時間為：2017年6月24日
本文作者：xiaohui
本文來自雲栖社群合作夥伴嘶吼，了解相關資訊可以關注嘶吼網站。
<a href="http://www.4hou.com/tools/5764.html" target="_blank">原文連結</a>