淺談 Firefox 36 開發者工具

「Promise」檢視功能、虛擬元素 (Pseudo element)、原始檔頭 (Raw header),還有更多

Firefox 36 現已進入「開發者 (Developer)」版本釋出頻道,先來看看又新增了哪些重要的開發者工具。另外針對開發者版本發表之前不久一起釋出的 Firefox 35,也將一併說明其上的數項變化。

檢測器 (Inspector)

現在已可檢測「::before」與「::after」這兩種虛擬元素 (Pseudo element)。而這些元素在「標記結構樹狀檢視欄 (Markup tree)」與「檢測器」側邊欄中的呈現方式,均與其他元素相同 (版本 35 開發討論記錄)

before-after-inspection

標記結構樹狀檢視欄的右鍵選單現新增了「顯示 DOM 屬性 (Show DOM Properties)(版本 35 開發討論記錄MDN 上的本功能說明文件)

show-dom-properties

Box Model 的強調功能 (Highlighter) 現可用於遠端的目標元素上,因此不論是在 Firefox for Android 頁面或是 Firefox OS App 上除錯,都能有完整的強調功能 (版本 36 開發討論記錄,還有技術說明文章可帶你建構自訂的強調器)

現在亦可於標記結構樹狀檢視欄中看到 Shadow DOM 內容。另請注意:開發者必須將 dom.webcomponents.enabled 設定為「true」,進而測試此功能 (版本 36 開發討論記錄,並可參閱 bug 1053898 以了解相關資訊)

我們另外從 Firebug 借用了一項功能,只要對標記結構樹狀檢視欄中的節點按下滑鼠右鍵,就能獲得更多「貼上 (Paste)」的功能選項 (版本 36 開發討論記錄MDN 上的本功能說明文件)

paste-options-500x258

Firefox 35 36 中的檢測器另有更多變化:

  • 在刪除節點後,會選擇前一個相鄰節點,而不會選到上層節點 (版本 36 開發討論記錄)
  • 在「Markup view」模式中,將滑鼠游標停於節點之上,將以更強烈的對比效果顯示 (版本 36 開發討論記錄)
  • 在「計算樣式computed」檢視分頁中,將滑鼠游標停於 CSS 選擇器之上,即可強調顯示網頁上符合該選擇器的所有節點 (版本 35 開發討論記錄)

除錯器 (Debugger)\主控台 (Console)

現在已可檢視 DOM Promises,並能隨時檢視 Promises 的狀態與數值 (版本 36 開發討論記錄)

promise-inspection

 

經過「eval」函式執行的程式碼,均可由除錯器辨識並搭配除錯 (版本 36 開發討論記錄)

eval」函式執行的程式碼現支援 //# sourceURL=path.js 語法,使其於除錯器中,以及由 Error.prototype.stack 回報的呼叫堆疊中,均顯示為正常檔案。可參閱 http://fitzgeraldnick.com/weblog/59/ 以進一步了解 (版本 36 開發討論記錄更多討論記錄)

主控台內的訊息除了顯示既有的「行」數之外,亦提供來源程式碼的「欄」數 (版本 36 開發討論記錄)

WebIDE

開發者現可透過 WebIDE 連上 Firefox for Android。可參閱 MDN 上的《debugging firefox for android》以進一步了解 (版本 36 開發討論記錄)

另外進行數項修正,提升 WebIDE 的使用者經驗:

  • 當選擇某執行環境 (Runtime) App\分頁時,亦預設帶出開發者工具 (版本 35 開發討論記錄)
  • 若連接執行環境時,就會重新連上該環境中最近開啟過的 App 專案 (版本 35 開發討論記錄)
  • 如果找得到最近使用的執行環境,則會自動選擇並連線 (版本 35 開發討論記錄)
  • 可縮放字形大小 (版本 36 開發討論記錄)
  • 只要輸入網址 (如:http://example.com),即可新增托管\架設式 (Hosted) App 專案,而不需再輸入 manifest.webapp 檔案的完整路徑 (版本 35 開發討論記錄)

網路監測器 (Network Monitor)

新增了純文字的請求\回應檔頭 (Request/response header) 檢視模式,可輕鬆檢視並複製某一請求上的原始檔頭 (版本 35 開發討論記錄)

net-headers-raw

 

另列出已解決的 Firefox 35 錯誤,以及已解決的 Firefox 36 錯誤

如果你有任何問題、意見、功能需求,甚或想回報錯誤,同樣都能在下方留言,到 UserVoice 填寫\投票給某個意見,也能到 Twitter 上聯絡 @FirefoxDevTools 團隊

 

 

原文連結:Pseudo elements, promise inspection, raw headers, and much more – Firefox Developer Edition 36

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

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