Cómo Inspeccionar y Editar Cookies en Chrome DevTools
Cuando la autenticación falla, las sesiones expiran inesperadamente o el estado del lado del cliente se comporta de manera extraña, las cookies suelen ser el primer lugar donde buscar. Chrome DevTools te ofrece una vista directa de cada cookie que establece tu página, y te permite modificarlas sin escribir una sola línea de código.
Aquí te mostramos exactamente cómo usar el panel de cookies de Chrome DevTools para inspeccionar, agregar, editar y eliminar cookies durante el desarrollo.
Puntos Clave
- Accede al panel de cookies a través de Application → Storage → Cookies en Chrome DevTools para ver todas las cookies de un origen determinado.
- Cada fila de cookie expone campos críticos como Domain, Path, SameSite, HttpOnly y Secure — comprender estos campos es esencial para depurar problemas de autenticación y sesión.
- Puedes agregar, editar y eliminar cookies directamente en el panel Application sin escribir ningún código.
- Usa la pestaña Cookies del panel Network para verificar qué cookies se envían realmente en las solicitudes y se reciben en las respuestas a nivel HTTP.
- Las cookies de terceros aparecen con íconos de advertencia en el panel Application, ayudándote a identificar problemas de cookies entre sitios a medida que se endurecen las restricciones de privacidad del navegador.
Abrir el Panel de Cookies de Chrome DevTools
- Abre Chrome DevTools con
F12(Windows/Linux) oCmd + Option + I(Mac). - Haz clic en la pestaña Application.
- En la barra lateral izquierda, expande Storage → Cookies.
- Selecciona un origen para ver sus cookies.
Verás una tabla que enumera cada cookie asociada con ese origen.
Comprender los Campos de las Cookies
Cada fila en la tabla de cookies representa una cookie. Aquí está lo que significa cada columna y por qué es importante cuando depuras cookies en Chrome DevTools:
| Campo | Qué Te Indica |
|---|---|
| Name | La clave de la cookie |
| Value | Los datos almacenados (marca Show URL-decoded para decodificar valores codificados en porcentaje) |
| Domain | Qué hosts reciben esta cookie — .example.com incluye subdominios, mientras que sub.example.com no |
| Path | El alcance de la ruta URL requerida para que el navegador envíe la cookie |
| Expires / Max-Age | Fecha de expiración, o Session para cookies que se borran cuando termina la sesión del navegador |
| Size | Tamaño de la cookie en bytes (calculado automáticamente, no editable) |
| HttpOnly | Si está marcado, JavaScript no puede leer esta cookie — solo es visible a través de DevTools o el panel Network |
| Secure | Si está marcado, la cookie solo se transmite por HTTPS |
| SameSite | Strict, Lax o None — controla el comportamiento de envío entre sitios |
| Partition Key | Presente en cookies particionadas (CHIPS) — muestra el sitio de nivel superior que posee esta partición de almacenamiento |
Usa el cuadro Filter para buscar por nombre o valor cuando una página establece muchas cookies. Las cookies particionadas (CHIPS) son parte de los modelos de privacidad más nuevos del navegador y su estado de soporte se puede rastrear en https://webstatus.dev/features/partitioned-cookies.
Cómo Agregar, Editar y Eliminar Cookies
Agregar una cookie:
- Haz doble clic en una fila vacía en la parte inferior de la tabla.
- Escribe un nombre y un valor, luego presiona
Enter. - DevTools completa automáticamente los valores predeterminados para los demás campos.
Editar una cookie:
- Haz doble clic en cualquier campo para editarlo en línea.
- El campo Size se actualiza automáticamente — todo lo demás es editable.
- DevTools resalta los valores inválidos en rojo.
- Usa Only show cookies with an issue para filtrar las entradas válidas y enfocarte en los problemas.
Eliminar cookies:
- Selecciona una fila de cookie y haz clic en Delete selected en la barra de acciones.
- Haz clic en Clear all para eliminar todas las cookies del origen seleccionado.
Esto es particularmente útil cuando pruebas flujos de inicio de sesión — puedes expirar manualmente una cookie de sesión o cambiar un valor de token para verificar cómo tu aplicación maneja casos extremos.
Discover how at OpenReplay.com.
Usar el Panel Network para Depurar Encabezados de Cookies
El panel Application es tu espacio de trabajo para editar cookies. El panel Network es donde verificas lo que realmente se está enviando y recibiendo.
Abre el panel Network, haz clic en cualquier solicitud y luego selecciona la pestaña Cookies. Verás dos secciones:
- Request Cookies — lo que el navegador envió al servidor.
- Response Cookies — lo que el servidor instruyó al navegador a establecer mediante encabezados
Set-Cookie.
Esta distinción es importante porque JavaScript no puede leer directamente el encabezado de respuesta Set-Cookie. Si una cookie no aparece después del inicio de sesión, verifica primero el panel Network para confirmar que el servidor realmente la está estableciendo. El comportamiento del encabezado Set-Cookie está documentado en la referencia Set-Cookie de MDN.
Identificar Cookies de Terceros
En el panel Application, las cookies de terceros — aquellas establecidas por un dominio diferente al de la página de nivel superior actual — aparecen con un ícono de advertencia. Estas cookies típicamente llevan SameSite=None y requieren el atributo Secure. Pasa el cursor sobre el ícono para ver detalles. En las versiones modernas de Chrome DevTools, las advertencias de privacidad de cookies y diagnósticos relacionados también pueden aparecer directamente en la Console.
A medida que las políticas de privacidad del navegador continúan evolucionando, Chrome y otros navegadores están restringiendo cada vez más cómo se comportan las cookies de terceros. Vale la pena incorporar las pruebas del comportamiento de las cookies de tu sitio bajo estas restricciones en tu flujo de trabajo regular de depuración.
Conclusión
El panel de cookies de Chrome DevTools te ofrece todo lo que necesitas para inspeccionar y editar cookies sin salir del navegador. Usa el panel Application para inspección de almacenamiento y ediciones manuales. Usa el panel Network para verificar qué cookies se están enviando y recibiendo realmente a nivel HTTP. Juntos, estos dos paneles cubren el flujo de trabajo completo de depuración de cookies para autenticación, sesiones y gestión de estado del lado del cliente.
Si deseas material de referencia más profundo sobre cómo Chrome expone cookies y atributos relacionados en DevTools, consulta la guía oficial de depuración de cookies de Chrome DevTools.
Preguntas Frecuentes
El servidor puede no estar enviando el encabezado Set-Cookie correctamente, o los atributos Domain o Path de la cookie pueden no coincidir con la página actual. Abre el panel Network, encuentra la solicitud de inicio de sesión y verifica la pestaña Response Cookies para confirmar que el encabezado está presente y correctamente formado.
Una cookie de sesión no tiene valor de Expires o Max-Age y muestra Session en la columna de expiración. Se elimina cuando termina la sesión del navegador. Una cookie persistente tiene una fecha de expiración específica y permanece almacenada hasta que pasa esa fecha o la cookie se elimina manualmente.
El ícono de advertencia típicamente indica una cookie de terceros o una cookie con un atributo SameSite faltante o mal configurado. Pasa el cursor sobre el ícono para ver un resumen, y pueden aparecer diagnósticos adicionales en la Console de DevTools.
No. Las cookies HttpOnly son inaccesibles para JavaScript por diseño, lo que las protege de ataques de cross-site scripting. Sin embargo, puedes verlas y editarlas directamente en el panel Application de Chrome DevTools haciendo doble clic en el campo relevante.
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
