淺談 Firefox 50 開發者工具

主控台、記憶體工具、網路監控器,還有更多

快下載 Firefox Developer Edition 50 吧!現又改良許多功能,協助你搭配由程式碼所觸發的網路請求、微調 indexedDB 資料,還有更多。同時也提供某些大家期待已久的特殊功能。

主控台 (Console)

多人期待已久的功能終於加入開發者工具了,但我們仍需要大家幫忙最後的測試階段。原始碼對映 (Source map) 功能目前是預設關閉,等測試告一段落才會開放給所有人使用。

如果你想知道此一功能遇上如此艱難問題的原因,可參閱 James Long 所撰寫的〈On the Road to Better Sourcemaps in the Firefox Developer Tools〉一文。

或許你想知道解決方案怎麼來的?這裡先引用 Joe Walker 的一段話:

實習工程師本身的經驗往往看不出某個臭蟲的難易度,所以有時就挑上了極具挑戰性的臭蟲。我們謝謝實習工程師。

所以要先謝謝 Firefox 開發者工具實習工程師 Jaideep Bhoosreddy 解決了這個問題。

原始碼對映現讓你可在單一指令中集結所有的 JavaScript 檔案,藉以節省下載時間,也可從其他格式 (如 TypeScript 或 CoffeeScript) 編譯為 Javascript,同時維持原始檔案的參照,所以除錯不再是惡夢了。

除錯器 (Debugger) 已支援原始檔對映功能,但主控台尚未納入此功能。亦即任何已記錄的訊息均有其自身位置 (送出此項記錄的程式碼所在之檔案及行數) 指向已編譯的 JavaScript 檔案。但如果檔案極長且\或壓縮過,此位置資訊就幾乎無用。

但這些情況都結束了。主控台現在會顯示原始碼,而不會是已編譯過的程式碼了。你可透過下方 gif 檔了解 CoffeeScript 檔案的情形:

webconsole_sourcemap

主控台所支援的原始碼對映 (Source map) 功能

 

現在預設關閉原始檔對映的支援功能,且可透過偏好設定將之開啟。因為根據原始碼對映檔案建構工具的不同,現下有太多的實作。所以我們想起頭對不同的實作進行測試。也希望你能加入:

若要啟動主控台的原始檔對映功能,必須先將偏好設定為開啟。

  • 先鍵入 about:config
  • 找到 devtools.sourcemap.locations.enabled
  • 連點該行兩次,將值改為 true
  • 關閉再重新開啟主控台

config_sourcemap

如果發現任何不對勁的地方,可透過 Twitter 上的 @firefoxdevtools,或 IRC 上的 #devtools 頻道讓我們知道。

網路堆疊追蹤 (Network Stack Trace)

目前的 Firefox 開發者 (Developer) 版本,主控台會在 HTTP 記錄訊息中顯示該網路請求的堆疊追蹤,且此功能預設為開啟。

console_stacktrace

記憶體工具 (Memory Tool)

記憶體工具 (Memory Tool) 現亦預設為啟動。此一工具為除錯與維護絕佳 App 效能所必須,亦可協助你找出 App 中的記憶體洩漏情形並修正之。若要進一步了解此工具,可參閱 MDN 上的文章或〈新的記憶體工具〉一文。

網路監測器 (Network Monitor)

我們已於 Firefox 49 添增了「原因 (Cause)」欄位,顯示既有網路請求觸發的方式與其類型,且若有對映的堆疊追蹤亦將顯示之。堆疊追蹤泡泡現顯示框架未同步的原因 (如 XHR、Promise、setTimeout 等),就如同除錯器的堆疊追蹤面板一樣。

network_stack_async

此外,點擊欄位標頭即可依照輸入項的原因將之排列;例如可迅速找到由 fetch 所觸發的所有網路請求。

JSON 檢視器

JSON 檢視器 (JSON Viewer) 已微調過,透過更聰明的方法顯示資料:

儲存空間檢測器

感謝 Mike RatcliffeJarda Snajdr 一同強化了儲存空間檢測器 (Storage Inspector),現在可透過右鍵選單移除單一的 indexedDB 輸入項

idb_remove_entry

about:debugging

Service Workers 絕對是 Web 開發活動的下一個重要功能,內有一系列工具可建構絕佳的 Web App 並媲美原生 App 的功能,更具備離線與推播功能。

push-service
你知道現在可在 about:debugging#workers 頁面中管理已註冊的 Service Workers 嗎?此頁面現亦顯示推播訂閱端點,讓你只需輕點按鈕即可送出測試通知。

其他要點

圖示:Firefox 50 另更新了開發者工具中的所有圖示,現在更為一致且看起來更清晰

 

icons_49

Firefox 49 的分頁圖示


 

icons_50

Firefox 50 的新分頁圖示


 

 

WebAssembly:如同 Luke Wagner 在上一篇部落格文章曾說過的:

「WebAssembly 是正蓬勃發展中的標準,目標是定義安全、可移植、體積與載入時間皆有效率的二進制編譯器,且其效能逼近原生 App。」

除錯器現已支援 WebAssembly 檔案,且更加上強調效果,看起來更清晰。

wasm

WebAssembly 檔案語法強調

 

另外再提醒一項小幅度但極有用的變化:現可停用樣式編輯器 (Style Editor),在你不使用時省下更多空間。

Firefox 50 開發者工具大概就講到這裡。請立刻下載最新版本並讓我們知道你的意見。另外必須強調的,許多強化之處都有賴熱血貢獻者所完成。謝謝大家。

開發者工具是以標準的 HTML、Javascript、CSS 所寫成,因此只要你有任何前端開發經驗,就一樣能參與貢獻。如果你想要協助改良開發者工具,可到 http://firefox-dev.tools/ 找些簡單的錯誤就開始動手。歡迎所有人加入!

 

 

原文連結:Developer Edition 50: Console, Memory Tool, Net Monitor and more

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *