淺談 Firefox 48 開發者工具

加入 Firebug 功能、可編輯的儲存空間、再強化的檢測器,還有更多

向大家簡介目前的 Firefox 開發者 (Developer) 版本,也就是 Firefox 48。為了準備迎接多程序 (Multiprocess) Firefox 並取消「Firebug」附加元件,我們正著手將 Firebug 移植為內建工具,當然也持續微調現有的功能。

Firebug 背景主題

將 Firebug 移植為內建工具的同時,我們也一併移植了 Firebug 主題,希望讓使用者能繼續在熟悉的 Firebug 環境中作業。這只是目前釋出的第一個主題。如果你發現其中有任何問題,請到這裡回報給我們知道。下為 Firebug 主題的擷圖:

new-firebug-theme

DOM 面板

「DOM」面板也是從 Firebug 所移植的功能。此面板提供方便的樹狀檢視模式,讓你能瀏覽並檢視頁面的 DOM 架構。下為此一新工具的擷圖:

dom-panel

可編輯的儲存空間

目前我們最常看到的功能需求之一,就是儲存空間檢測器中的編輯功能。目前版本即針對「Cookies」、「Local Storage」、「Session Storage」等項目,新增了編輯與刪除功能。使用者對任一儲存單位 (Cell) 連點滑鼠兩下即可開始編輯,另可透過滑鼠右鍵選單刪除輸入項。

editable-cells-768x442

delete-cells

幾何編輯器

我們另新增了視覺效果編輯工具,針對任何絕對位置 (absolutely positioned) 或固定位置 (fixed-position) 的元件,都能輕鬆微調其位置。透過此一工具,即可改變上下左右的屬性。只要在檢測器 (Inspector) 中找到「Box Model」分頁之後,點擊 geometry-highlighter-icon 圖示即可啟動幾何編輯器。

geometry-editor

強化的記憶體工具

記憶體工具現添增了全新的樹狀結構檢視模式,將更直覺、更迅速的呈現記憶體使用的情形。新的檢視群組物件即根據其類型來連續呈現,讓開發者能輕鬆看出正佔用記憶體的類似物件數量 (如繪製 canvas 線條時的陣列、載入大量使用指令碼網站時的指令碼等等)。此外,物件大小,也依照其所使用位元數的比例來呈現,讓開發者輕鬆一眼看出佔用了最多記憶體的物件。

memory-tool-treemap

記憶體工具另提供好用的「集合 (Aggregate)」檢視模式 ,將所有同類型節點的實體 (Instance) 分為一組。而只要在此版本中點擊 ⁂ 圖示,即可在獨立視窗中檢視特定類型的各個實體。你也可使用前一版已新增的「保留路徑 (Retaining paths)」面板,即可分別檢視節點的保留路徑。如此在為自己的 Web App 除錯時,可精確找出正在洩漏記憶體的特定物件。

individuals

最後,我們也新增了「從記憶體工具側邊列移除個別快照」的功能。

強化的檢測器

我們又提升了檢測器,達到更順暢、更簡單易用的使用者體驗。「規則 (Rules)」檢視模式的自動補完功能,現已預設選擇最常用的屬性,讓你加快編寫速度。舉例來說,現會選擇 background 而非 backface-visibility;因為前者較為常用。下為此功能的運作情形:

CfSXO1qWEAACExj

我們另提升了規則檢視模式對較長數值的處理方式。現特別為長數值提供新的多行模式,讓開發者能對現正編輯中的值,迅速找出並選擇不同的部份。

multiline-input

「Markup」檢視模式現可強調母、子節點之間的關係。已選的元素下方將多顯示一條線,藉以呈現其子節點。如此一來,即便 HTML 標記甚為複雜,亦可讓開發者輕鬆找出所選元素的子節點。

parent-child-relationship

現可於檢視模式中迅速切換不同的角度單位。角度值旁邊均有一角度的圓餅圖示,而只要開發者點擊即可循環切換不同的單位;如同之前色彩值的切換效果。此功能是由貢獻者 Nicolas Chevobbe 所提供。

cycle-angle-units

最後,我們新定義了快捷鍵以輕鬆瀏覽 Markup 檢視模式的搜尋結果。按下 Shift+Enter 即可回頭瀏覽搜尋結果。此外,Ctrl/Cmd+GCtrl/Cmd+Shift+G 的功能,即如同 EnterShift+Enter 的效果。鍵盤快捷鍵是由貢獻者 Steve Melia 所提供。

強化的主控台

主控台 (Console) 另進行了多項微調,讓使用者經驗更為有趣。首先就是針對移植中的 Firebug 相關功能進一步提升。開發者現可展開網路記錄以利檢視,並透過 Firebug 風格的檢視模式觀看細節。以下為擷圖:

http-inspection

如果你正和 Map Set 物件打交道,則現在可從主控台側邊列中檢視其個別輸入項。此功能是由貢獻者 Jarda Snajdr 所提供。

map_set

最後,我們另新支援了 console.clear(),可清除主控台輸出。

about:debugging 功能

為了迎接 WebExtensions 的到來,我們新增的功能可協助附加元件的開發者。現可透過 about:debugging 重新載入附加元件,讓你不需每次變更附加元件之後就須再重新安裝一次,進而加速開發附加元件。

reload-addons-with-about-debugging

如果你正使用 Service Workers 進行開發,應可注意到我們已針對未註冊的開發者新增了「unregister」選項:

unregistering-sws-1

其他變化

除了上述的變化之外,更提升了工具箱的不同功能:

 

感謝此版本的所有貢獻者。請立刻下載 Firefox 開發者版本並提出你的意見!如果你對已移植完成的 Firebug 功能有所建議,可到這裡分享你的想法

 

 

原文連結:Developer Edition 48 – Firebug features, editable storage, inspector improvements and more…

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

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