Como Inspecionar e Editar Cookies no Chrome DevTools
Quando a autenticação falha, as sessões expiram inesperadamente ou o estado do lado do cliente se comporta de forma estranha, os cookies geralmente são o primeiro lugar a verificar. O Chrome DevTools oferece uma visualização direta de cada cookie que sua página define — e permite modificá-los sem escrever uma única linha de código.
Aqui está exatamente como usar o painel de cookies do Chrome DevTools para inspecionar, adicionar, editar e excluir cookies durante o desenvolvimento.
Principais Conclusões
- Acesse o painel de cookies através de Application → Storage → Cookies no Chrome DevTools para visualizar todos os cookies de uma determinada origem.
- Cada linha de cookie expõe campos críticos como Domain, Path, SameSite, HttpOnly e Secure — entender esses campos é essencial para depurar problemas de autenticação e sessão.
- Você pode adicionar, editar e excluir cookies diretamente no painel Application sem escrever nenhum código.
- Use a aba Cookies do painel Network para verificar quais cookies são realmente enviados nas requisições e recebidos nas respostas no nível HTTP.
- Cookies de terceiros aparecem com ícones de aviso no painel Application, ajudando você a identificar problemas de cookies entre sites à medida que as restrições de privacidade do navegador se tornam mais rigorosas.
Abrindo o Painel de Cookies do Chrome DevTools
- Abra o Chrome DevTools com
F12(Windows/Linux) ouCmd + Option + I(Mac). - Clique na aba Application.
- Na barra lateral esquerda, expanda Storage → Cookies.
- Selecione uma origem para visualizar seus cookies.
Você verá uma tabela listando cada cookie associado a essa origem.
Entendendo os Campos dos Cookies
Cada linha na tabela de cookies representa um cookie. Aqui está o que cada coluna significa e por que isso importa quando você depura cookies no Chrome DevTools:
| Campo | O Que Indica |
|---|---|
| Name | A chave do cookie |
| Value | Os dados armazenados (marque Show URL-decoded para decodificar valores codificados em percentual) |
| Domain | Quais hosts recebem este cookie — .example.com inclui subdomínios, enquanto sub.example.com não |
| Path | O escopo do caminho da URL necessário para o navegador enviar o cookie |
| Expires / Max-Age | Data de expiração, ou Session para cookies que são limpos quando a sessão do navegador termina |
| Size | Tamanho do cookie em bytes (calculado automaticamente, não editável) |
| HttpOnly | Se marcado, JavaScript não pode ler este cookie — ele só é visível via DevTools ou painel Network |
| Secure | Se marcado, o cookie só é transmitido via HTTPS |
| SameSite | Strict, Lax ou None — controla o comportamento de envio entre sites |
| Partition Key | Presente em cookies particionados (CHIPS) — mostra o site de nível superior que possui esta partição de armazenamento do cookie |
Use a caixa Filter para pesquisar por nome ou valor quando uma página define muitos cookies. Cookies particionados (CHIPS) fazem parte de modelos de privacidade mais recentes do navegador e seu status de suporte pode ser acompanhado em https://webstatus.dev/features/partitioned-cookies.
Como Adicionar, Editar e Excluir Cookies
Adicionando um cookie:
- Clique duas vezes em uma linha vazia na parte inferior da tabela.
- Digite um nome e valor, depois pressione
Enter. - O DevTools preenche valores padrão para os outros campos automaticamente.
Editando um cookie:
- Clique duas vezes em qualquer campo para editá-lo inline.
- O campo Size é atualizado automaticamente — todo o resto é editável.
- O DevTools destaca valores inválidos em vermelho.
- Use Only show cookies with an issue para filtrar entradas válidas e focar nos problemas.
Excluindo cookies:
- Selecione uma linha de cookie e clique em Delete selected na barra de ações.
- Clique em Clear all para limpar todos os cookies da origem selecionada.
Isso é particularmente útil ao testar fluxos de login — você pode expirar manualmente um cookie de sessão ou alterar um valor de token para verificar como sua aplicação lida com casos extremos.
Discover how at OpenReplay.com.
Usando o Painel Network para Depurar Cabeçalhos de Cookies
O painel Application é seu espaço de trabalho para editar cookies. O painel Network é onde você verifica o que está realmente sendo enviado e recebido.
Abra o painel Network, clique em qualquer requisição e selecione a aba Cookies. Você verá duas seções:
- Request Cookies — o que o navegador enviou para o servidor.
- Response Cookies — o que o servidor instruiu o navegador a definir via cabeçalhos
Set-Cookie.
Essa distinção importa porque JavaScript não pode ler o cabeçalho de resposta Set-Cookie diretamente. Se um cookie não estiver aparecendo após o login, verifique primeiro o painel Network para confirmar que o servidor está realmente definindo-o. O comportamento do cabeçalho Set-Cookie está documentado na referência Set-Cookie do MDN.
Identificando Cookies de Terceiros
No painel Application, cookies de terceiros — aqueles definidos por um domínio diferente da página de nível superior atual — aparecem com um ícone de aviso. Esses cookies normalmente carregam SameSite=None e exigem o atributo Secure. Passe o mouse sobre o ícone para detalhes. No Chrome DevTools moderno, avisos de privacidade de cookies e diagnósticos relacionados também podem aparecer diretamente no Console.
À medida que as políticas de privacidade do navegador continuam evoluindo, o Chrome e outros navegadores estão cada vez mais restringindo como os cookies de terceiros se comportam. Testar o comportamento de cookies do seu site sob essas restrições vale a pena incorporar ao seu fluxo de trabalho regular de depuração.
Conclusão
O painel de cookies do Chrome DevTools oferece tudo que você precisa para inspecionar e editar cookies sem sair do navegador. Use o painel Application para inspeção de armazenamento e edições manuais. Use o painel Network para verificar quais cookies estão realmente sendo enviados e recebidos no nível HTTP. Juntos, esses dois painéis cobrem o fluxo de trabalho completo de depuração de cookies para autenticação, sessões e gerenciamento de estado do lado do cliente.
Se você deseja material de referência mais aprofundado sobre como o Chrome expõe cookies e atributos relacionados no DevTools, consulte o guia oficial de depuração de cookies do Chrome DevTools.
Perguntas Frequentes
O servidor pode não estar enviando o cabeçalho Set-Cookie corretamente, ou os atributos Domain ou Path do cookie podem não corresponder à página atual. Abra o painel Network, encontre a requisição de login e verifique a aba Response Cookies para confirmar que o cabeçalho está presente e corretamente formado.
Um cookie de sessão não possui valor Expires ou Max-Age e mostra Session na coluna de expiração. Ele é excluído quando a sessão do navegador termina. Um cookie persistente tem uma data de expiração específica e permanece armazenado até que essa data passe ou o cookie seja excluído manualmente.
O ícone de aviso normalmente indica um cookie de terceiros ou um cookie com um atributo SameSite ausente ou mal configurado. Passe o mouse sobre o ícone para um resumo, e diagnósticos adicionais podem aparecer no Console do DevTools.
Não. Cookies HttpOnly são inacessíveis ao JavaScript por design, o que os protege de ataques de cross-site scripting. No entanto, você pode visualizá-los e editá-los diretamente no painel Application do Chrome DevTools clicando duas vezes no 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.
