淺談 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 中所變更的屬性,而不會擴及整個元素。
  • Canvas 除錯器現可支援動畫的 setTimeout 。
  • Box model 的 Inline 強調功能
  • 按下快捷鍵「Cmd-Opt-Shit-I」或「Ctrl-Alt-Shift-I」,即可開啟瀏覽器的工具箱
  • 網路監測器 (Network Monitor) 現可顯示遠端伺服器的 IP 位址與通訊埠。
  • 檢測器中強調元素時,現可用鍵盤方向鍵的「左鍵」強調目前元素的母元素。若按下「右鍵」,則可 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

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

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