開發人員工具摘要:高效率元素編輯、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 色調,因此我們已納入這些陰影。

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

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

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

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

黑箱測試

其餘服務

  • 無法使用「算繪」切換鈕嗎?顯示設定已移至開發人員工具主選單 (位於「更多工具」下方)。除了一般項目 (例如 FPS 計),我們也將「Emulate print Media」移至該頁面。
  • 不想在網址列中輸入 chrome://inspect 嗎?您現在也可以在「更多工具」下方的全新主選單中找到「檢查裝置」
  • 不小心關閉了其中一個可關閉的「導覽匣」分頁,例如「轉譯」或「搜尋」?你現在可以透過左側的新選單重新開啟這些檔案。

和往常一樣,歡迎透過 Twitter 或下方的留言告訴我們您的想法, 並向 crbug.com/new 回報錯誤。

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