多圖預(yù)警，前端應(yīng)該掌握的瀏覽器調(diào)試技巧大揭秘！

作者：CUGGZ 2023-09-19 10:06:51

作為一名前端開(kāi)發(fā)，Chrome Devtools 是最常用的工具之一，它提供了很多實(shí)用的調(diào)試功能。Chrome 團(tuán)隊(duì)也在一直積極地更新新版本，本文就來(lái)盤點(diǎn)自 Chrome 110 以來(lái)，Devtools 中新增的實(shí)用調(diào)試功能，總有一個(gè)你用的上！

Chrome 118

Elements > Styles 中自定義屬性查看

該版本中，在Elements面板的Styles選項(xiàng)中新增了一個(gè)自定義屬性部分。通過(guò)使用@property CSS 規(guī)則，可以明確地定義CSS自定義屬性，并在樣式表中進(jìn)行注冊(cè)，而無(wú)需編寫任何JavaScript代碼。

通過(guò)在Elements > Styles中懸停在屬性名稱上，可以查看其描述符并通過(guò)工具提示來(lái)查看已注冊(cè)屬性的詳細(xì)信息。點(diǎn)擊工具提示中的鏈接可以展開(kāi)顯示已注冊(cè)屬性的部分。

搜索增強(qiáng)

現(xiàn)在搜索結(jié)果會(huì)顯示每行代碼中找到的所有匹配項(xiàng)。之前，每行代碼只顯示第一個(gè)匹配項(xiàng)。這種新的行為在搜索壓縮文件時(shí)特別有用。當(dāng)點(diǎn)擊搜索結(jié)果時(shí)，它會(huì)在編輯器中打開(kāi)文件，并且不僅在垂直方向上滾動(dòng)到匹配位置，還會(huì)在水平方向上進(jìn)行滾動(dòng)。

此外，搜索功能得到了速度提升。下面是改變前（左側(cè)）和改變后（右側(cè)）的對(duì)比。

另外，搜索功能現(xiàn)在支持忽略列表，并且不會(huì)顯示已忽略文件的搜索結(jié)果。

Sources 面板改進(jìn)

現(xiàn)在可以通過(guò)拖放的方式重新排列 Sources 面板左側(cè)的邊欄。

現(xiàn)在，Sources面板具備以下功能：

對(duì)于以下腳本類型，可以對(duì)其中的內(nèi)聯(lián)JavaScript進(jìn)行打印美化：module、importmap、speculationrules。
對(duì)于包含JSON的importmap和speculationrules腳本類型，可以突出顯示其語(yǔ)法。

輔助功能改進(jìn)

DevTools 現(xiàn)在支持更多的導(dǎo)航按鍵操作：

CSS Overview：使用上下箭頭在左側(cè)邊欄中導(dǎo)航到各個(gè)部分。
Memory：在左側(cè)邊欄中，使用Tab鍵聚焦到快照旁邊的保存按鈕，然后按Enter鍵選擇文件夾。

Chrome 117

更快地本地覆蓋網(wǎng)頁(yè)內(nèi)容

優(yōu)化了本地覆蓋功能，因此可以在沒(méi)有訪問(wèn)權(quán)限的情況下，通過(guò) Network 面板輕松模擬遠(yuǎn)程資源的響應(yīng)頭和網(wǎng)頁(yè)內(nèi)容。

要覆蓋網(wǎng)頁(yè)內(nèi)容，需要打開(kāi) Network 面板，右鍵點(diǎn)擊一個(gè)請(qǐng)求，然后選擇“Override content”。

如果已經(jīng)在DevTools中設(shè)置了本地覆蓋但將其禁用了，現(xiàn)在 DevTools 會(huì)自動(dòng)啟用本地覆蓋功能。如果尚未設(shè)置本地覆蓋，DevTool s會(huì)在操作欄中提醒你選擇一個(gè)文件夾來(lái)存儲(chǔ)覆蓋內(nèi)容，并授權(quán) DevTools 訪問(wèn)該文件夾。

