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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

HTTP Cookie 主要用於管理使用者工作階段、儲存使用者個人化偏好設定，以及追蹤使用者行為。此外，網路上所有惱人的「這個頁面使用 Cookie」同意聲明表單，也都是 Cookie 造成的。本指南說明如何使用 Chrome 開發人員工具，查看、新增、編輯及刪除網頁的 Cookie。

開啟「Cookies」窗格

  1. 開啟 Chrome 開發人員工具。
  2. 依序開啟「Application」 >「Storage」 >「Cookies」，然後選取來源。

「Cookies」窗格。

欄位

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

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

如要查看 Cookie 的值，請在表格中選取該 Cookie。如要查看未經過百分比編碼的值，請勾選「顯示已解碼的網址」。

篩選 Cookie

使用「Filter」(篩選器) 方塊，依「Name」(名稱) 或「Value」(值) 篩選 Cookie。

篩除不含「id」的任何 Cookie。

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

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

  1. 在表格的空白列上按兩下滑鼠。
  2. 輸入「名稱」和「值」，然後按下 Enter 鍵。

開發人員工具會自動填入其他必填欄位。你可以按照下節說明編輯這些內容標籤。

編輯 Cookie

除了會自動更新的「大小」，其他欄位皆可編輯。

按兩下欄位即可編輯。

將 Cookie 名稱設為「DEVTOOLS!」

如果 Cookie 的欄位值無效，開發人員工具會以紅色醒目顯示。

Partition Key 值無效的 Cookie。

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

刪除 Cookie

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

刪除所選 Cookie。

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

清除所有 Cookie。

找出並檢查第三方 Cookie

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

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

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

您也可以依序點選「網路」 > 要求 >「Cookie」，找出第三方 Cookie。

「網路」面板中具有 SameSite=None 屬性的 Cookie。

「網路」面板會醒目顯示有問題的 Cookie，並在無法使用第三方 Cookie 的情況下，於受影響的 Cookie 旁顯示圖示。