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

Kayce Basques

裝置模式中的 Moto G4 支援

啟用裝置工具列後，您現在可以從「裝置」清單模擬 Moto G4 檢視區域的尺寸。

模擬 Moto G4 視窗

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

顯示 Moto G4 硬體

相關功能：

  • 開啟「指令選單」並執行 Capture screenshot 指令，即可擷取包含 Moto G4 硬體的檢視區畫面截圖 (在啟用「顯示裝置邊框」後)。
  • 節流網路和 CPU，以更準確地模擬行動使用者的網頁瀏覽情況。

Chromium 問題 #924693

Cookie 相關更新

「Cookie」窗格中的已封鎖 Cookie

應用程式面板中的「Cookie」窗格，現在會將遭封鎖的 Cookie 以黃色背景標示。

「Application」面板「Cookies」窗格中的已封鎖 Cookie

如要瞭解如何透過「Network」面板存取類似的 UI，請參閱「偵錯為何封鎖 Cookie」。

Chromium 問題 #1030258

「Cookie」窗格中的 Cookie 優先順序

網路和應用程式面板中的 Cookie 資料表現在包含「Priority」欄。

Chromium 問題 #1026879

編輯所有 Cookie 值

除了「Size」欄中的儲存格，Cookie 表格中的所有儲存格現在都可以編輯，因為該欄代表 Cookie 的網路大小，以位元組為單位。如需各欄的說明，請參閱「欄位」。

編輯 Cookie 值

複製為 Node.js 擷取內容，以便納入 Cookie 資料

按一下網路要求的滑鼠右鍵，然後依序選取「複製」 >「複製為 Node.js 擷取」，即可取得包含 Cookie 資料的 fetch 運算式。

複製為 Node.js 擷取內容

Chromium 問題 #1029826

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

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

「Manifest」窗格中的圖示

Chromium 問題 #985402

將滑鼠游標懸停在 CSS content 屬性上，即可查看未轉義的值

將滑鼠游標懸停在 content 屬性的值上，即可查看未轉義的值。

舉例來說，在這個示範中，當您檢查 p::after 疑似元素時，會在「樣式」窗格中看到已轉義的字串：

已轉義的字串

將滑鼠游標懸停在 content 值上時，您會看到未轉義的值：

未轉義的值

主控台提供更詳細的來源對應錯誤

控制台現在會進一步說明來源圖未能載入或剖析的原因。先前只會提供錯誤訊息，而未說明發生錯誤的原因。

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

停用捲動範圍超出檔案結尾的設定

開啟「設定」，然後依序點選「Preferences」 >「Sources」 >「Allow scrolling past end of file」，停用「Sources」面板中的檔案結尾可捲動的預設 UI 行為。

以下是這項功能的 GIF 檔案。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。