什麼是開發人員工具？#39;s 開發人員工具新功能 (Chrome 112)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

錄音工具更新

支援重播擴充功能

錄音工具支援自訂重播選項，您可以透過擴充功能嵌入開發人員工具。

試用範例額外資訊。選取新的自訂重播選項，以開啟自訂重播 UI。

自訂重播 UI。

如要根據自身需求自訂錄音工具，並與你的工具整合，建議你自行開發擴充功能：探索 chrome.devtools.recorder API，並查看更多擴充功能範例。

Chromium 問題：1400243。

使用 Pierce 選取器錄製

除了自訂、CSS、ARIA、文字與 XPath 選取器外，您現在還可以使用Pierce 選取器開始錄製。這些選取器的運作方式與 CSS 選取器類似，但也可能會透過陰影根層級移動。

使用 shadow DOM 在網頁上開始新的錄製，並在「Pierce」中勾選 核取方塊。「Pierce」Pierce。記錄您與 shadow DOM 中元素的互動，並查看對應的步驟。

設定「錄音工具」使用 Pierce 選取器；移動中的皮帶選取器。

Chromium 問題：1411188。

將 Lighthouse 分析結果匯出為 Puppeteer 腳本

錄音工具推出了一個新的匯出選項：Puppeteer (包括 Lighthouse 分析)。Puppeteer 可協助你自動處理及控制 Chrome。您可以透過 Lighthouse 擷取及改善網站成效。

開啟錄音檔，按一下「。」，選取新選項並儲存 .js 檔案。

匯出 Puppeteer (包括 Lighthouse 分析)。

執行 Puppeteer 指令碼，取得 flow.report.html 檔案中的 Lighthouse 報告。

Lighthouse 報告已在 Chrome 中開啟。

取得擴充功能

探索各種選項來自訂錄製工具體驗，例如使用自訂匯出選項。按一下。 匯出 >，取得錄音工具的擴充功能在錄音檔中取得擴充功能。

「匯出」下拉式選單中的「取得擴充功能」選項

你可以在錄音工具擴充功能清單中新增自己的擴充功能。期待您的頻道會員！

Chromium 問題：1417104、1413168。

元素 >樣式更新

CSS 說明文件

你一天內會查看 CSS 屬性相關說明文件幾次？元素 >現在當您將滑鼠遊標懸停在屬性上時，「Styles」窗格會顯示簡短說明。

含有 CSS 屬性說明文件的工具提示。

工具提示也包含「瞭解詳情」連結，會將您帶往這個屬性的 MDN CSS 參考資料。

如果你對 CSS 瞭若指掌，工具提示可能會令人困擾。如要關閉所有通知，請勾選 核取方塊。「不要顯示」。

如要重新啟用，請依序前往 。「設定」>偏好設定 >元素 >核取方塊。 顯示 CSS 說明文件工具提示。

Chromium 問題：1401107。

CSS 巢狀支援

元素 >「樣式」窗格現在可辨識 CSS 巢狀結構語法，並將巢狀樣式套用至正確的元素。

Chromium 問題：1172985。

在主控台中標記記錄點和條件中斷點

進一步改善強化中斷點使用者體驗後，Console 現在會標記由中斷點觸發的訊息：

調整了主控台顯示由中斷點觸發訊息的方式：提供圖示和正確的來源連結。

Console 現在會提供適當的錨點連結給來源檔案中的中斷點，而不是 Chrome 為執行 V8 任何 JavaScript 而建立的 VM<number> 指令碼。

按一下中斷點訊息旁邊的連結，即可直接跳至中斷點編輯器。

記錄點訊息旁的錨定連結，可開啟中斷點編輯器。

Chromium 問題：1027458。

在偵錯期間忽略不相關的指令碼

為協助您專注於程式碼中最重要的部分，您現在可以直接在「來源」> 的檔案樹狀結構中，將不相關的指令碼加入「忽略清單」「Page」(頁面) 窗格。

在任何指令碼或資料夾上按一下滑鼠右鍵，然後選取其中一個忽略相關選項。你可能會在清單中看到新增或移除指令碼或資料夾的選項。偵錯工具會忽略新增至清單的指令碼，並在呼叫堆疊中省略這些指令碼。

