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

Paul Bakaus
Paul Bakaus

使用 DOM 面板的新內容選單,有效率地編輯節點。直接透過「資源」面板偵錯服務 worker。在色彩挑選器中選擇所有 Material Design 色調。更輕鬆地使用 Blackbox JS 程式庫。

DOM 面板全新的內容選單

新的 DOM 內容選單。

我們分析了 DOM 面板中使用頻率最高的動作,並得出結論,認為右鍵內容選單應簡化並重新整理。

您現在可以更輕鬆地快速隱藏或刪除元素、觸發特定狀態 (例如 :active 或 :hover),或編輯 HTML。如果你使用的是觸控板,不想費心按滑鼠右鍵,請改為點選所選元素旁的三個小圓點。

透過「Resources」面板偵錯 Service Worker

服務工作站設定完成後非常實用,但一開始可能很難理解。更糟的是,要對這些服務工作者進行偵錯,就必須離開開發人員工具,並在新瀏覽器視窗中開啟 chrome://serviceworker-internals/。

資源中的 Service Worker

但現在不必這麼麻煩了!現在您可以直接透過「資源」面板對目前網域的服務工作站進行偵錯。這項功能仍在開發中,但已大幅改善先前的現況。

所有顏色:色彩挑選器中的 Material Design 色調

幾週前,我們在顏色挑選器中新增了 Material Design 調色盤,讓您可以使用預設的鮮明原色。如要實際設計整個網頁,您必須具備所有 Material Design 色階的完整存取權,因此我們已將這些色階內建於系統中。

如要顯示色調,請長按任一原色,然後點選色調。

在設定中更輕鬆地使用 Blackbox JavaScript 程式庫

JavaScript 黑箱化現象已存在一段時間,但不容易發現。這項功能可讓您將網頁上的指令碼設為黑盒,只專注於您編寫的程式碼 (並隱藏所有包裝程式碼)。

我們已將這項功能移至「設定」頁面。歡迎試試看:

黑箱測試

其他最佳

  • 無法存取「算繪」切換按鈕?轉譯設定已移至「DevTools」主選單 (位於「更多工具」下方)。除了常見的「FPS 計量器」外,我們也將「模擬平面媒體」移至該處。
  • 是否厭倦在 Omnibox 中輸入 chrome://inspect?您現在也可以在「更多工具」下方的全新主選單中找到「檢查裝置」
  • 不小心關閉了其中一個可關閉的導覽匣分頁 (例如「算繪」或「搜尋」)?你現在可以透過左側的新選單重新開啟這些檔案。

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

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