Skip to main content

Devtools的近期進展和新功能(2017)

· 8 min read

2017/9/22 我和 Ricky Chien 在台灣第一次舉辦的Mozilla Developer Conference中，一起為大家介紹 Firefox 開發者工具，也就是 Devtools 的近期進展和新功能 [^7]。

Devtools 架構的大幅改進，是過去一年中所有 Devtools 貢獻者共同努力的成果。在這講題中，我們可以看到 Devtools 如何持續改進，並提供各種新的工具，讓開發網頁的過程變得更有效率。

透過在 Firefox 57 新版的統一選單介面上開啟 Web Developer Tool，我們可以開啟 Devtools 的各種工具分頁分頁 (Panel)。

Devtools 簡單來說，就是各式各樣網頁開發者工具的集合。這些工具以一個個分頁（Panel）的形式組織在開發者工具區域中，我們稱這個區域為Toolbox，也就是工具箱。

Devtools 的過去​

Devtools 的前身叫做 Firebug [^1]。在 2006 年時，Firefox 的創始者之一 Joe Hewitt 寫出了 Firebug 這個 Firefox 的網頁開發工具 addon [^2]。 使用者可以利用它除錯、編輯、刪改任何網站的 CSS、HTML、DOM 與 JavaScript。也可以透過 addon 再次擴展它的功能。現在各家瀏覽器的網頁開發者工具都參考了 Firebug 功能。

過去的 Web 相關技術遠遠沒有今天成熟，Mozilla 發明了一些特有的技術 (XUL, XBL) 來製作瀏覽器的介面與呼叫特殊的 API (Addon API) 來和作業系統互動。因為原有的 addon 架構無法支援 FIrefox 新的多執行緒 (multiple process) 架構，因此 2016 年 Firebug 開發團隊決定將 Firebug 直接整合進 Devtools 中[^3]，原有的 Firebug 開發團隊也大多加入了 Firefox Devtools 團隊繼續貢獻，也因此我和 Ricky 有了和原 Firebug 維護者 Honza 直接共事的機會，在過去半年中我們合作開發 Network Monitor，透過 Daily Meeting 同步進度，也在合作的過程中得到許多難得的經驗。

Devtools 的現在​

Devtools 繼承 Firebug 的開發目標，也就是協助網頁開發者更有效率的製作網站。同時作為網頁開發者工具，我們希望開發者工具工具本身，也能用和網頁開發者使用的排版與框架來撰寫。

於是在 Mozilla Web Summit，大家可以看到我們的成果。我們已經在使用 HTML 和 Web Standard API 來製作 Devtools 開發者工具！

使用 HTML 與 Web Standard API 只是第一步。我們進一步評估，選用了 React 和 Redux 作為前端 UI 介面與狀態管理框架。經過 react 改寫後，我們有了可在不同工具間中重用的元件庫。透過 redux，每個工具也都有了清晰的 App 狀態管理機制。

我們將許多 Devtools 核心的專案放到 Github 上以方便開發者，並且將可以重用的元件，放到 Devtools-Core 專案中，將可以獨立運作的Debugger.html，Perf.html專案也放到 Github 上，讓參與專案變得更容易。

如果想開發自己所需的的開發者工具。現在也可以使用 Web Extension API 來製作新的開發者工具面板。面板中也可以重用Devtools-Core專案提供的 React 介面元件，更快地打造自己的開發者工具。

使用者介面的改進​

Firefox 57 上的 Devtools 分頁變得更美觀了。當然這些都已包成 React component，喜歡還可以拿去用。

對於新配色的選擇，我們的 UX 團隊有做過可用性 (Assessibility) 測試 [^5]。即使是辨色有障礙的人，也可以容易地分辨不同色塊的差異。

Inspector 工具的改進​

Inspector 工具是最常被使用的開發者工具。透過 Inspector，可以查看或修改 HTML。選到任一個 Element 時，可以查看並修改這個 Element 目前所有套用的 Style。

