開發人員工具會變暗、使用 @keyframe 編輯,以及更聰明的自動完成功能

保羅巴考斯
Paul Bakaus

瞭解開發人員工具如何運用更聰明的控制台自動完成功能,減少打字次數、如何直接在「樣式」窗格中編輯 @keyframe 規則、充分運用 CSS 自訂變數,以及如何加入暗面。

控制台提供更聰明的自動完成功能

如果您和我及其他許多公司一樣,您可以在控制台中輸入指令來對應用程式進行偵錯、看看應用程式無法正常運作、反覆測試,然後再輸入一次,然後再次執行。為解決這個問題,我們已自動填入你先前輸入的完整陳述,例如:

自動完成

直接在「樣式」窗格中編輯 @keyframe 規則

當我們在開發人員工具中導入動畫檢查器和加/減速編輯器時,由於「樣式」窗格中從未顯示以 @keyframe 為基礎的 CSS 動畫,因此這種操作不會造成轉換效果。好消息是,現在這才是過去了,勇敢展現自我吧!歡迎透過我們的推文影片預覽。

支援自訂 CSS 屬性

開發人員工具中的自訂 CSS 屬性

CSS 功能相當好用,其中一項功能是自訂變數,可在 Chrome 49 版中推出。確保 DevTools 支援完整的功能,所以如果您之前已經在 Sass 中使用變數,不妨試試看原生變數,因為它們可讓您透過「Styles」窗格即時編輯屬性,並立即更新相依元素。

開發人員工具的深色主題

深色主題的實際使用狀況

我們終於提出要求,希望在過去幾年間收到數十次提出的要求。您現在可以在開發人員工具中選擇黑暗面。前往開發人員工具設定,將主題設為深色模式,盡情體驗。我認為這項功能目前仍在測試階段,因為很多都是自動產生的。因此,如果您發現有改善空間的地方,請務必告訴我們

精選應用程式

  • 現在只要按一下整個「控制台」分頁標籤,主控台導覽匣就會自動收合。
  • 「來源」中的檔案樹狀結構有了全新圖示和全新分組功能,已經大幅更新

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

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