淺談 Firefox 34 開發者工具

WebIDE、jQuery 事件、iframe 切換器、儲存空間檢測器,還有更多

新的 Firefox 開發者工具已經進入曙光版 (Aurora) 釋出頻道,並將正式登上 11 月的 Firefox 34 版本。其中包含新工具 (儲存空間檢測器、WebIDE)、更新過的效能分析器,亦強化了多項現有工具。

firefoxdevtools

WebIDE

WebIDE 在此版本中預設為啟用狀態,可讓你在瀏覽器中開發 App。WebIDE 可透過範本建立新的 Firefox OS App (即為 Web App),或可打開現成 App 的程式碼。你可於 WebIDE 上編輯 App 的檔案。且只要清點滑鼠,即可在模擬器中執行 App,亦可搭配開發者工具進行除錯。現在只要進入 Firefox 的「網頁開發者 (Web Developer)」功能表就能找到 WebIDE。(說明文件)

儲存空間檢測器 (Storage Inspector)

新的面板將顯示目前頁面以 cookies、localStorage、sessionStorage、IndexedDB 所儲存的資料。可從開發者工具中的「工具箱選項 (即齒輪圖示)」→「Default Developer Tools」→「Storage」,即可啟動 Storage 面板。此面板現仍是「唯讀」狀態,未來將開放編輯功能。(說明文件) (開發討論記錄) (他人在 UserVoice 提出的需求)

storage-inspector

jQuery 事件

檢測器 (Inspector) 彈出視窗的事件監聽器 (Event Listener) 現已支援 jQuery。也就是說,彈出視窗會顯示你附掛的函式,例如 jQuery.on(),而不是 jQuery wrapper 函式本身。可參閱本篇文章進一步了解,並新增支援自己愛用的框架。(開發討論記錄)

jQuery-events

 

iframe 切換器

新的頁框選單可變更你正除錯中的頁框。只要選擇一個頁框,就會切換所有工具以進行該 iframe 的除錯作業,包含檢測器、主控台 (Console)、除錯器 (Debugger)。找到「工具箱選項 (即齒輪圖示)」→「可用的工具箱按鈕 (Available Toolbox Buttons)」→「選擇要做為目標文件的 iframe (Select an iframe as the currently targeted document)」,就能新增框架選擇按鈕。(說明文件) (開發討論記錄)(他人在 UserVoice 提出的需求)

iframe-switcher

強化過的效能分析器 (Profiler)

新的 JavaScript 效能分析器 (Profiler),將出現於新的「效能 (Performance)」分頁中 (之前分頁名為「效能分析器」)。新功能包含幀率 (Frame rate) 時間軸,還有如頁框的「network」與「graphics」分類。(說明文件) (開發討論記錄)

updated-profiler

console.table()

在 JavaScript 中的任何一處呼叫 console.table(),即可透過表格呈現方式將資料輸出至主控台。可記錄任何物件、陣列、MapSet。另外只要點擊表頭,即可重新排序表格內的欄位。(說明文件) (開發討論記錄)

console.table_

 

選擇器預覽

在檢測器或樣式編輯器 (Style Editor) 中,只要將滑鼠游標移至 CSS 選擇器上,就會反白顯示目前頁面符合該選擇器的所有節點。(開發討論記錄)

selector-preview

 

其他功能

 

特別感謝為此版本撰寫所有功能與修正檔的四十一位貢獻者。

你可於下方直接填寫意見;到 Twitter 的 @FirefoxDevTools 提供反饋意見;或透過開發者工具意見反饋管道提出想法。如果你想貢獻自己的一份力,可參閱相關說明

 

 

原文連結:WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34

 

 

 

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

對此文章發表回應

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