設(shè)置完本地覆蓋后，DevTools 會(huì)進(jìn)入 Sources > Overrides > Editor 頁(yè)面，可以進(jìn)行網(wǎng)頁(yè)內(nèi)容的覆蓋操作。

請(qǐng)注意，在 Network 面板中，被覆蓋的資源會(huì)以“Saved.”的標(biāo)識(shí)顯示。將鼠標(biāo)懸停在圖標(biāo)上可以查看哪些內(nèi)容被覆蓋了。

覆蓋XHR和fetch請(qǐng)求內(nèi)容

現(xiàn)在還可以覆蓋XHR和fetch請(qǐng)求的內(nèi)容。通過(guò)這樣的覆蓋，即使后端和API尚未準(zhǔn)備好，也可以模擬API的響應(yīng)來(lái)調(diào)試網(wǎng)頁(yè)。

DevTools 目前支持以下請(qǐng)求類型的內(nèi)容覆蓋：圖像（例如avif、png）、字體、fetch和XHR、腳本（css和js）以及文檔（html）。對(duì)于不支持的類型，DevTools 現(xiàn)在會(huì)將“Override content”選項(xiàng)置灰。

隱藏Chrome擴(kuò)展請(qǐng)求

為了幫助開(kāi)發(fā)者專注于編寫代碼，因此，Network 面板新增了一個(gè)過(guò)濾器，過(guò)濾掉了可能在Chrome中安裝的擴(kuò)展程序發(fā)送的無(wú)關(guān)請(qǐng)求。要過(guò)濾掉所有發(fā)送到chrome-extension:// URL的請(qǐng)求，可以勾選“Hide extension URLs”選項(xiàng)。

此外，DevTools 現(xiàn)在不會(huì)嘗試加載擴(kuò)展程序的源映射文件，因此將不會(huì)看到與代碼無(wú)關(guān)的“無(wú)法加載源映射”警告。另外，由代碼導(dǎo)致的類似警告現(xiàn)在會(huì)顯示在Sources面板底部的信息欄中，而不是控制臺(tái)中顯示。

HTTP狀態(tài)碼可讀性更強(qiáng)

現(xiàn)在在請(qǐng)求的頭部中，HTTP狀態(tài)碼旁邊會(huì)顯示易于理解的文本，以便更快地了解請(qǐng)求的處理情況。以往只能看到數(shù)字狀態(tài)碼，現(xiàn)在還提供了相應(yīng)的可讀性更強(qiáng)的描述性文本，使得解讀和理解請(qǐng)求的處理結(jié)果更加方便。

還可以將鼠標(biāo)懸停在請(qǐng)求表中的狀態(tài)碼上，以查看相同的文本信息。

JSON 子類型響應(yīng)格式美化

現(xiàn)在在請(qǐng)求的響應(yīng)選項(xiàng)卡中，對(duì)于具有應(yīng)用程序/[子類型]+json MIME子類型（如ld+json、hal+json等）的請(qǐng)求，會(huì)正確解析響應(yīng)并提供更美觀的顯示效果。可以對(duì)響應(yīng)數(shù)據(jù)進(jìn)行格式化，使其更易讀和易于理解。以前可能只能以原始的、緊湊的形式展示 JSON 數(shù)據(jù)，而現(xiàn)在提供了更好的可視化格式化效果。

性能改進(jìn)：查看網(wǎng)絡(luò)事件的獲取優(yōu)先級(jí)變化

Performance 面板現(xiàn)在在網(wǎng)絡(luò)軌跡中的事件摘要中顯示兩個(gè)優(yōu)先級(jí)字段：初始優(yōu)先級(jí)和（最終）優(yōu)先級(jí)，而不僅僅是單一的優(yōu)先級(jí)。通過(guò)這個(gè)額外的字段，可以看到事件的獲取優(yōu)先級(jí)是否發(fā)生了變化，并調(diào)整下載順序。

