開發人員工具摘要:高效率元素編輯、Service Worker 偵錯和質感設計欄

保羅巴考斯
Paul Bakaus

請使用 DOM 面板的新內容選單,有效率地編輯節點。直接透過「資源」面板對服務工作站進行偵錯。選擇顏色挑選器中的所有 Material Design 色調。Blackbox JS 程式庫變得更容易。

DOM 面板全新改良的內容選單

新建 DOM 內容選單

我們分析了 DOM 面板中最常使用的動作,並歸納出右鍵內容選單應井然有序且井然有序。

現在,您可以更輕鬆地快速隱藏或刪除元素、觸發特定狀態 (例如 :active 或 :hover 或編輯其 HTML)。如果使用觸控板,且不想再按右鍵,請改為按一下所選元素旁的三點圖示。

透過「資源」面板對 Service Worker 進行偵錯

設定完畢後,服務工作人員真是太棒了,但可能很難在一開始時就要換行。這個問題比較嚴重,是因為必須離開開發人員工具,並在新的瀏覽器視窗中開啟 chrome://serviceworker-internals/。

資源中的 Service Worker

然而今非昔比!現在您可以直接透過「資源」面板,對目前網域的 Service Worker 進行偵錯。這項功能仍在開發中,但與上一期的進展相比已大幅改善。

所有顏色:顏色挑選器中的 Material Design 陰影

幾週前,我們為調色盤新增了 Material Design 調色盤,在立即可用的主要和粗體顯示顏色。如要實際設計整頁,您不一定需要所有 Material Design 色調的完整存取權,

如要顯示陰影,請長按任一主要顏色,然後按一下另一色。

透過設定更輕鬆地使用 Blackbox JavaScript 程式庫

JavaScript 黑箱已推出一段時間,但並不容易發現。你可以為網頁上的指令碼加上黑邊,將焦點放在你編寫的程式碼 (並隱藏所有包裝程式碼)。

這時已移至「設定」。試試看:

黑箱作業

精選應用程式

  • 無法存取「轉譯」切換鈕嗎?轉譯設定已移至開發人員工具主選單 (位於「更多工具」底下)。除了一般考量因素 (即 FPS 計量器) 以外,我們也將「模擬列印媒體」移至該工具。
  • 不想在網址列中輸入 chrome://inspect 嗎?您現在也會在「更多工具」下方的新主選單中找到「檢查裝置」
  • 不小心關閉了其中一個可關閉的導覽匣分頁,例如「轉譯」或「搜尋」?現在,您可以使用左側新選單重新開啟這些分頁。

一如以往,歡迎透過 Twitter 或下方的留言與我們分享想法,並將錯誤提交至 crbug.com/new

下個月見!
Paul Bakaus 與開發人員工具團隊