Chrome 118

Elements > Styles 中自定義屬性查看

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

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

搜索增強(qiáng)

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

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

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

Sources 面板改進(jìn)

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

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

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

輔助功能改進(jìn)

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

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

Chrome 117

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

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

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

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

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

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

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

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

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

隱藏Chrome擴(kuò)展請求

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新顏色

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

Chrome 116

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

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

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

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

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

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

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

要配置線性時(shí)間函數(shù)，點(diǎn)擊線性選擇器按鈕。要添加控制點(diǎn)，請?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)先級，并確保最有價(jià)值的數(shù)據(jù)不會(huì)被刪除。每個(gè)存儲(chǔ)桶可以存儲(chǔ)與已建立的存儲(chǔ)API（如IndexedDB和CacheStorage）相關(guān)的數(shù)據(jù)。

打開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è)覆蓋層，在元素視口的頂部顯示列、行及其編號。

查看選擇器特異性

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

查看自定義 CSS 屬性值

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

Sources 面板改進(jìn)

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

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

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

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

默認(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ān)閉跳過，勾選"Show ignore-listed frames"。
• 在 Console 中，在堆棧跟蹤中折疊被忽略的幀。點(diǎn)擊"Show N more frames"進(jìn)行展開，點(diǎn)擊"Show less"進(jìn)行折疊。

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

Network > Response 格式美化

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

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

Chrome 114

支持調(diào)試 WebAssembly

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

這個(gè)實(shí)驗(yàn)特性可以讓開發(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)填寫表單。為了幫助開發(fā)者輕松調(diào)試與自動(dòng)填充相關(guān)的問題，Elements面板現(xiàn)在可以用紅色波浪線突出顯示這些問題。

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

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

Recorder 支持?jǐn)嘌?/h3>

現(xiàn)在，Recorder 面板允許在錄制過程中添加斷言，并提供所有運(yùn)行時(shí)數(shù)據(jù)。

要添加斷言，需要開始新的錄制，與頁面進(jìn)行交互，然后點(diǎn)擊"Add assertion"。Recorder 會(huì)插入一個(gè)waitForElement類型的步驟，可以進(jìn)行自定義。

還可以配置用來斷言的步驟，例如JavaScript中的條件語句、節(jié)點(diǎn)的子元素?cái)?shù)、元素可見性等。

Chrome 113

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

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

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

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

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

也可以添加自定義頭：

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

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

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

• 在控制臺跟蹤中，在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)

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

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

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

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

從之前的版本（112）開始，可以配置開發(fā)者工具控制臺在按下回車鍵時(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)編寫的文件

命令菜單中的快速打開對話框現(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)站的性能。

打開錄制，在點(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è)簡短的描述。

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

如果對CSS非常了解，可能會(huì)覺得這個(gè)提示很煩人?？梢怨催x Don't show 來關(guān)閉所有工具提示。

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

CSS 嵌套支持

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

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

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

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

現(xiàn)在，控制臺會(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)的腳本

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

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

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

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

Chrome 111

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

在Web上，將引入新的CSS顏色類型和色彩空間，DevTools 也引入了新工具來幫助開發(fā)人員創(chuàng)建、轉(zhuǎn)換和調(diào)試高清色彩。Styles面板現(xiàn)在支持CSS顏色級別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)來訪問轉(zhuǎn)換彈窗，或者在Styles面板中按住Shift鍵并點(diǎn)擊顏色進(jìn)行轉(zhuǎn)換。

在進(jìn)行轉(zhuǎn)換時(shí)，了解是否對顏色進(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))。

最后，顏色格式設(shè)置現(xiàn)已被棄用，為新的高清色彩格式騰出空間。

增強(qiáng)的斷點(diǎn)用戶體驗(yàn)

重新設(shè)計(jì)的斷點(diǎn)邊欄允許快速訪問常用功能，特別是停用、編輯和刪除斷點(diǎn)。

以下是一些亮點(diǎn)：

• 兩個(gè)暫停異常選項(xiàng)都移到了 斷點(diǎn) 窗格中，并標(biāo)上了文字，使其更易于解釋。

• 斷點(diǎn)按文件分組，按行號或列號排序，并且是可折疊的。

• 將鼠標(biāo)懸停在斷點(diǎn)或文件上時(shí)，可以使用新選項(xiàng)來停用、刪除和編輯斷點(diǎn)。

• 單擊編輯斷點(diǎn)按鈕打開斷點(diǎn)編輯器。從這里，可以輸入斷點(diǎn)條件或切換到日志點(diǎn)。

自定義 Recorder 快捷鍵

使用快捷鍵可以更快地記錄和重放用戶流程。Recorder 引入了幾個(gè)方便的快捷鍵，可加快用戶流程的錄制和重放速度。忘記快捷鍵了？沒問題，隨時(shí)點(diǎn)擊"?"按鈕查看所有快捷鍵。

也可以通過Settings菜單自定義這些快捷方式。

如果正在使用其他面板中，并且想要開始錄制用戶流程，可以使用DevTools中的命令菜單中的"Create a new recording"命令來開始錄制。

在 Application 面板中重新組織緩存

現(xiàn)在可以在 Application 面板的 Cache 部分找到 Cache Store ，而 Back/forward cache已移至Background Services部分。