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

Sofia Emelianova
Sofia Emelianova

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

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

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

Chromium 問題:1471102、1471103、1471105。

更多本機覆寫項目改善措施

舊版持續推出改善功能,現在本機覆寫可執行下列操作:

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

    這個對話方塊會將您帶往原始程式碼,而非來源對應檔案。

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

    在「有覆寫」欄中篩選「has-overrides:yes」值。

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

    將「Delete all overrides」替換為「Delete」前後的畫面。

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

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

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

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

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

搜尋前後的結果都會顯示每行的所有相符項目。

此外,搜尋功能也變得更快。在下方的影片中,你可以看到前後對照的結果 (左側為前,右側為後)。

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

Chromium 問題:1468875、1472019。

改良後的「來源」面板

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

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

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

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

觀看影片,瞭解新的設定和工作流程:

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

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

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

Chromium 問題:1473758。

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

「來源」面板現在可以:

  • 在下列指令碼類型中,以美觀格式列印內嵌 JavaScript:module、importmap、