此外，還可以在 Network 面板的優(yōu)先級(jí)列中找到相同的信息，并通過(guò)啟用“Big request rows”設(shè)置來(lái)查看。

默認(rèn)啟用的源代碼設(shè)置：代碼折疊和自動(dòng)文件顯示

現(xiàn)在，默認(rèn)情況下啟用了 Settings > Preferences > Code folding 選項(xiàng)。該選項(xiàng)允許折疊代碼塊。

如果需要折疊代碼塊，將鼠標(biāo)懸停在代碼塊開(kāi)始旁邊的行號(hào)上，然后單擊折疊圖標(biāo)即可。再次單擊{...}以展開(kāi)該代碼塊。

此外，Settings > Preferences > Automatically reveal files in the sidebar選項(xiàng)現(xiàn)在也默認(rèn)啟用。該設(shè)置使得在切換標(biāo)簽頁(yè)時(shí)，Sources -> Page 中的文件樹(shù)會(huì)選擇當(dāng)前在編輯器中打開(kāi)的文件。

在 Application 面板中調(diào)試預(yù)加載

Chrome 團(tuán)隊(duì)正在重新引入用戶可能導(dǎo)航到的未來(lái)頁(yè)面的完全預(yù)渲染。為了進(jìn)行調(diào)試，開(kāi)發(fā)者工具將在 Application 面板中添加Preloading 部分。新的預(yù)取和預(yù)渲染（統(tǒng)稱為“導(dǎo)航預(yù)加載”）使用了 Speculation Rules API，而不是基于鏈接的資源提示。

在下面的演示中，在 Application > Preloading 部分，可以檢查以下內(nèi)容：

Speculation Rules（規(guī)則推測(cè)）：列出當(dāng)前頁(yè)面上找到的所有規(guī)則集。
Preloads（預(yù)加載）：列出來(lái)自規(guī)則集的所有預(yù)取和預(yù)渲染的URL。
This Page（此頁(yè)面）：列出當(dāng)前頁(yè)面的預(yù)渲染狀態(tài)。

新顏色

DevTools 現(xiàn)在有一個(gè)與Chrome更好對(duì)齊的全新外觀，并使用了全新的配色方案。使用新顏色前后的對(duì)比如下圖所示。

Chrome 116

改進(jìn)缺失樣式表的調(diào)試

DevTools 進(jìn)行了多項(xiàng)改進(jìn)，可幫助您更快地識(shí)別和調(diào)試缺少樣式表的問(wèn)題：

Sources > Page tree 現(xiàn)在只顯示成功部署和加載的樣式表，以減少混淆。
Sources > Editor現(xiàn)在會(huì)對(duì)失敗的@import、url()和href語(yǔ)句進(jìn)行下劃線和內(nèi)聯(lián)錯(cuò)誤提示框的顯示。

控制臺(tái)現(xiàn)在除了提供指向失敗請(qǐng)求的鏈接外，還提供指向未能加載的樣式表引用的精確行號(hào)的鏈接。

Network 面板始終在"Initiator"列中提供了指向引用未能加載的樣式表的精確行號(hào)的鏈接。
Issues 面板列出了所有加載樣式表的問(wèn)題，包括損壞的URL、請(qǐng)求失敗以及錯(cuò)位的@import語(yǔ)句。

在Elements > Styles中的 Easing Editor（緩動(dòng)編輯器）中，現(xiàn)在支持線性時(shí)間函數(shù)。

使用 Easing Editor，可以輕松地通過(guò)點(diǎn)擊調(diào)整過(guò)渡時(shí)間函數(shù)和動(dòng)畫時(shí)間函數(shù)的值。在這個(gè)版本中，Easing Editor 得到了線性時(shí)間函數(shù)的支持。

