moztw.org

淺談 Firefox 39 開發者工具

拖曳元素、主控台歷史記錄,還有更多

Firefox 39 現提供多項新或提升過後的功能,並修正了多個錯誤。立刻更新自己的開發者 (Developer)每夜更新 (Nightly) 版本並體驗之!

檢測器 (Inspector)

檢測器 (Inspector) 上,只要拖曳即可搬移元素。用滑鼠按著任一元素不放,接著就能拖曳到你想要的位置。此功能是由 Mahdi Dibaiee 所貢獻。

早在 Firefox 33 時,就已經將工具提示功能加到「規則 (Rule)」的檢視畫面上,以編輯 CSS 動畫的貝茲曲線 (Bézier curve)。而到 Firefox 39 的開發者版本上,我們又大幅強化了工具提示的使用者經驗,新增多個標準曲線以利使用者立刻嘗試,也讓整個介面更為美觀。此項強化功能是由 John Giannakos 所貢獻。

cubic

而從開發者版本 37 起所導入的 CSS 動畫面板,現更加入了時間軸功能。你可回播\快轉動畫,並設定其目前時間。

主控台 (Console)

之前只要關閉開發者工具的主控台,則主控台 (Console) 的歷史記錄也就全部遺失。現在主控台的歷史記錄將可跨工作階段 (Session) 而保留。不論是在其他分頁或重新啟動 Firefox,你最近輸入的指令都會保留到下次開啟工具箱為止。此外,我們也新增了clearHistory 指令,可重設已儲存的指令清單。

新增 $_ 成為主控台中的最新執行結果。舉例來說,如果你執行了表示式而並未將結果儲存為變數,則可透過 $_ 而迅速取得最新結果。

現在也格式化了結構類似陣列的物件,使其就如同主控台輸出中的陣列一般。這樣可讓此類物件如同真正的陣列,以更輕鬆的追蹤並檢測之。此功能是由 Johan K. Jensen 所貢獻。

pseudo-array

WebIDE 與行動裝置

現亦加入了 Firefox OS 的 WiFi 除錯功能。現在不需 USB 連接線,WebIDE 亦可透過區域 WiFi 網路而連上 Firefox OS 裝置。請期待後續專文進一步討論此功能。

WebIDE 新支援了 Cordova 架構的專案。如果你正以 Cordova 撰寫行動 App,則WebIDE 就會自行為裝置建立所能支援的專案,再不需額外設定。

其他更新

  • 變更屬性時,只會重新整理 Markup View 中所變更的屬性,而不會擴及整個元素。
  • 檢測器中強調元素時,現可用鍵盤方向鍵的「左鍵」強調目前元素的母元素。若按下「右鍵」,則可 1). 強調其第一子元素,2). 或沒有子元素的情況下,強調其緊鄰元素,3). 或在沒有緊鄰元素的情況下,強調樹狀圖中的下個節點。只要某一元素及其母元素佔據畫面上的相同空間,只用滑鼠就很難選擇其中的元素。這時此功能就特別有用。

若需要更完整的清單,可參閱 Firefox 39 開發期間所解掉的全部 200 個錯誤

感謝下列開發者第一次貢獻此版本的開發者工具:

  • Anush
  • Brandon Max
  • Geoffroy Planquart
  • Johan K. Jensen
  • John Giannakos
  • Mahdi Dibaiee
  • Nounours Heureux
  • Wickie Lee
  • Willian Gustavo Veiga

一如往常,如果你有任何問題、反饋意見、功能需求、臭蟲回報,都能透過 Twitter 上的@FirefoxDevTools 聯絡我們。也可以到 UserVoice 上提出想法或投票。

原文連結:Drag Elements, Console History, and more – Firefox Developer Edition 39