淺談 Firefox 40 開發者工具

保持啟用的網路監控、CSS 規則篩選,還有更多

Firefox 40 已經進入開發者 (Developer) 版本頻道,同樣有許多值得搶先分享的更新消息。Mozilla 直接聽取工具使用者的反饋意見,再交由開發者工具的貢獻者建構出此一版本。歡迎下載 Firefox 開發者版本瀏覽器盡情體驗。

邀請你加入實驗性的多程序 (Multi-process)

在你更新開發者版本之後,Firefox 隨即將詢問你是否參與測試多程序 (Multi-process,亦稱 E10s) Firefox。敬請協助我們測試此新功能,並回報任何你所發現的問題。

檢測器 (Inspector) 的新功能

  • CSS 的「規則 (Rules)」檢視面板現提供篩選框,可讓你找到符合任一字串的規則。請觀看篩選樣式影片或下方截圖。(開發討論記錄:11206161157293)
    inspector-filter-styles
  • CSS 屬性現提供新的 CSS 工具文字提示。只要在 CSS 規則檢視面板中的任何屬性按下滑鼠右鍵,再點選「Show MDN Docs」即可觀看該屬性的相關資訊。(開發討論記錄)
    inspector-mdn-tooltip1
  • 檢測器的搜尋功能現更納入 iframes 結果,以及不具備 CSS 前綴的 class / id 結果。(開發討論記錄:8734431149346)
  • 由 Mahdi Dibaiee 所新增的 CSS 篩選編輯器工具提示功能。可觀看 CSS 篩選編輯器工具提示影片的示範,或直接體驗開發者版本的篩選器展示頁面。(開發討論記錄)
  • 動畫檢測器 (Animation Inspector) 另有重要更新。現在可顯示subtree animations、可控制回播率 (Playback rate),並可預覽\強調動畫的 DOM 節點。(開發討論記錄:115565111556531144615)

你另外應該會感興趣的檢測器其他更新:

  • 「Box Model」檢視面板現提供圖例與說明文字,呈現顯示是哪一組 CSS 規則影響了運算值。(開發討論記錄:11415711151956)
  • 按著電腦鍵盤的「Shift」再用滑鼠點擊色彩樣本,即可於適當位置切換色彩單元格式。(開發討論記錄)
  • 「Markup View」面板的右鍵選單新提供「捲動進入檢視狀態 (Scroll Into View,暫譯)」「Open Link in New Tab (用新分頁開啟連結)」「複製連結 (Copy Link)」「在樣式編輯器中開啟 (Open In Style Editor)」「在除錯器中開啟 (Open in Debugger)」等選項。(開發討論記錄:9012509211021158822)

網路監測器 (Network Monitor)

另外摘錄此版本中的其他變化與改良之處:

  • 對各個請求按下滑鼠右鍵時,現新提供「複製回應 (Copy Response)」、「複製 URL 參數 (Copy URL parameters)」、「複製請求/回應標頭 (Copy Request/Response Headers)」等選項。(開發討論記錄:95593311507171150715)
  • 搜尋對話框可搜尋或篩選請求的網址。(開發討論記錄)
  • IP 位址已納入網路監測器的「網域 (Domain)」說明文字之中。(開發討論記錄)
  • 針對請求的右鍵選單,現新增了快捷鍵可開啟之。(開發討論記錄)

網路主控台 (Web Console)

  • 新的主控台函式:console.dirxml()。(開發討論記錄)
  • 網路主控台的新篩選功能,現可選擇顯示來自於 Worker 的訊息。(開發討論記錄)
  • 只要是透過 console.log 所記錄的字串,將不再額外添加引號 (Quote)。感謝新加入的貢獻者 Dmitry Sagalovskiy 加了此功能!(開發討論記錄)

除錯器 (Debugger)

  • 除錯器的「來源 (Sources)」分頁,已為右鍵選單新增「複製網址 (Copy URL)」與「用新分頁開啟 (Open in New Tab)」選項。(開發討論記錄)
  • 針對未命名 eval 指令碼所設立的中斷點,現可正常運作了。(開發討論記錄)

一般

  • 現已將「用新分頁開啟連結 (Open Link In New Tab)」新增到「樣式編輯器」的樣式表中。(開發討論記錄)
  • 新按鈕可完全收起檢測器的側邊列。(開發討論記錄)
  • 開發者工具若是套用「亮主題」,則開發者工具列現亦能夠配合該主題了。(開發討論記錄)
  • 可重新整理主題顏色,以獲得更好的對比效果。(開發討論記錄)
  • 現針對 Windows 系統可達到更好的 HiDPI 效果。(開發討論記錄:11477021023546)

特別感謝此版本 Firefox 開發者工具的貢獻者!可參閱已解決的 Firefox 40 開發者工具錯誤清單

不論你想發表意見、提出問題、發現錯誤、要求新增功能,都能透過 @FirefoxDevTools 聯絡團隊。或可到 Firefox 開發者工具意見反饋頻道提出建設性的意見。

 

 

原文連結:Developer Edition 40: Always active network monitoring, CSS rules filtering, and much more

 

 

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

  1. 參照: Firefox 40 的效能新工具 | 部落格 | Mozilla Taiwan

對此文章發表回應

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