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

Kayce Basques

裝置模式支援 Moto G4

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

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

相關功能：

• 開啟指令選單，然後執行 Capture screenshot 指令，擷取包含 Moto G4 硬體的檢視區塊螢幕截圖 (啟用「顯示裝置框架」後)。
• 節流網路和 CPU，更準確地模擬行動使用者的網頁瀏覽狀況。

Chromium 問題 #924693

Cookie 相關更新

「Cookie」窗格中已封鎖的 Cookie

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

另請參閱「偵錯 Cookie 遭封鎖的原因」，瞭解如何從「Network」面板存取類似的使用者介面。

Chromium 問題 #1030258

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

「網路」和「應用程式」面板中的「Cookie」表格現在會顯示「優先順序」欄。

Chromium 問題 #1026879

編輯所有 Cookie 值

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

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

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

Chromium 問題 #1029826

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

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

Chromium 問題 #985402

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

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

舉例來說，在這個示範中，檢查 p::after 虛擬元素時，您會在「樣式」窗格中看到逸出字串：

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

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

現在，如果來源對應無法載入或剖析，控制台會提供更詳細的說明。先前只會提供錯誤訊息，不會說明問題所在。

設定是否要禁止捲動超出檔案結尾

開啟「設定」，然後依序停用「偏好設定」 >「來源」 >「允許捲動超過檔案結尾」，即可停用預設的 UI 行為，避免在「來源」面板中捲動超過檔案結尾。

請參閱這項功能的 GIF 圖片。

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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