What's 開發人員工具的新功能 (Chrome 118)

「元素」>「樣式」中的自訂屬性新專區

「元素」面板現在支援 @property CSS at-rule。您可以明確定義 CSS 自訂屬性，並在樣式表中註冊這些屬性，不必執行任何 JavaScript。

如要檢查已註冊的自訂屬性，請依序點選「元素」 >「樣式」，然後將游標懸停在屬性名稱上，即可在工具提示中查看屬性描述元。在工具提示中，按一下連結即可在可收合的 @property 區段中查看已註冊的資源。

Chromium 問題：1471102、1471103、1471105。

進一步改善本機覆寫項目

延續舊版的改善措施，本機覆寫現在可執行下列操作：

• 在「來源」 >「頁面」中，當您在來源對應檔案上按一下滑鼠右鍵並選取「覆寫內容」時，開發人員工具會顯示對話方塊，將您帶往原始來源。來源對應檔案的內容無法覆寫。

  

• 「網路」面板會新增「有覆寫」資料欄和對應的 has-overrides:[content|headers|yes|no] 篩選器。如要查看「有覆寫」欄，請按一下滑鼠右鍵表格標題，然後選取該欄。

  

• 在「來源」 >「覆寫」中，「刪除所有覆寫」選單選項已替換為「刪除」選項，且行為更精確。

  

先前的「刪除所有覆寫」功能會造成混淆，因為該功能只會刪除目前工作階段中有效的覆寫，並以 紫色圓點圖示標示。

新的「刪除」選項會先顯示警告訊息並提示確認，然後刪除您點選的資料夾及其所有內容。

如要還原先前的選項，請依序前往「設定」>「實驗」，勾選「暫時啟用『刪除所有覆寫』」。

Chromium 問題：1472952、1416338、1472580、1473681、1475668。

進階搜尋

搜尋結果現在會針對一行程式碼中找到的所有相符項目顯示一個項目。先前，每行程式碼只會顯示第一個相符項目。如果您在縮小檔案中搜尋，這項新功能就特別實用。點選搜尋結果後，檔案會在編輯器中開啟，且系統會將相符內容捲動至畫面中，不只垂直捲動，也會水平捲動。

此外，搜尋功能也大幅提升速度。請觀看下方的影片，比較前後差異 (左側為前，右側為後)。

最後，搜尋功能現在支援忽略清單，不會顯示忽略檔案的結果。

Chromium 問題：1468875、1472019。

改良後的「來源」面板

「來源」面板中的工作區經過簡化

「來源」面板中的「工作區」功能經過簡化，現在提供以下功能：

• 命名方式一致：最明顯的變更就是「來源」>「檔案系統」窗格已重新命名為「工作區」。這個窗格中的各種 UI 文字現在更清楚，且沒有多餘的內容。
• 簡化設定程序。更清楚地查看拖曳資料夾的提示，或按一下連結選取資料夾。

透過「來源」 >「工作區」，您可以將在開發人員工具中進行的變更直接同步到來源檔案。

查看新設定和工作流程的實際運作情形：

Chromium 問題：1473771、1473880、1473963、1474686、1474687。

重新排序「來源」中的窗格

現在可以拖曳 Sources 面板左側的窗格，重新排序窗格，就像重新排序其他面板、分頁和窗格一樣。

Chromium 問題：1473758。

更多指令碼類型的語法醒目顯示和美化列印功能

「來源」面板現在可以：

• 在下列指令碼類型中，以美觀格式列印內嵌 JavaScript：module、importmap、speculationrules。
• 醒目顯示 importmap 和 speculationrules 指令碼類型的語法，這兩種指令碼都包含 JSON。

如要進一步瞭解推測規則，請參閱「在 Chrome 中預先算繪網頁，以便即時瀏覽網頁」。

Chromium 問題：1473875。

模擬 prefers-reduced-transparency 媒體功能

Chrome 118 現在支援 prefers-reduced-transparency 媒體功能。這項功能可讓開發人員根據使用者在 OS 中選取的偏好設定調整網頁內容，例如 macOS 的「減少透明效果」設定。

如要模擬這項媒體功能，請開啟「Rendering」分頁，然後向下捲動至該功能。

Chromium 問題：1424879。

Lighthouse 11

「Lighthouse」面板現在會執行 Lighthouse 11。最值得一提的是，這個版本移除了舊版導覽功能，新增了無障礙稽核，並變更了無障礙類別的評分方式。

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

Chromium 問題：772558。

無障礙功能再進化

開發人員工具現在支援更多導覽按鍵：

• CSS 總覽：使用向上鍵和向下鍵瀏覽左側邊欄中的各個專區。
• 記憶：在左側邊欄中，使用 Tab 鍵將焦點移至快照旁的「儲存」按鈕，然後按下 Enter 鍵選取資料夾。

此外，我們也修正了幾個螢幕閱讀器播報問題。

Chromium 問題：1470401、1471301、1474108、1468631。

其他亮點

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

• 網路：熱門資源類型的新圖示：media、wasm、websocket、manifest、fetch/xhr、json (1466298)。
• 許多 UI 元素中的 Material 3 顏色都已更新，尤其是「元素」和「效能」面板 (1456690、1472243)。
• 問題現在會保留導覽期間的 Cookie 問題 (1466601)。
• 應用程式 > 預先載入的各項改善措施，最明顯的包括可排序的格線和修訂的規則集詳細資料 (1410709)。
• 通訊協定監控器的指令編輯器進行多項改良，最值得一提的是：輸入錯誤時會顯示警告、可編輯已傳送的指令、可編輯沒有預先定義鍵的物件參數、支援參考未定義的列舉、支援沒有型別參考的物件、可依子字串比對篩選指令等 (1448050)。
• 成效火焰圖的圓餅圖總計方塊會加上邊框 (1470147)。
• 「來源」現在不會將破折號視為 CSS 中的字元 (1471354)。
• 自動完成功能現在一律會在結尾排序 CSS 相關關鍵字。
• 規則運算式篩選器現在支援空格 (1346936)。
• 元素修正了媒體查詢功能偵測 (1472693)。

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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