資料夾和指令碼的內容選單，以及忽略相關選項。

所有列入忽略清單的指令碼和資料夾在檔案樹狀結構中都會顯示為灰色。

已忽略的指令碼和資料夾會顯示為灰色，您可以透過「更多選項」下拉式選單中的實驗性選項來隱藏這些項目。

如果選取已忽略的指令碼，點按「設定」按鈕後， 。 設定 >忽略清單：您也可以使用 三點圖示選單。 >，在檔案樹狀結構中隱藏忽略的來源隱藏忽略清單中的來源 實驗功能。。

Chromium 問題：883325。

開始淘汰 JavaScript 分析器

自 Chrome 58 起，開發人員工具團隊計劃最終淘汰 JavaScript Profiler，讓 Node.js 和 Deno 開發人員使用「Performance」面板來分析 JavaScript CPU 效能。

此開發人員工具 (112 版) 會啟動 4 階段的 JavaScript 分析器淘汰。「JavaScript Profiler」面板現在會顯示相對應的警告橫幅。

Profiler 頂端的淘汰橫幅。

請使用「PerformanceProfiler」面板來剖析 CPU，不要使用「Profiler」Profiler。

詳情請參閱對應的 RFC 和 crbug.com/1354548 意見回饋。

Chromium 問題：1417647。

模擬低對比效果

「算繪」分頁新增選項至「Emulate 視覺缺陷」清單，也就是「降低對比度」。透過這個選項，即可瞭解對比敏感度較低的使用者在網站上呈現的樣貌。

所選的「模擬視覺缺陷」下方選取的對比度較低功能。

請注意，我們更新了清單選項，讓您知道這些選項所代表的色彩敏感度。

開發人員工具可以一次找出並修正所有對比問題。詳情請參閱讓網站更易於閱讀。

Chromium 問題：1412719、1412721。

燈塔 10

Lighthouse 面板現在會執行 Lighthouse 10.0.1。詳情請參閱 Lighthouse 10.0.1 的新功能。

如要瞭解在開發人員工具中使用「Lighthouse」面板的基本概念，請參閱「Lighthouse：最佳化網站速度」。

Lighthouse >。 >未勾選核取方塊。 舊版導覽現在預設為停用。這個選項會在導覽模式下使用舊版 Lighthouse 設定。

已停用舊版導覽。

Lighthouse 10 現在使用 Moto G Power 做為預設模擬裝置。開發人員工具已將這部裝置新增到「。」設定 >裝置：

裝置清單中的 Moto G Power。

Chromium 問題：772558。

控制台警告，移除免人工管理的服務工作站擷取處理常式

Chrome 112 略過免人工管理 (無作業) Service Worker 擷取處理常式，因為這類處理常式可能會導致瀏覽速度變慢，但無法發揮用途。網站不再需要這類處理常式，即可視為漸進式網頁應用程式。

如果主控台在您的網站上找到免人工管理擷取處理常式，就會顯示警告。建議移除。

免人工管理擷取處理常式和控制台中的相應警告。

Chromium 問題：1347319。

其他精選內容

這個版本包含以下重大修正項目：

  • 來源 >中斷點窗格現在會在不明確的檔案名稱旁顯示區分檔案路徑 (1403924)。
  • 「Performance」面板火焰圖中的「Main」部分現在會將 CpuProfiler::StartProfiling 指定為 Profiler Overhead (1358602)。
  • 開發人員工具改善後的自動完成功能：
    • 來源：與任何字詞保持一致 (1320204)。
    • 控制台：Arrow down 選取第一個建議，系統會顯示 Tab 提示 (1276960)。
  • 開發人員工具已新增事件監聽器中斷點，可在開啟文件子母畫面視窗 (1315352) 時暫停。
  • 開發人員工具會設定解決方法，將 Vue2 webpack 構件正確顯示為 JavaScript (1416562)。
  • 「Console」設定可用更適合的名稱：自動展開 console.trace() 訊息。(1139616)。

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

與 Chrome 開發人員工具團隊聯絡

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。