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

Sofia Emelianova
Sofia Emelianova

改善元素

新的 CSS 子格線徽章

「元素」面板會為子類別獲得新的 subgrid 徽章。這項功能目前在 Chrome Canary 中處於實驗階段。

如要檢查並偵錯子格的巢狀格線，進而沿用父項的音軌數量和大小，請按一下標記。會在可視區域切換在元素上方顯示欄、列和號碼。

子格標記和可視區域中的疊加層。

如需「元素」面板中所有徽章的清單，請參閱「徽章參考資料」。

Chromium 問題：1442536。

工具提示中的選取器詳細程度

在「元素」 >「樣式」中，將滑鼠遊標懸停在選取器名稱上，即可在工具提示中查看特異程度權重。

提供選取器明確程度權重的工具提示。

Chromium 問題：1204932。

工具提示中的自訂 CSS 屬性值

在「元素」 >「樣式」中，將滑鼠遊標懸停在自訂 CSS 屬性名稱上，即可顯示在工具提示中。

提供自訂 CSS 屬性值的工具提示。

開發人員工具團隊想表達你對 S 和 Suyan 的感激，促使他們做出這項改善。

Chromium 問題：1380779。

來源改善功能

CSS 語法醒目顯示

「來源」面板會針對預先處理的 CSS 檔案 (例如 SASS、SCSS 和 LESS) 顯示下列資訊：

  • 語法醒目顯示。
  • 支援內嵌編輯器。這些編輯器類似於「元素」 >「樣式」中的編輯器，例如「顏色挑選器」和「加/減速編輯器」。

改善「來源」中的 CSS 語法醒目顯示和內嵌編輯器支援。

Chromium 問題：1302261、1392085。

設定條件中斷點的快速鍵

您現在可以使用捷徑快速設定條件中斷點。如要開啟中斷點對話方塊，請按住 Command 鍵 (MacOS) 或 Control (Windows / Linux)，然後按一下「來源」 >「編輯器」左欄中的行數。

左欄的行號和中斷點對話方塊。

Chromium 問題：1405767。

應用程式 > 跳轉追蹤因應措施

Chrome 的「跳轉追蹤因應措施」實驗可讓您運用跳出追蹤技術，找出並刪除似乎執行跨網站追蹤的網站狀態。「應用程式」 >「背景服務」窗格會顯示新的「跳轉追蹤因應措施」分頁，可讓您手動強制追蹤因應措施，以及列出狀態已遭刪除的網站。

瞭解這項安全性功能：

  1. 在 Chrome 中封鎖第三方 Cookie依序前往「三點圖示選單。」>「設定」 >「隱私權和安全性」 >「Cookie 和其他網站資料」 >已勾選圓形按鈕。「封鎖第三方 Cookie」，然後啟用這項功能。。
  2. 在 chrome://flags 中，將「跳轉追蹤因應措施」實驗設為「已啟用刪除功能」。
  3. 檢查這個示範網頁，開啟 [應用程式] > [背景服務] > [跳轉追蹤因應措施]，按一下網頁上的退信連結，等待 (10 秒) Chrome 記錄退信，然後按一下 [強制執行] 立即刪除狀態。

「跳轉追蹤因應措施」會列出狀態刪除作業。

此外，「Issues」分頁會警告您即將刪除狀態。

Chromium 問題：1432303。

Lighthouse 10.2.0

「Lighthouse」面板現在執行 Lighthouse 10.2.0 版。值得注意的是，Largest Contentful Paint 檢查會產生資料表，其中包含模擬和開發人員工具節流的階段計算。另請參閱完整變更清單。

LCP 階段表格。

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

Chromium 問題：772558。

預設忽略內容指令碼

[設定]。 設定 > 忽略清單 > 核取方塊。 擴充功能插入的內容指令碼現已預設為啟用。

啟用此設定後：

  • 偵錯工具會忽略這類指令碼，不會停止這些指令碼擲回的例外狀況。
  • 「Sources」 >「Call Stack」窗格會略過已忽略的影格。如要關閉這裡的略過功能，請勾選 核取方塊。「顯示忽略清單中的頁框」。
  • 控制台會在堆疊追蹤中收合忽略的影格。按一下「顯示另外 N 個頁框」即可展開，按一下「顯示較少」可重新收合。

預設啟用擴充功能插入的內容指令碼。依序前往「設定」和「忽略清單」，即可找到這項設定。

此外，「忽略清單」中的核取方塊也會讓文字更清楚明瞭。

Chromium 問題：1440958、1364501。

預設「網路」>「回應美化」

「Network」(網路) >「Response」(回應) 窗格現在預設會壓縮回應主體，類似於「Sources」(來源) 面板。

已在網路分頁的「回應」視窗中啟用美化排版功能。

此外，SVG 檔案也會醒目顯示語法。

SVG 語法醒目顯示。

Chromium 問題：1382752、1385374。

其他精選內容

這個版本包含多項重要修正和改善項目：

  • [設定]。「設定」 >「裝置」：將「適用於 Pixel 6 的 Android 407 版 Facebook」新增至代理程式字串清單。
  • 網路：新增「清除網路記錄」捷徑 (1444991)：
    • MacOS：Command + K 鍵
    • Windows/Linux：Control + L 鍵
  • 移除「Recorder」 >「Recording N」 >「Performance Insights Panel」下拉式選單選項 (1414773)。
  • 無法載入的樣式表現在不會顯示在導覽工具的樹狀結構中 (1386059)。
  • 效能：修正可展開式「Interactions」音軌無法正確顯示的問題 (1432510)。
  • 元素：無法載入的樣式表，現在會以波浪號 (1440626) 標示底線。
  • 沒有相應語言的外掛程式時，Debugger 不會在 WebAssembly 中自動逐步執行 (1443342)。
  • 針對 CSS 檔案，同時移動遊標的快速鍵會還原為「Sources」(來源) >「Editor」(編輯器) (1241848)：
    • MacOS：Alt + 箭頭
    • Windows/Linux：Ctrl + 方向鍵

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59