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

Kayce Basques

Cookie 的新功能

偵錯 Cookie 遭封鎖的原因

記錄網路活動後，請選取網路資源，然後前往更新的「Cookies」分頁，瞭解為何封鎖該資源的請求或回應 Cookie。請參閱沒有 SameSite 的預設行為變更，瞭解為什麼在 Chrome 76 以上版本中，您可能會看到更多遭到封鎖的 Cookie。

「Cookie」分頁。

「Cookie」分頁。

  • 未透過網路傳送黃色 Request Cookies。這些項目預設為隱藏。按一下「顯示篩除的要求 Cookie」即可顯示。
  • 黃色 回應 Cookie 已透過網路傳送，但未儲存。
  • 將滑鼠游標懸停在「更多資訊」圖示 資訊 上，即可瞭解 Cookie 遭封鎖的原因。
  • 要求 Cookie 和 回應 Cookie 表格中的資料大多來自資源的 HTTP 標頭。Domain、Path 和 Expires/Max-Age 資料來自 Chrome 開發人員工具通訊協定。

Chromium 問題 #856777、#993843

查看 Cookie 值

按一下「Cookie」窗格中的資料列，即可查看該 Cookie 的值。

查看 Cookie 的值。

查看 Cookie 的值。

Chromium 問題 #462370

模擬不同的 prefers-color-scheme 和 prefers-reduced-motion 偏好設定

prefers-color-scheme 媒體查詢可讓您將網站的樣式與使用者的偏好設定相符。舉例來說，如果 prefers-color-scheme: dark 媒體查詢為 true，表示使用者已將作業系統設為深色模式，並偏好深色模式 UI。

開啟指令選單，執行「顯示算繪」指令，然後設定「模擬 CSS 媒體功能 prefers-color-scheme」下拉式選單，以便對 prefers-color-scheme: dark 和 prefers-color-scheme: light 樣式進行偵錯。

prefers-color-scheme：深色

設定 prefers-color-scheme: dark (中間方塊) 後，樣式窗格 (右方方塊) 會顯示在媒體查詢為 true 且檢視區顯示深色模式樣式 (左方方塊) 時套用的 CSS。

您也可以使用「模擬 CSS 媒體功能 prefers-color-scheme」下拉式選單旁的「模擬 CSS 媒體功能 prefers-reduced-motion」下拉式選單，模擬 prefers-reduced-motion: reduce。

Chromium 問題 #1004246

時區模擬

您現在不僅可以透過「感應器」分頁覆寫地理位置，還能模擬任意時區，並測試對網路應用程式的影響。或許令人驚訝的是，這項新功能也改善了地理位置模擬功能的可靠性：先前，網站應用程式可以透過將位置與使用者的當地時區比對，偵測位置造假。由於地理位置和時區模擬功能已結合，因此這類不相符的情況已消除。

程式碼涵蓋率更新

「涵蓋率」分頁可協助您找出未使用的 JavaScript 和 CSS。

涵蓋率分頁現在會使用新顏色代表已使用和未使用的程式碼。這組色彩組合經證實可讓色覺障礙人士更容易辨識。左側的紅色長條代表未使用的程式碼，右側的藍色長條則代表已使用的程式碼。

新的涵蓋率類型篩選器文字方塊可讓您依類型篩選涵蓋率資訊：只顯示 JavaScript 涵蓋率、只顯示 CSS 涵蓋率，或顯示所有類型的涵蓋率。

「涵蓋範圍」分頁。

「涵蓋範圍」分頁。

「Sources」面板會在可用時顯示程式碼涵蓋率資料。按一下行號旁的紅色或藍色標記，即可開啟「涵蓋率」分頁並醒目顯示檔案。

「來源」面板中的涵蓋率資料。

「來源」面板中的涵蓋率資料。8 行是未使用的程式碼範例。第 11 行是使用過的程式碼範例。

Chromium 問題 #1003671、#1004185

偵錯網路資源要求的原因

記錄網路活動後，請選取網路資源，然後前往「Initiator」分頁，瞭解為何要求該資源。「Request call stack」一節說明網路要求的 JavaScript 呼叫堆疊。

「啟動器」分頁。

「啟動者」分頁。

Chromium 問題 963183、842488

控制台和來源面板再次遵循縮排偏好設定

長期以來，DevTools 一直有設定，可將縮排偏好設定自訂為 2 個空格、4 個空格、8 個空格或制表符號。這項設定在最近幾乎沒有用處，因為控制台和來源面板會忽略這項設定。這個錯誤現已修正。

依序前往「設定」 >「偏好設定」 >「來源」 >「預設縮排」，即可設定偏好設定。

Chromium 問題 #977394

新增游標導覽快速鍵

在控制台或來源面板中按下 Control + P，將游標移至上一行。按下 Control + N 將游標移至下一行。

Chromium 問題 #983874

下載預覽管道

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

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

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

開發人員工具的新功能

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