透過重構 Inspector，我們把原本使用的 XUL 與 addon SDK 替換為 HTML 和 web API。並使用 React + Redux 來組織程式的內部架構。

在整理所有 devtools 新增功能的時候，我最先注意到的就是 "Find Useless Rules" 這個超實用的功能。

過去在 Inspector 裡只會在不合法的樣式旁顯示警告標誌，現在我們也會在「合法，但無用」的樣式旁也顯示警告標誌。 比如在 grid 或 flex layout 中使用 float 屬性的話沒有作用，Inspector 就會在 float 屬性旁顯示警告標誌。

此外，Inspector 的 Box Model 會列出所有影響的這個元件位置，大小，或形狀的屬性。透過新的 box model 介面，可以更容易地查看並調整上下左右 position 參數，快速地將版面調整到理想狀態。

Firefox Devtools 也是最先支援 Grid Layout [^4] 的開發者工具。我們可以看到，在 Rules side panel 中的任何修改，都會直接反映到頁面上。

在 Layout Side panel 上會列出了頁面上所有的 Grid Layout。右側則可以選擇要顯示輔助線號碼，區塊名稱，或是要不要延長 Grid 格線以便排版。

不僅如此，在畫面上也可以見到，開發者也可以在 Layout Side panel 中快速的查看對應的網格。我們可以透過這些選項更好地查看頁面上的 Grid Layout。

Ｗeb Console​

Web Console 應該是 Javascript 開發者最常用的網頁工具吧。除了查看頁面上的 Javascript 錯誤，印 log 外，Web Console 可以即時執行 javascript，或是存取頁面上的 Ｇlobal Object。

去年 Web Console 也經過改寫。使用 React + Redux 來組織程式的內部架構。

我們在 console 中可以即時執行 javascript 並取得執行結果。不管是哪種類型的變數，無論是 boolean, array, object 都會用 Object logs 來顯示。

在 rewrite web console 的過程中，我們也將 Object logs 包裝起來變成一個可以重用的 React Component。

這個元件被大量地運用在 Debugger, Network 等其他 panel 上。

如果你想要開發自己的開發者工具或剛好需要類似的元件，reps 可以在 github 上找到。或是透過npm install devtools-reps命令來安裝到你的專案中。

Web console 近期也透過 tree 和 reps 元件，支援了 console group 功能 https://developer.mozilla.org/en-US/docs/Web/API/Console/group

現在透過 web console 實驗 XMLHTTPRequest 或 fetch 時，也可以透過 HTTP inspector 來即時查看 http request 的內容。整套 HTTP inspector 元件是來自 Network Monitor，只經過一點點修改就能完整套用。因此在 web console 中可以直接看到與在 network panel 中一樣的資訊，非常方便。

Perf.html 網頁效能監測工具​

最後我想介紹的是 Perf.html 這套工具。

要提升網頁的效能是相當考驗技術的。 透過 profiling，也就是量測的結果，我們可以更直觀地找出網頁效能的瓶頸並做出針對性地改善。perf.html 就是這樣的量測工具。

去年 perf.html 也經過改寫。使用 React + Redux 來組織程式的內部架構。有自己的網頁，可以脫離 devtools 獨立運作。程式碼 host 在 github 上。

perf.html 使用前需先到網站上安裝 addon，在要量測前後按下 start/stop，就可以得到量測的 profile。

perf.html 最棒的點是，量測好的 profile 可以透過 addon 直接上傳到網站上，我們是在一般網站的介面上查看量測的結果。可以直接分享這個網址，或是標註出關注的時間區間後分享。和其他人一起 trace 效能瓶頸。

經過 photon 更新後，perf.html 介面風格將變得更加簡潔，配色變得更大膽，用起來更舒服。

以上是我分享的部分。若您對 Devtools 感興趣，可以到firefox-dev.tools網站查看所有與 Firefox Devtools 相關的資訊。

參考資料​