大家好 我是Jazzaline讓我帶大家看看Chrome 89的Chrome DevTools有什麼新功能首先為大家講解一下這個新的Trusted Types Volations Debugging SupportNormXSS是最典型的網絡安全流動而Trusted Types是一個新的API可以幫助大家檢閱以及防止這些流動要知道如何用Trusted Types就去 red.dev slash trusted-types你現在可以在SourcesPanel裡Set Breakpoints 捕捉關於Trusted Types Volations的Acceptions在SourcesPanel 打開右手邊的 Debugger CyberPane確診 CSP Volation Breakpoints的部分Enable那個Trusted Types Volations的CheckboxRefresh一下你的網頁看現在的Code暫停在那個Acceptions裡大家有沒有注意到在那個行Code的最尾有一個小小的警告Icon你可以去這個新的Icon裡看看Acception Message如果要更新了解這些Acceptions的話可以click下去Essues Tab 會有更詳細的解釋幫助大家解決這些Essues下一個大家現在可以完整地capture這個Notescreenshot之前這個功能有一個Bug當你的Notes太大的時候超出了畫面你的Screenshot就會不見了下半段現在已經Fixed了沒這個問題了要Capture Notescreenshot的話在Elements Panel 打開右手邊的Element在彩蛋裡選擇Capture NotescreenshotNetwork Panel 新加了一個Trust Dockons的Tab你可以用這個Tab來Inspect Trust Dockons的Network Request跟大家稍微講解一下什麼是Trust DockonsTrust Dockons 是一個新的API主要是幫助大家對抗網絡詐騙確保用戶的真實性以及防止Passive Tracking要知道如何用這個API建議大家去wapp.dev.trust.dockons 看一下打開一個SupportTrust Dockons的網頁發送一個Trust Dockons的Network Request在Network Panel 選這個Trust Dockons的Network Request然後打開Trust Dockons Tab你就可以Inspect它的Values我們接下來還會加入更多Trust DockonsDebugging的SupportLighthouse Panel 已經更新為Lighthouse 7多了幾個新的AuditsGenerate 了個Report 之後Scroll 去Best Practices 的部分我們加入了新的 Issues Audit支援你所有在 Issues Panel 裡未解決的 IssuesPreload Largest Contentful Paint Image會檢測你有沒有預先Preload 在LCP Elements 上會用到的照片因為這樣會提升你的LCP時間PWA 的部分 有很大的變動這個Installable Group 現在是用跟Chrome's Installable Criteria 一樣的Capability Checks即是說 這些Signal跟Applications Panel 上的Manifest Paint裡面也是一樣的要知道所有Lighthouse的更新大家可以去看看 Release Note接下來 和大家介紹一下幾個Elements Panel 裡的新功能你現在可以用 DevTools 來Inspect CSS Target 狀態和大家講解一下 Target Sildoc Class 的用處比如說 我們的Page 裡有兩個ID的DIV當我們的 URL 含有 ID Hatch 的時候我們可以用 Target 來style 這個Element這個新的 DevTools 功能令你可以更容易地Test Target Styles不用 URL 換來換去 這麼麻煩在Elements Panel 裡Select 一個Element然後Togger 那個Element 的狀態Enable Target 選項去Inspect Target Styles新的Deblicate Element Shortcut可以幫助你快一點複製任何Element在Elements Panel 裡Right Click 一個Element在菜單裡選擇Deblicate Element新的Element 會複製在你選擇的那個Element 下面另外 你都可以用Keyboard Shortcuts 來複製ElementsWindows 的話用Shift or Not Arrow DownMac 的話 你就可以用Shift Options Arrow DownStyles Paint 會在Custom CSS Properties 裡顯示Color Picker在Styles Paint 裡一個小的顏色四方格會顯示在Custom CSS Properties 前面按下去就可以打開Color Picker又或者 你可以按著Shift Key然後按那個顏色四方格這樣 你可以改去不同的顏色規格DevTools 都加了幾個新的Shortcut幫你快速複製CSS Properties在Styles Paint 裡Right Click 一個CSS Class在這裡 我們加了三個新的Copy 選項不只這樣你都可以Right Click 任何的CSS PropertiesDevTools 都加了Shortcuts給你Copy 去的DeclarationProperties 或者Value和大家分享一下一個小小的Tips如果你發現你經常在Consol 裡打一樣的JavaScript Expression你可以考慮一下用Live Expression 的功能用Live Expression 的話你就可以打那個 Expression 一次然後編在Consol 上面Value 就會不停自己更新比如說 我們要查一下這個Page 裡全部的Section在Consol 裡按那個Create Live Expression 的Icon然後輸入 document.querySelectorAllSection.Lang接著 你就可以複製Section Element看 那個Expression 會自動自己Update是不是很方便呢好啦 Chrome DevTools 89 其實還有更多新功能大家可以在這條片的description 裡打開我的 blog post 以獲取更多詳情多謝收看六個禮拜之後 Chrome 90 再見