淺談 Firefox 49 開發者工具

網路請求堆疊追蹤,還有更多

Firefox 開發者 (Developer,即為 Firefox 49) 版本已經上線,另透過本文概述其中幾項重要變化。

「網路 (Network)」監控器中的請求堆疊追蹤 (Stack trace)

「網路」現在新增了「原因 (Cause)」欄位,可顯示目前選定網路請求的啟動原因,並另顯示請求類型,亦提供簡單的工具提示對話框。另值得一提的,若有 JavaScript 的堆疊追蹤資訊,就會以彈出泡泡視窗的方式呈現。

JavaScript 堆疊追蹤是 XHR 請求最有趣的部份,但亦可用於其他由指令碼間\直接啟動的請求,例如以指令碼於頁面中插入 <script><img> 元素。

如果你想找出頁面上特定 HTTP 請求所發出的原因與位置,此功能就特別有用 (可參閱 bug 1134073)。

image00

 

「檢測器 (Inspector)」中的動畫效能資訊

「檢測器」面板已可檢視 CSS 與 DOM 動畫的細節,而 Firefox 49 則可提供動畫效能的詳細資訊。如果某一動畫無法在合成器 (Compositor) 上執行 (即無法以硬體加速) 時,就會在展開的動畫檢視模式中以底線標註,另有相關工具提示方塊解釋此一問題。

下圖範例的問題即在於無法同時加速 transform 與 width 屬性。有了此新工具,即可輕鬆找出效能未達標準的動畫,並得知該如何修正以確實加速。

另可參閱 David Baron 的部落格文章,以進一步了解該如何於 Gecko 中最佳化動畫的方式 (可參閱 bug 1254408)。

image05

 

標記 (markup) 檢視模式的右鍵選單已重新整理

檢測器的右鍵選單有太多選項,造成整個選單冗長又笨重。貢獻者 Moaaz Sidat 協助重整了選單,將之分為多個子選單 (可參閱 bug 1211613)。

image03

檢測器其他提升之處

Firefox 49 另新支援 #rrggbbaa#rgba 語法的色彩值,也代表開發者工具的檢測器現亦支援了此語法 (可參閱 bug 1271191)。

image07-768x411

 

在 CSS 規則編輯器中,自動補完功能現可透過捲動式清單,顯示更多可能的屬性。因此可更輕鬆找出你所需的值或自己尚未熟悉的 CSS 新屬性 (可參閱 bug 1260419)。

image06

 

在標記檢視模式中,像是 <br> 這類的自結尾 (Self-closing) 標籤,現僅有在 doctype 為 XHTML 之時,才會顯示為 <br></br>。而針對一般 HTML,現將呈現更精確、更簡潔的標記 (可參閱 bug 820926)。

可從主控台的 JavaScript 錯誤連接到 MDN 參考文章

即使是在「主控台 (Console)」中看到不熟的錯誤訊息,也不再需要複製該訊息才能搜尋線上的說明文件了。現在只要點擊連結,就可針對該訊息所提及的錯誤開啟 MDN 參考頁面。可參閱 @floscholz@mrrrgn部落格文章,並讓自己對此功能有所貢獻 (可參閱 bug 1179876)。

image01

 

語法強化顯示模式已套用新色彩

我們覺得語法強調所用的色彩有點過時了,所以這次 Firefox 開發者版本的「亮」與「暗」主題都改用了新色彩。最佳化的顏色大大提升了可讀性,並透過更高的對比讓開發者易於辨識。

image04

image02

 

提升輔助功能

另外也透過此版本重點提升了輔助功能。目前大部分的開發者工具 UI 元素,現均具備清晰可見的焦點指示,並可透過鍵盤尋找所需的 UI,且更改善了檢測器主控台的輔助功能 (可參閱 bugs 124269412427151242851)。

其他重要變更

除了上述改善之外,再重點提示幾項功能:

  • 不論是透過設定或隱私瀏覽模式來關閉 Service Workers,現在 about:debugging 頁面都會顯示警告訊息 (可參閱 bug 1266415)。
  • 「儲存空間檢測器 (Storage Inspector)」將逐步開放編輯功能。而針對此版本,我們為右鍵選單新增了 IndexedDB 資料庫的刪除功能 (可參閱 bug 1205123)。
  • 只要回應內容的容量小於 1KB,則網路檢測器可顯示確實的位元數 (可參閱 bug 1263945)。
  • 只要在檢測器面板中按下「h」快捷鍵,除了可隱藏目前所選的元素之外,也會以灰階狀態呈現該元素的標記 (可參閱 bug 1127572)。

 

感謝對此開發者版本有所貢獻的人。請儘快下載最新的開發者版本並提供寶貴意見給我們。

 

 

原文連結:Developer Edition 49: Network Request Stack Traces and more

 

 

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

對此文章發表回應

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