查看、新增、編輯及刪除 Cookie

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

HTTP Cookie 主要用於管理使用者工作階段及儲存使用者的個人化偏好設定。 並追蹤使用者行為同時也是所有擾亂「這個網頁使用 Cookie」的原因 您在網路上看到的同意聲明表單。本指南會說明如何查看、新增、編輯及刪除 開啟 Chrome 開發人員工具

開啟 Cookie 窗格

  1. 開啟 Chrome 開發人員工具。
  2. 開啟「應用程式」>儲存空間 >Cookie，然後選取來源。

「Cookie」窗格。

欄位

「Cookies」表格包含下列欄位：

  • 名稱 - Cookie 的名稱。
  • 值：Cookie 的值。
  • 網域：允許接收 Cookie 的主機。
  • 路徑：要求網址中必須存在的網址，才能傳送 Cookie 標頭。
  • 有效期限 / Max-Age。Cookie 的到期日或存在時間上限。 對於工作階段 Cookie，這個值一律是 Session。
  • Size - Cookie 的大小 (以位元組為單位)。
  • HttpOnly.如果為 true，這個欄位表示 Cookie 僅限透過 HTTP 使用，且 不允許修改 JavaScript。
  • 安全。如果設為 true，這個欄位表示 Cookie 只能透過 安全、HTTPS 連線
  • SameSite。如果 Cookie 採用實驗性 SameSite，就會包含 Strict 或 Lax 屬性。
  • 磁碟分區金鑰。如果是具有獨立分區狀態的 Cookie，分區索引鍵是指瀏覽器在要求開始傳送至設定 Cookie 的端點時，瀏覽器在哪個頂層網址造訪。
  • 優先順序：包含 Low、Medium (預設) 或 High (如果使用已淘汰的 Cookie) 優先順序 屬性。

如要查看 Cookie 的值，請在表格中選取該值。如要在不使用百分比編碼的情況下查看值，請勾選 「顯示網址已解碼」。

篩選 Cookie

使用「篩選器」方塊，按照「名稱」或「值」篩選 Cookie。

濾除所有不含「ID」的 Cookie。

系統不支援依其他欄位進行篩選。篩選器不區分大小寫。

如要新增任意 Cookie，請按照下列步驟操作：

  1. 按兩下表格中的空白列。
  2. 輸入名稱和值，然後按下 Enter 鍵。

開發人員工具會自動填入其他必填欄位。你可以按照下方說明加以編輯。

編輯 Cookie

除了會自動更新的「Size」，所有欄位皆可編輯。

按兩下欄位即可編輯。

將 Cookie 的名稱設為「DEVTOOLS!」。

開發人員工具會醒目顯示無效欄位值的 Cookie (以紅色標示)，

分區金鑰值中無效的 Cookie。

如要篩除有效的 Cookie，請勾選頂端動作列中的「」只顯示有問題的 Cookie。

刪除 Cookie

如要刪除 Cookie，請選取所需 Cookie，然後按一下頂端動作列中的 「刪除所選項目」。

正在刪除選取的 Cookie。

按一下 「全部清除」即可刪除所有 Cookie。

正在清除所有 Cookie。

辨識及檢查第三方 Cookie

第三方 Cookie 是由網站與目前頂層頁面不同的網站設定。第三方 Cookie 具有 SameSite=None 屬性。

開發人員工具會在「應用程式」> 列出這類 Cookie儲存空間 >Cookie，並在旁邊顯示「警告」警告圖示。將滑鼠遊標懸停在圖示上，即可查看工具提示，按一下即可前往「問題」面板瞭解詳情。

「儲存空間」區段中具有 SameSite=None 屬性的 Cookie。

您也可以在「聯播網> 找到第三方 Cookie」點選要求 >Cookie。

「Network」面板中有 SameSite=None 屬性的 Cookie。

「聯播網」面板會醒目顯示有問題的 Cookie，並在第三方 Cookie 逐步淘汰受影響的 Cookie 旁顯示「警告」警告圖示。