要配置線性時(shí)間函數(shù)，點(diǎn)擊線性選擇器按鈕。要添加控制點(diǎn)，請(qǐng)?jiān)诰€上任意位置單擊。要?jiǎng)h除控制點(diǎn)，可以雙擊它。還可以選擇預(yù)設(shè)之一：linear, elastic, bounce, emphasized。

存儲(chǔ)桶支持和元數(shù)據(jù)視圖

Application > Storage部分現(xiàn)在支持存儲(chǔ)桶。存儲(chǔ)桶是彼此獨(dú)立的，因此可以為數(shù)據(jù)片段指定驅(qū)逐優(yōu)先級(jí)，并確保最有價(jià)值的數(shù)據(jù)不會(huì)被刪除。每個(gè)存儲(chǔ)桶可以存儲(chǔ)與已建立的存儲(chǔ)API（如IndexedDB和CacheStorage）相關(guān)的數(shù)據(jù)。

打開(kāi)DevTools，導(dǎo)航到Application > Storage > Indexed DB，并運(yùn)行代碼。DevTools 現(xiàn)在會(huì)顯示存儲(chǔ)桶及其內(nèi)容。選擇一個(gè)存儲(chǔ)桶以查看其元數(shù)據(jù)。

現(xiàn)在，統(tǒng)一的元數(shù)據(jù)視圖也適用于本地存儲(chǔ)（local storage）、會(huì)話存儲(chǔ)（session storage）和緩存存儲(chǔ)（cache storage）部分。

Chrome 115

新的 CSS 子網(wǎng)格標(biāo)志

Elements 面板中為子網(wǎng)格（subgrid）添加了一個(gè)新的標(biāo)志。這個(gè)功能目前在Chrome Canary中處于實(shí)驗(yàn)階段。要檢查和調(diào)試嵌套的子網(wǎng)格，它從父網(wǎng)格繼承軌道的數(shù)量和大小，點(diǎn)擊標(biāo)志即可。它會(huì)切換一個(gè)覆蓋層，在元素視口的頂部顯示列、行及其編號(hào)。

查看選擇器特異性

在Elements > Styles中，將鼠標(biāo)懸停在選擇器名稱上，可在工具提示中查看它的特異性權(quán)重（優(yōu)先級(jí)）。

查看自定義 CSS 屬性值

在Elements > Styles中，將鼠標(biāo)懸停在自定義CSS屬性名稱上，可以查看其取值。

Sources 面板改進(jìn)

Sources 面板對(duì)于預(yù)處理的CSS文件，例如SASS、SCSS和LESS，增加了以下功能：

語(yǔ)法高亮：可以對(duì)CSS代碼進(jìn)行語(yǔ)法突出顯示，提高可讀性。
內(nèi)聯(lián)編輯器支持：這些編輯器類似于Elements > Styles中的編輯器，例如顏色選擇器和緩動(dòng)編輯器。可以直接在 Sources 面板中進(jìn)行編輯，方便修改CSS樣式。

設(shè)置條件斷點(diǎn)的快捷方式

現(xiàn)在可以使用快捷方式更快地設(shè)置條件斷點(diǎn)。要打開(kāi)斷點(diǎn)對(duì)話框，請(qǐng)按住 Command (MacOS) 或 Control (Windows / Linux)，然后單擊 Sources > Editor 左側(cè)的行號(hào)。

默認(rèn)情況下忽略內(nèi)容腳本

現(xiàn)在 Settings > Ignore List > Content scripts injected by extensions默認(rèn)情況下是啟用的。啟用此設(shè)置后：

調(diào)試器會(huì)忽略這些腳本，并不會(huì)在其拋出的異常處中斷。
在"Sources > Call Stack"面板中，會(huì)跳過(guò)被忽略的幀。要在此處關(guān)閉跳過(guò)，勾選"Show ignore-listed frames"。
在 Console 中，在堆棧跟蹤中折疊被忽略的幀。點(diǎn)擊"Show N more frames"進(jìn)行展開(kāi)，點(diǎn)擊"Show less"進(jìn)行折疊。

