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

錄音工具更新

支援重播擴充功能

「記錄器」支援自訂重播選項，您可以透過擴充功能將這些選項嵌入開發人員工具。

試用範例擴充功能。選取新的自訂重播選項，開啟自訂重播使用者介面。

如要根據需求自訂錄製工具，並與工具整合，請考慮開發自己的擴充功能：探索 chrome.devtools.recorder API，並查看更多擴充功能範例。

Chromium 問題：1400243。

使用穿透選取器記錄

除了自訂、CSS、ARIA、文字和 XPath 選取器，您現在還可以使用穿透選取器錄製。這些選取器與 CSS 選取器類似，但也可以穿透陰影根。

在含有陰影 DOM 的頁面上開始新的錄製作業，然後在「要在錄製時使用的選取器類型」中勾選「穿透」。記錄您與 shadow DOM 中元素的互動，並檢查對應步驟。

Chromium 問題：1411188。

匯出為 Puppeteer 指令碼，並進行 Lighthouse 分析

「記錄器」推出新的匯出選項：「Puppeteer (包括 Lighthouse 分析)」。您可以使用 Puppeteer 自動執行及控制 Chrome。您可以使用 Lighthouse 擷取及改善網站效能。

開啟錄製內容，按一下「匯出」，選取新選項，然後儲存 .js 檔案。

執行 Puppeteer 指令碼，取得 flow.report.html 檔案格式的 Lighthouse 報表。

取得擴充功能

你可以探索各種選項，自訂錄音機體驗，例如自訂匯出選項。如要取得「錄音機」擴充功能，請在錄音中依序點選「匯出」 >「取得擴充功能」。

歡迎自行新增擴充功能至「記錄器擴充功能」清單。期待看到您的應用程式出現在榜單上！

Chromium 問題：1417104、1413168。

「元素」>「樣式更新」

CSS 說明文件

您每天會查閱幾次 CSS 屬性的說明文件？現在只要將游標懸停在屬性上，「元素」 >「樣式」窗格就會顯示簡短說明。

工具提示中也有「瞭解詳情」連結，點選後會前往 MDN CSS 參考資料，查看這項屬性。

如果你很熟悉 CSS，可能會覺得工具提示很煩人。如要全部關閉，請勾選「不要顯示」。

如要重新開啟，請依序勾選 「設定」 >「偏好設定」 >「元素」 > 「顯示 CSS 文件工具提示」。

Chromium 問題：1401107。

支援 CSS 巢狀結構

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

Chromium 問題：1172985。

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

為了進一步改善強化中斷點的使用者體驗，控制台現在會標示由中斷點觸發的訊息：

• console.* 呼叫，並在條件中斷點中顯示橘色問號 ?
• 記錄點訊息，並以粉紅色雙點 .. 表示

現在，控制台會提供來源檔案中斷點的正確錨點連結，而不是 Chrome 建立的 VM<number> 指令碼，以便在 V8 上執行任何 JavaScript 片段。

按一下斷點訊息旁的連結，即可直接前往斷點編輯器。

Chromium 問題：1027458。

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

為協助您專注於程式碼最重要的部分，您現在可以從「Sources」 >「Page」窗格的檔案樹狀結構，將不相關的指令碼新增至「Ignore List」。

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

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

如果選取遭忽略的指令碼，「設定」按鈕會將你帶往「設定」 >「忽略清單」。您也可以依序點選 >「隱藏忽略清單中的來源」，從檔案樹狀結構中隱藏忽略的來源。

Chromium 問題：883325。

JavaScript 分析器已開始淘汰

早在 Chrome 58，開發人員工具團隊就計畫最終要淘汰 JavaScript 分析器，並讓 Node.js 和 Deno 開發人員使用「效能」面板分析 JavaScript CPU 效能。

這個開發人員工具版本 (112) 會開始分四個階段淘汰 JavaScript 分析器。「JavaScript 分析器」面板現在會顯示相應的警告橫幅。

請使用「效能」面板分析 CPU，而非「分析器」。

如要瞭解詳情並提供意見，請參閱對應的 RFC 和 crbug.com/1354548。

Chromium 問題：1417647。

模擬低對比敏感度

「算繪」分頁的「模擬視覺障礙」清單新增「低對比敏感度」選項。選取這個選項後，您就能瞭解對比敏感度較低的使用者如何瀏覽網站。

請注意，清單選項已更新，會顯示選項代表的色彩不敏感度。

您可以使用開發人員工具一次找出並修正所有對比問題。詳情請參閱「提升網站可讀性」。

Chromium 問題：1412719、1412721。

Lighthouse 10

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

如要瞭解如何使用開發人員工具中的 Lighthouse 面板，請參閱「Lighthouse：提升網站速度」。

「Lighthouse」 > > 「舊版導覽」現在預設為停用。這個選項會在導覽模式中使用舊版 Lighthouse 設定。

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

Chromium 問題：772558。

控制台警告：移除無作業服務工作人員擷取處理常式

Chrome 112 會略過無運算 (無作業) 的 Service Worker 擷取處理常式，因為這類處理常式可能會拖慢導覽速度，但沒有實際用途。網站不再需要這類處理常式，才能成為漸進式網頁應用程式。

如果 Console 在網站上找到無運算元擷取處理常式，現在會顯示警告。建議移除。

Chromium 問題：1347319。

其他重點

這個版本的重要修正項目包括：

• 「來源」 >「中斷點」窗格現在會顯示有別於不明確檔案名稱 (1403924) 的檔案路徑。
• 「效能」面板火焰圖中的「Main」部分現在會將 CpuProfiler::StartProfiling 指定為 Profiler Overhead (1358602)。
• 開發人員工具改良自動完成功能：
  • 資料來源：持續完成任何字詞 (1320204)。
  • 控制台：Arrow down 選取第一個建議，建議會取得 Tab 提示 (1276960)。
• 開發人員工具新增了事件監聽器中斷點，讓您在開啟 Document Picture-in-Picture 視窗時暫停 (1315352)。
• 開發人員工具已設定因應措施，可將 Vue2 webpack 構件正確顯示為 JavaScript (1416562)。
• 控制台設定的名稱更貼切：自動展開 console.trace() 訊息。(1139616)。

下載預覽版

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。