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

Sofia Emelianova
Sofia Emelianova

「元素」中自訂屬性的新專區 >風格

「元素」面板現在支援 @property CSS at-rule。您可以運用這項功能,明確定義 CSS 自訂屬性,並在樣式表中註冊這些屬性,完全不必執行 JavaScript。

如要檢查已註冊的自訂屬性,請依序點選「元素」>樣式:將滑鼠遊標懸停在屬性名稱上,即可在工具提示中查看描述元。按一下工具提示中的連結,即可在可收合的 @property 部分中查看已註冊的屬性。

Chromium 問題:147110214711031471105

更多本機覆寫功能改善項目

為延續舊版的改善項目,本機覆寫現在會執行下列操作:

  • 在「來源」中 >頁面:當您對來源對應的檔案按一下滑鼠右鍵,然後選取「Override content」,開發人員工具會顯示對話方塊,將您導向原始來源。無法覆寫來源對應檔案的內容。

    對話方塊會將您導向原始程式碼,而非來源對應檔案。

  • 「網路」面板會取得新的「含有覆寫值」欄和對應的 has-overrides:[content|headers|yes|no] 篩選器。如要查看「含有覆寫值」欄,請在表格標題上按一下滑鼠右鍵並選取。

    篩選「has-overrides:yes」將「包含覆寫值」。

  • 在「來源」中 >覆寫:[刪除所有覆寫值] 選單選項已替換成「刪除」選項和精確行為。

    取代「刪除所有覆寫項目」前後的比較刪除

先前的「刪除所有覆寫項目」設定只刪除目前工作階段中有效 (以 已儲存。 紫色點圖示標示) 的覆寫值,讓您感到困惑。

新的「Delete」(刪除) 選項會先顯示警告訊息和提示確認,接著刪除您點選的資料夾及其所有內容。

如要恢復先前的選項,請在 。「設定」中勾選 核取方塊。「啟用『刪除所有覆寫』項目」>實驗

Chromium 問題:1472952141633814725801473681 1475668

「搜尋」結果現在會根據一行程式碼中找到的所有相符項目顯示項目。以往,這個程式碼只會顯示每一行程式碼的第一個相符項目。當你搜尋壓縮的檔案時,這項新行為特別實用。當你點選搜尋結果時,系統會在編輯器中開啟檔案,並同時將相符的項目捲動至檢視畫面,不僅垂直方向也跟著水平方向捲動。

搜尋前後的比對結果與每行的相符。

此外,搜尋速度也大幅提升。下一部影片將說明前後 (左) 和之後 (右) 的比較。

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

Chromium 問題:14688751472019

改良版「來源」面板

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

「來源」面板中的工作區功能經過全新簡化:

  • 命名一致。最值得注意的是「來源」>「Filesystem」窗格已重新命名為「工作區」。此窗格中的各種 UI 文字現在更加清楚,沒有備援功能。
  • 改善設定。查看更多拖曳資料夾的提示,或按一下連結來選取資料夾。

來源 >在 Workspace 中,您可以將開發人員工具中的變更直接同步到來源檔案。

查看實際設定和工作流程的實際運作方式:

Chromium 問題:14737711473880147396314746861474687

重新排序來源中的窗格

您現在可以拖曳「來源」面板左側的窗格,重新排列其順序,就像重新排列其他面板、分頁和窗格一樣。

Chromium 問題:1473758

適用於更多指令碼類型的語法醒目顯示和美化排版

「Sources」(來源) 面板現在可以:

  • 在下列指令碼類型中,美化內嵌 JavaScript:moduleimportmapspeculationrules
  • 醒目顯示 importmapspeculationrules 指令碼類型的語法,兩者都含有 JSON。

美化排版前後對照語法,以及醒目顯示推測規則指令碼類型的語法。

如要進一步瞭解推測規則,請參閱「在 Chrome 中預先轉譯頁面以進行即時網頁瀏覽」。

Chromium 問題:1473875

模擬偏好縮減透明度媒體功能

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

如要模擬這項媒體功能,請開啟「Rendering」分頁並向下捲動。

Chromium 問題:1424879

燈塔 11

Lighthouse 面板現在會執行 Lighthouse 11。最值得注意的是,這個版本會移除舊版導覽功能,並新增無障礙功能稽核項目,並變更無障礙類別的評分方式。

另請參閱完整變更清單。如要瞭解在開發人員工具中使用「Lighthouse」面板的基本概念,請參閱「Lighthouse:最佳化網站速度」。

Chromium 問題:772558

改善無障礙功能

開發人員工具現已支援更多瀏覽按鍵:

  • CSS 總覽:使用向上鍵和向下鍵瀏覽左側欄中的專區。
  • 記憶體:在左側欄中,將焦點移到含有 Tab 的快照旁的「儲存」按鈕,然後按下 Enter 鍵選取資料夾。

此外,我們修正了一些螢幕閱讀器公告問題。

Chromium 問題:1470401147130114741081468631

其他精選內容

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

  • 網路:熱門資源類型的新圖示:mediawasmwebsocketmanifestfetch/xhrjson (1466298)。
  • 在許多 UI 元素中,顏色會更新為 Material 3 顏色,特別是在「Elements」和「Performance」面板中 (14566901472243)。
  • 問題現在可在跨瀏覽期間保留 Cookie 問題 (1466601)。
  • 各種 應用程式 >經過改善的預先載入功能,其中最值得注意的格線和修改的規則集詳細資料 (1410709)。
  • 改善通訊協定監控中的指令編輯器,其中主要針對輸入錯誤顯示警告、編輯已傳送的指令、不含預先定義鍵的物件參數編輯器、支援未定義參照的列舉、不含類型參照的物件、依子字串比對篩選的指令等等 (1448050)。
  • 成效火焰圖會在圓餅圖的全部方塊周圍加上邊框 (1470147)。
  • 來源現在在 CSS 中,系統不會將破折號視為文字字元 (1471354)。
  • 自動完成功能現在一律會在結尾排序 CSS 相關關鍵字。
  • 規則運算式篩選器現在支援空格 (1346936)。
  • 元素:修正媒體查詢功能偵測 (1472693)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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