此外，忽略列表的選項(xiàng)有了更清晰的文本。

Network > Response 格式美化

默認(rèn)情況下，Network > Response 現(xiàn)在會(huì)對(duì)壓縮過(guò)的響應(yīng)體進(jìn)行格式美化，與 Sources 面板類似。

此外，SVG 文件還具有語(yǔ)法突出顯示功能。

Chrome 114

支持調(diào)試 WebAssembly

Devtools 默認(rèn)開(kāi)啟 Settings > Experiments > WebAssembly Debugging: Enable DWARF support 。

這個(gè)實(shí)驗(yàn)特性可以讓開(kāi)發(fā)者在 Wasm 應(yīng)用中暫停執(zhí)行和調(diào)試 C 和 C++ 代碼，同時(shí)提供了所有的調(diào)試信息：

使用DWARF調(diào)試信息映射的原始源代碼。
可理解的函數(shù)名稱在調(diào)用堆棧中。
支持?jǐn)帱c(diǎn)等功能。

使用Elements面板和Issues標(biāo)簽調(diào)試自動(dòng)填充

Chrome的自動(dòng)填充功能可以根據(jù)保存的信息（如地址或支付信息）自動(dòng)填寫表單。為了幫助開(kāi)發(fā)者輕松調(diào)試與自動(dòng)填充相關(guān)的問(wèn)題，Elements面板現(xiàn)在可以用紅色波浪線突出顯示這些問(wèn)題。

要查看此功能，需要啟用設(shè)置：Settings > Experiments > Highlights a violating node or attribute in the Elements panel DOM tree 。

在DOM樹(shù)中將鼠標(biāo)懸停在突出顯示的問(wèn)題上，然后點(diǎn)擊"View issue"，就會(huì)打開(kāi)Issues標(biāo)簽頁(yè)，其中列出了所有檢測(cè)到的問(wèn)題并提供關(guān)于出錯(cuò)原因的線索。

Recorder 支持?jǐn)嘌?/h3>
現(xiàn)在，Recorder 面板允許在錄制過(guò)程中添加斷言，并提供所有運(yùn)行時(shí)數(shù)據(jù)。
要添加斷言，需要開(kāi)始新的錄制，與頁(yè)面進(jìn)行交互，然后點(diǎn)擊"Add assertion"。Recorder 會(huì)插入一個(gè)waitForElement類型的步驟，可以進(jìn)行自定義。
還可以配置用來(lái)斷言的步驟，例如JavaScript中的條件語(yǔ)句、節(jié)點(diǎn)的子元素?cái)?shù)、元素可見(jiàn)性等。

Chrome 113

覆蓋網(wǎng)絡(luò)請(qǐng)求響應(yīng)頭

現(xiàn)在可以在 Network 面板中覆蓋響應(yīng)頭。之前，需要訪問(wèn)Web服務(wù)器才能嘗試更改HTTP響應(yīng)頭。

通過(guò)響應(yīng)頭覆蓋，可以在本地原型化修復(fù)各種頭部，其中包括但不限于：

跨域資源共享頭
權(quán)限策略頭
跨域隔離頭

要覆蓋一個(gè)頭，可以導(dǎo)航至 Network > Headers > Response Headers，將鼠標(biāo)懸停在頭部的值上，點(diǎn)擊編輯，并進(jìn)行修改。

也可以添加自定義頭：

要在一個(gè)地方編輯所有的覆蓋設(shè)置，請(qǐng)編輯Sources > Overrides中的".headers"文件。在這個(gè)文件中，還可以點(diǎn)擊 Add override rule，使用通配符(*)來(lái)覆蓋多個(gè)請(qǐng)求。

Nuxt、Vite、Rollup 調(diào)試改進(jìn)

