大家好 我是Jazzlyn 貝奇讓我帶大家看看 Chrome 910 DevTools的最新功能耶 好消息 DevTools新加了全新的CSS Flexbox Debugging工具讓你能輕鬆調適CSS Flexbox的佈局當一個HTML元素含有Display Flex或Display InLive Flex CSS的時候元素旁邊會出現一個Flex的徽章點擊一下 網頁將會出現Flex Overlay扣發出該元素的Flexbox佈局在Styles pane裡你可以點擊在Display Flex或Display InLive Flex旁邊的小圖像打開Flexbox編輯器你可以利用這個Flexbox的編輯器快速地更改任何Flex的屬性趕快試試另外Layout片中也新增了Flexbox的Section列出所有網頁裡的Flexbox元素你可以同時選擇幾個元素進行測試DevTools也新加了CoreWapVitals Overlay令網頁效能的測量更視覺化CoreWapVitals是谷歌提倡的使用者體驗量化方式它旨在提供你一些參考指標幫助你優化用戶體驗想要更深入了解請瀏覽Vat.dev slash vitals打開Command菜單 執行Show Rendering指令然後勾選CoreWapVitals的Checkbox網頁中會出現三個指標Largest Contentful Pane顯示網站初次載入的速度First Input Delay顯示網站互動的順暢程度Cumulative Layout Shift顯示網頁元件視覺的穩定性我在視頻下方給大家提供了連接讓大家能更深入的了解每個指標DevTools在Console的狀態欄中加入了新的 Issue Call 按鈕這個按鈕替代了原本在Console裡的 Issues 信息打開Console 點擊 Issue Call 按鈕就可以打開 Issues tab進一步了解 Issue 詳情了新的Trust Dockence Pane為大家列出所有現實瀏覽器的Trust DockenceTrust Dockence 是一個新的API主要是幫助大家對抗網絡詐騙確保用戶的真實性以及防止Passive Tracking想知道如何使用這個API建議大家去 web.dev.trust-dockence 查看打開Applications Panel在Storage 菜單中選擇Trust Dockence Pane這裡你可以看到每個 Issue Call 的Trust Dockence Pane以及Trust Dockence 的 Issue CallDev2 新增的模擬CSS Color Gamut 媒體特性功能讓你模擬以及測試瀏覽器和輸出裝置所支援的橙色範圍比方說 如果輸出匹配Galagamut P3 的媒體特性就代表用戶的設備 資源Display P3 的色域打開Command菜單 執行 Show Rendering 的指令從Emulate CSS Media Feature Color Gamut 下拉菜單中選擇其中一個選項接下來 為大家介紹一下幾個Progressive Web Apps 的改進打開ConsoleDev2 現在展示了更詳細的PWA 安裝警告信息外加一個文檔連接幫助大家了解以及解決相關的安裝問題另外 打開Applications Panel選擇Manifest Pane如果你的Manifest Description超過了324個字Dev2 現在會展示警告信息來提示你同時 如果你的PWA 截圖不符合設定標準Manifest Pane 也會展示警告信息來提示你如何更改預知到更多PWA 截圖屬性的設定請瀏覽 Web.dev.ad-manifest最後 給大家一個小小的貼士你知道嗎你可以把顏色選擇器裡的顏色盤預覽更改為 CSS Variables 預覽怎麼說呢比如 你在 CSS 裡定義了一些 Custom Variables 的顏色現在 打開一個顏色選擇器一般來說 顏色盤預覽會列出所有你現在網頁的顏色擴展顏色盤預覽的部分在這裡 你可以選擇把顏色盤預覽更改為 Material 設計自定義設計 或 CSS Variables 設計點擊 CSS Variables 的選項現在 預覽色盤已經更改為 CSS Variables嘗試選擇一個顏色顏色值將會更改為 CSS Variables而非一般的顏色嘛這是一個很不錯的小功能吧好了 其實 Chrome DevTools 90還有更多的新功能更往常一樣你可以點擊視頻下方的連結打開我為大家準備的更新文檔以及相關資訊感謝您的觀看我們六個星期後 Chrome 911 再見