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

Kayce Basques

Cookie 的新功能

偵錯 Cookie 遭封鎖的原因

記錄網路活動後，請選取網路資源，然後前往更新後的頁面 「Cookie」分頁，瞭解資源的要求或回應 Cookie 遭到封鎖的原因。詳情請見 在沒有 SameSite 時變更預設行為，瞭解出現更多情況的原因 在 Chrome 76 以上版本中封鎖 Cookie。

Cookie 分頁。

Cookie 分頁。

  • 未透過電線傳送黃色的「Request Cookies」。這些控制項預設為隱藏。按一下「顯示」 篩除請求 Cookie 來顯示 Cookie。
  • 黃色的「回應 Cookie」通過線傳送，但未儲存。
  • 將遊標懸停在「更多資訊」上 資訊，瞭解為何使用 Cookie 已封鎖。
  • 「要求 Cookie」和「回應 Cookie」表格中的大部分資料來自 資源的 HTTP 標頭「Domain」、「Path」和「Expiration/Max-Age」資料取自以下來源： Chrome 開發人員工具通訊協定。

Chromium 問題 #856777、#993843

查看 Cookie 值

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

查看 Cookie 的值。

查看 Cookie 的值。

Chromium 問題 #462370

模擬不同的偏好顏色和偏好情緒情緒策略

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

開啟「指令選單」、執行「顯示轉譯」指令，然後設定「Emulate CSS 媒體」 featurerefers-color-scheme 下拉式選單對 prefers-color-scheme: dark 進行偵錯，並 prefers-color-scheme: light 樣式。

Preferreds-color-scheme：深色

如果設定 prefers-color-scheme: dark (中間方塊)，「Styles」窗格 (右方塊) 會顯示 系統會在該媒體查詢為 true ，且可視區域顯示深色模式樣式時套用 (左方方塊)。

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

Chromium 問題 #1004246

時區模擬

「感應器」分頁現在不僅可覆寫地理位置，還能模擬任意位置 以及測試對網頁應用程式的影響。但或許出乎意料，這項新功能能夠 地理位置模擬的可靠性：以往網路應用程式先前都能透過以下方式偵測假冒位置： 將該位置與使用者當地時區進行比對。現在建立地理位置和時區 這些不相符的問題會被排除。

程式碼涵蓋率更新

你可以透過「涵蓋範圍」分頁找出未使用的 JavaScript 和 CSS。

「Coverage」分頁現在會使用新的顏色來代表已使用和未使用的程式碼。這個色彩組合是 經證實對色覺障礙者來說更容易取得。左側紅色長條 代表未使用的程式碼，而右側的藍光長條代表使用的程式碼。

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

「涵蓋範圍」分頁。

「涵蓋範圍」分頁。

「來源」面板會顯示可用的程式碼涵蓋率資料。按一下紅色或藍光標記 開啟「涵蓋率」分頁，並醒目顯示檔案。

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

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

Chromium 問題 #1003671、#1004185

偵錯要求取得網路資源的原因

記錄網路活動後，請選取網路資源，然後前往啟動器 分頁中，瞭解要求資源的原因。「要求呼叫堆疊」一節將說明 引發網路要求的 JavaScript 呼叫堆疊。

「發起者」分頁。

「Initiator」分頁。

Chromium 問題 963183、842488

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

開發人員工具長久以來都有將縮排偏好設定自訂為 2 個空格、4 空格、8 個空格或 Tab 鍵。因為 Play 管理中心和 來源面板忽略了設定。這個錯誤現已修正。

前往「設定」>偏好設定 >來源 >「預設縮排」來設定 偏好設定。

Chromium 問題 #977394

遊標導覽的新快速鍵

按下「控制台」或「來源」面板中的 Ctrl+P 鍵，將遊標移到上方的行。新聞中心 按下 Control + N 鍵，將您的遊標移到下方的行。

Chromium 問題 #983874

下載預覽頻道

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

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

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

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

開發人員工具新功能

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