為了幫助開(kāi)發(fā)者在調(diào)試過(guò)程中更快地找出問(wèn)題，增強(qiáng)的堆棧跟蹤現(xiàn)在隱藏了來(lái)自 Nuxt 3.3 或更高版本生成的源代碼中的幀。DevTools會(huì)跳過(guò)這些幀：

在控制臺(tái)跟蹤中，在Show N more frames鏈接下方。
在"Sources > Call Stack"中，在Show ignore-listed frames下方。

為了實(shí)現(xiàn)這些改進(jìn)，DevTools、Nuxt、Vite 和 Rollup 團(tuán)隊(duì)合作采用了"X-Google-IgnoreList"源映射擴(kuò)展：

Nuxt 3.3 Release
Vite Server Options
Rollup Configuration Options

Elements > Styles 中 CSS 改進(jìn)

為了幫助開(kāi)發(fā)者更快地診斷CSS問(wèn)題，Styles 面板現(xiàn)在會(huì)在以下情況下劃掉CSS屬性和值：

當(dāng)CSS屬性無(wú)效時(shí)，會(huì)劃掉整個(gè)CSS聲明（屬性和值）。
當(dāng)CSS屬性有效的，但值無(wú)效時(shí)，只會(huì)劃掉值部分。

現(xiàn)在，[animation](https://developer.mozilla.org/docs/Web/CSS/animation)簡(jiǎn)寫 CSS 屬性中包含了指向?qū)?yīng) @keyframes 規(guī)則的鏈接，這樣可以更快地在 Styles 面板中導(dǎo)航。

新增控制臺(tái)設(shè)置：回車時(shí)自動(dòng)完成

從之前的版本（112）開(kāi)始，可以配置開(kāi)發(fā)者工具控制臺(tái)在按下回車鍵時(shí)應(yīng)用自動(dòng)完成建議。

默認(rèn)情況下，要接受自動(dòng)完成建議，可以按Tab鍵或右箭頭。為了也能夠使用回車鍵進(jìn)行自動(dòng)完成，需要啟用設(shè)置Settings > Console > Accept autocomplete suggestion on Enter.

此外，另一個(gè)設(shè)置的文本現(xiàn)在更加用戶友好：Treat code evaluation as user action.

命令菜單強(qiáng)調(diào)編寫的文件

命令菜單中的快速打開(kāi)對(duì)話框現(xiàn)在會(huì)將列入忽略列表的第三方文件變灰，以更加強(qiáng)調(diào)編寫的文件。

Chrome 112

使用 Lighthouse 分析導(dǎo)出為 Puppeteer 腳本

Recorder引入了一個(gè)新的導(dǎo)出選項(xiàng)：Puppeteer（包括 Lighthouse 分析）。使用Puppeteer，您可以自動(dòng)化和控制 Chrome。借助 Lighthouse 可以捕獲并提高網(wǎng)站的性能。

打開(kāi)錄制，在點(diǎn)擊下載按鈕。選擇 Export 選項(xiàng)，然后保存為 .js 文件。

運(yùn)行Puppeteer腳本，以獲得一個(gè)Lighthouse報(bào)告，并保存在flow.report.html文件中。

CSS 文檔

現(xiàn)在，Elements > Styles 面板在鼠標(biāo)懸停在屬性上時(shí)會(huì)顯示一個(gè)簡(jiǎn)短的描述。

工具提示中還有一個(gè)“ Learn more”鏈接，該鏈接會(huì)轉(zhuǎn)到該屬性的MDN CSS參考文檔。

如果對(duì)CSS非常了解，可能會(huì)覺(jué)得這個(gè)提示很煩人。可以勾選 Don't show 來(lái)關(guān)閉所有工具提示。

要重新打開(kāi)它們，就需要進(jìn)行如下設(shè)置：Settings > Preferences > Elements > Show CSS documentation tooltip。

CSS 嵌套支持

Elements > Styles 面板現(xiàn)在支持CSS嵌套語(yǔ)法，并將嵌套樣式應(yīng)用于相應(yīng)的元素。

在控制臺(tái)中標(biāo)記日志點(diǎn)和條件斷點(diǎn)

進(jìn)一步改進(jìn)增強(qiáng)的斷點(diǎn)用戶體驗(yàn)，控制臺(tái)現(xiàn)在標(biāo)記由斷點(diǎn)觸發(fā)的消息：

console.* 調(diào)用帶橙色問(wèn)號(hào)的條件斷點(diǎn)？
帶粉紅色兩個(gè)點(diǎn)的日志點(diǎn)消息..

現(xiàn)在，控制臺(tái)會(huì)給出適當(dāng)?shù)脑次募袛帱c(diǎn)的錨鏈接，而不再是Chrome創(chuàng)建的用于在V8上運(yùn)行任何JavaScript片段的VM<number>腳本。

