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

Kayce Basques

裝置模式中的 Moto G4 支援功能

啟用裝置工具列後，即可模擬 Moto G4 可視區域的尺寸 從「裝置」清單中選取。

模擬 Moto G4 可視區域

按一下「Show Device Frame」，即可在可視區域周圍顯示 Moto G4 硬體。

展示 Moto G4 硬體

相關功能：

  • 開啟「Command 選單」並執行 Capture screenshot 指令，擷取 包含 Moto G4 硬體 (啟用「顯示裝置頁框」後) 的可視區域。
  • 限制網路和 CPU，以便更準確地模擬行動裝置使用者的網路瀏覽情形 條件。

Chromium 問題 #924693

Cookie 相關更新

Cookie 窗格中已封鎖的 Cookie

「應用程式」面板中的「Cookie」窗格現在將封鎖的 Cookie 顏色設為黃色。

「應用程式」面板的「Cookie」窗格中已封鎖 Cookie

如要瞭解如何從網路存取類似的使用者介面，請參閱「對 Cookie 遭到封鎖的原因進行偵錯」一文 面板。

Chromium 問題 #1030258

Cookie 窗格中的 Cookie 優先順序

「網路和應用程式」面板中的 Cookie 表格現已包含「優先順序」欄。

Chromium 問題 #1026879

編輯所有 Cookie 值

您現在可以編輯「Cookie」表格中的所有儲存格，但「Size」欄中的儲存格除外 欄代表 Cookie 的網路大小 (以位元組為單位)。詳情請參閱欄位一節。 。

編輯 Cookie 值

複製為 Node.js 擷取內容以包含 Cookie 資料

在網路要求上按一下滑鼠右鍵，然後選取「複製」>以 Node.js 擷取形式複製以取得 fetch 運算式表示。

複製為 Node.js 擷取內容

Chromium 問題 #1029826

更準確的網頁應用程式資訊清單圖示

先前「應用程式」面板中的「資訊清單」窗格會執行自己的要求，以便 顯示網頁應用程式資訊清單圖示。開發人員工具現在會顯示與 Chrome 使用的資訊清單圖示完全相同。

資訊清單窗格中的圖示

Chromium 問題 #985402

將滑鼠遊標懸停在 CSS content 屬性上，即可查看未逸出值

將滑鼠遊標懸停在 content 屬性的值上，即可查看值的未逸出版本。

舉例來說，在這項demo中，檢查 p::after 虛擬元素發現已逸出 字串：

逸出字串

將滑鼠遊標懸停在 content 值上時，您會看到未逸出的值：

未逸出值

在控制台中顯示更詳細的來源對應錯誤

控制台現在會提供更詳細的來源對應載入或剖析失敗原因。先前只是 所提供的錯誤訊息，卻未說明問題為何。

控制台中的來源對應載入錯誤

這項設定用於停用檔案尾端的捲動功能

開啟「設定」，停用「偏好設定」>來源 >允許捲動超過 檔案來停用預設的 UI 行為，讓您可以在檔案結尾處捲動 「來源」面板。

歡迎參閱這項功能的 GIF。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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