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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

錄音工具更新

支援重播擴充功能

錄製工具推出自訂重播選項的支援功能，您可以透過擴充功能將這些選項嵌入開發人員工具。

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

自訂重播 UI。

如要依需求自訂錄製器並與工具整合，不妨考慮自行開發擴充功能：請參閱 chrome.devtools.recorder API 和更多擴充功能範例。

Chromium 問題：1400243。

使用穿透選取器錄製

除了自訂、CSS、ARIA、文字和 XPath 選取器，您現在也可以使用穿透選取器進行錄製。這些選取器的運作方式與 CSS 選取器相同，但也可以穿透陰影根。

在含有 Shadow DOM 的頁面上開始新的錄製作業，並在「要錄製的選取器類型」中勾選 核取方塊。 Pierce。記錄您與 shadow DOM 中元素的互動情形，並檢查對應的步驟。

將錄音工具設為使用穿透式選取器；穿透式選取器的實際運作情形。

Chromium 問題：1411188。

匯出為 Puppeteer 指令碼，並附上 Lighthouse 分析

錄音工具推出了新的匯出選項：Puppeteer (包括 Lighthouse 分析)。您可以使用 Puppeteer 自動化操作及控制 Chrome。Lighthouse 可協助您擷取及改善網站成效。

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

匯出 Puppeteer (包括 Lighthouse 分析)。

執行 Puppeteer 指令碼，即可在 flow.report.html 檔案中取得 Lighthouse 報表。

在 Chrome 中開啟的 Lighthouse 報告。

取得擴充功能

探索可自訂錄影器體驗的選項，例如使用自訂匯出選項。在錄製內容中，依序按一下 。「匯出」 >「取得擴充功能」，即可取得錄製器的擴充功能。

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

歡迎將自己的擴充功能加入錄影器擴充功能清單。期待看到你的內容出現在名單中！

Chromium 問題：1417104、1413168。

元素 > 樣式更新

CSS 說明文件

您每天查詢 CSS 屬性說明文件的次數為何？當您將滑鼠游標懸停在資源上時，元素 > 樣式窗格現在會顯示簡短說明。

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

工具提示中還有一個「瞭解詳情」連結，可帶您前往這項屬性的 MDN CSS 參考資料。

如果您熟悉 CSS，可能會覺得工具提示很麻煩。如要全部關閉，請勾選「不要顯示」核取方塊。。

如要重新開啟這些功能，請依序選取 。「設定」 >「偏好設定」 >「元素」 > 核取方塊。「顯示 CSS 說明工具提示」。

Chromium 問題：1401107。

CSS 巢狀結構支援

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

Chromium 問題：1172985。

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

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

變更了控制台顯示中斷點觸發訊息的方式：現在會顯示圖示和適當的來源連結。

控制台現在會提供適當的錨點連結，可連至原始檔案中的中斷點，而非 Chrome 在 V8 上執行任何 JavaScript 時所建立的 VM<number> 指令碼。

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

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

Chromium 問題：1027458。

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

為協助您專注在程式碼的重要部分，您現在可以直接在「Sources」 >「Page」窗格中的檔案樹狀結構中，將不相關的指令碼加入「Ignore List」。

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

資料夾和指令碼的內容選單，其中包含與忽略相關的選項。

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

已加入忽略清單的腳本和資料夾會顯示為灰色，您可以透過「更多選項」下拉式選單中的實驗功能選項隱藏這些項目。

如果您選取了忽略的劇本，系統會透過「設定」按鈕，將您帶往 。「設定」 >「忽略清單」。您也可以透過 三點圖示選單。 > 隱藏忽略清單中的來源 實驗功能。，在檔案樹狀結構中隱藏已忽略的來源。

Chromium 問題：883325。

開始淘汰 JavaScript 分析器

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

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

Profiler 頂端的淘汰橫幅。

請使用「效能」面板，而非「分析器」來剖析 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 做為預設模擬裝置。DevTools 將此裝置新增至 。 的「設定」 >「裝置」。

裝置清單中的 Moto G Power。

Chromium 問題：772558。

控制台警告，要求您移除無操作服務 worker 擷取處理常式

Chrome 112 會略過無操作 (no-op) Service Worker 擷取處理常式，因為這些處理常式可能會減緩導覽速度，但沒有任何用途。網站不再需要這類處理程序，即可符合漸進式網頁應用程式的資格。

控制台現在會在網站上找到無操作值擷取處理常式時顯示警告。建議移除。

無操作擷取處理程序，以及控制台中的對應警告。

Chromium 問題：1347319。

其他精選內容

以下是這個版本中值得注意的修正項目：

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

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。