單擊斷點(diǎn)消息旁邊的鏈接可直接跳轉(zhuǎn)到斷點(diǎn)編輯器。

調(diào)試時(shí)忽略不相關(guān)的腳本

為了幫助開(kāi)發(fā)者專注于代碼的關(guān)鍵部分，現(xiàn)在可以直接從Sources > Page面板上的文件樹(shù)中將不相關(guān)的腳本添加到"忽略列表"中。

右鍵單擊任何腳本或文件夾，然后選擇與忽略相關(guān)的選項(xiàng)之一。可能會(huì)看到將腳本或文件夾添加到列表中或從列表中移除的選項(xiàng)。調(diào)試器會(huì)忽略添加到列表中的腳本，并在調(diào)用堆棧中省略它們。

所有添加到忽略列表的腳本和文件夾在文件樹(shù)中都會(huì)顯示為灰色。

如果選擇了一個(gè)被忽略的腳本，點(diǎn)擊Configure按鈕會(huì)轉(zhuǎn)到 Settings > Ignore List。

Chrome 111

使用“Styles”調(diào)試高清顏色

在Web上，將引入新的CSS顏色類型和色彩空間，DevTools 也引入了新工具來(lái)幫助開(kāi)發(fā)人員創(chuàng)建、轉(zhuǎn)換和調(diào)試高清色彩。Styles面板現(xiàn)在支持CSS顏色級(jí)別4規(guī)范中提到的12種新色彩空間和7種新色域。

以下是使用color()、lch()、oklab()和color-mix()的CSS顏色定義例子。

使用 color-mix() 函數(shù)時(shí)，可以在Computed邊欄中查看最終顏色輸出。

顏色選擇器支持所有新的顏色空間，并有更多的功能。例如，點(diǎn)擊 color(display-p3 1 0 1) 的顏色色塊。還增加了一條色域邊界線，區(qū)分了 sRGB 和 display-p3 色域，以便更清楚地了解你所選顏色的色域。

DevTools 支持在不同的顏色格式之間進(jìn)行轉(zhuǎn)換。可以使用"更改顏色格式"圖標(biāo)來(lái)訪問(wèn)轉(zhuǎn)換彈窗，或者在Styles面板中按住Shift鍵并點(diǎn)擊顏色進(jìn)行轉(zhuǎn)換。

在進(jìn)行轉(zhuǎn)換時(shí)，了解是否對(duì)顏色進(jìn)行了裁剪以適應(yīng)空間尺寸非常重要。DevTools會(huì)在轉(zhuǎn)換后的顏色旁邊放置一個(gè)警告圖標(biāo)，提醒該顏色是否被裁剪。

此外，還可以使用新的快捷鍵從屏幕上拾取顏色。按下"c"鍵激活吸管工具，按下Escape鍵取消激活。吸管工具僅在sRGB色彩空間中采樣顏色。例如，如果嘗試采樣超出sRGB色彩空間的color(display-p3 1 0 1)顏色，吸管工具將會(huì)將該顏色裁剪為sRGB空間中最接近的顏色，即洋紅色(color(display-p3 0.92 0.2 0.97))。