 |
VOOZH | about |
|
VOOZH | about |
在上一篇《重構後的Firefox網絡監視工具，裡邊加了什麼黑科技？》中，除了深入了解重構之後的網絡監視器工具，我們還了解到，使用Web標準構建開發工具使我們能夠在不同的環境中運行它們比如加載在Firefox Developer Toolbox中，或者作為標準Web應用程式加載到瀏覽器選項卡中。
在本文中，我們將向你展示如何嘗試這些操作，並使用網絡監視器進行黑客攻擊。
Firefox開發人員工具代碼庫目前是Firefox原始碼庫的一部分，因此，下載它需要下載整個repo。有幾種方法可以獲取原始碼並對代碼進行處理。你可能需要了解Github文檔，以獲取詳細的說明。
方法之一便是使用Mercurial複製mozilla中央存儲庫來獲取副本。
研究人員使用Web標準構建Web工具時的一部分計劃還包括將Firefox的代碼庫從Mercurial移動到Git（在github.com上）。因此，重構之後，我們可以輕鬆複製和使用原始碼。
現在，如果要構建網絡監視器並在Firefox Developer Toolbox中運行，請按照這個詳細說明進行操作。
簡單來說，你需要做的就是使用mach命令。
構建完成後，啟動編譯的二進位文件並打開開發工具箱（工具 – > Web開發人員 – >切換工具）。
如下所示，對原始碼進行更改後，你可以快速重建。
為了在網頁中運行Net Monitor，你需要安裝以下軟體包：
Node NPM Yarn 重構之後的Firefox
Firefox的開發人員開發了一個簡單的容器，允許在網頁內運行Firefox開發工具。這就是Launchpad。 Launchpad負責連接到被調試的Firefox的樣本，並加載網絡監視器工具。
下圖描繪了整個概念：
1.網絡監視器工具（客戶端）正像任何其他標準Web應用程式一樣在瀏覽器選項卡中運行。
2.該應用程式由開發伺服器（伺服器）通過localhost：8000提供
3.Net Monitor工具（客戶端）通過WebSocket連接到目標（調試）的Firefox樣本。
4.目標Firefox實例需要在埠6080上監測以允許創建WebSocket連接。
5.開發伺服器開始使用 yarn 啟動
我們來看看如何設置開發環境。
首先我們需要為我們的開發伺服器安裝依賴項：
然後我們可以運行它：
如果一切正常，你應該看到以下消息：
接下來，我們需要在目標Firefox瀏覽器中監測傳入連接，從而進行調試。打開開發人員工具欄（工具 – > Web開發人員 – >開發工具欄），並在其中鍵入以下命令。就將開始監測，所以工具可以連接到這個瀏覽器。
開發者工具欄界面應該在瀏覽器窗口的底部打開。
最後，你可以加載localhost：8000
你現在應該會看到Launchpad用戶界面，它列出了目標Firefox瀏覽器中打開的瀏覽器選項卡。你還應該看到，其中一個選項卡是Launchpad本身（在localhost：8000運行的最後一個net monitor選項卡）。
你只需單擊要調試的其中一個選項卡即可，一旦Launchpad和網絡監視器工具連接到所選的瀏覽器選項卡，你就可以重新加載連接的選項卡，並查看HTTP請求的列表。
如果你更改底層的原始碼並刷新頁面，你將立即看到你的更改。
查看以下視頻，以便對啟動板頂部運行的網絡監視器工具有更加詳細的了解，並利用熱加載(Hot Reload)功能立即查看代碼更改。
另外，你可能還需要閱讀文檔以獲取有關如何構建和運行網絡監視器工具的更多詳細信息。
未來我們會繼續關注如何將該工具連接到Chrome、NodeJS，並與現有IDE集成。
本文翻譯自https://hacks.mozilla.org/2017/06/hacking-on-the-network-monitor-developer-tool/，如若轉載，請註明原文地址： http://www.4hou.com/technology/5766.html
