O Editor de Armazenamento Local fornece uma interface de tabela limpa para gerir entradas de localStorage e sessionStorage para o site atual. Navegue por todos os pares chave-valor, edite valores inline, adicione novas entradas e elimine as que não precisa. Os valores JSON são detetados automaticamente e formatados para uma leitura fácil. Alterne entre os separadores localStorage e sessionStorage para gerir ambos os tipos de armazenamento.
As aplicações web armazenam enormes quantidades de estado em localStorage e sessionStorage — preferências do utilizador, tokens de autenticação, sinalizadores de funcionalidades, atribuições de testes A/B, conteúdos de carrinhos de compras, rascunhos de formulários, respostas de API em cache e estado da UI. Depurar estes valores nas DevTools do Chrome requer navegar até ao separador Application, encontrar a secção Storage e utilizar um visualizador básico de chave-valor com capacidades de edição limitadas. O Editor de Armazenamento Local traz isto para um painel concebido para o efeito com alternância de armazenamento por separadores, edição inline, auto-formatação JSON e operações em massa. A tabela mostra cada par chave-valor com o nome da chave e o valor. Os valores JSON (que são extremamente comuns — objetos serializados com JSON.stringify) são detetados automaticamente e exibidos com a formatação e o realce de sintaxe adequados. Clique em qualquer valor para o editar no local — as alterações são escritas na API de armazenamento imediatamente. Adicione novas entradas com um formulário limpo, ou elimine entradas individualmente ou em massa.
Alterne entre localStorage e sessionStorage com botões de separador no topo do painel. Cada separador mostra a contagem de entradas (ex: "localStorage (12)" / "sessionStorage (3)"). Ambos os tipos de armazenamento são geridos a partir de uma única interface.
Clique em qualquer célula de valor para o editar no local. Para valores simples, digite a nova string. Para valores JSON, o editor expande-se para uma área de texto formatada com realce de sintaxe. As alterações são guardadas na API de armazenamento imediatamente.
Os valores JSON (objetos e arrays serializados com JSON.stringify) são detetados automaticamente e exibidos com a indentação e o realce de sintaxe adequados. Edite o JSON formatado diretamente — este é re-serializado quando guarda.
Clique em "Adicionar Entrada" para criar um novo par chave-valor. Introduza o nome da chave e o valor (string ou JSON). A entrada é escrita imediatamente no localStorage ou sessionStorage para o domínio atual.
Elimine entradas individuais com o botão de eliminar da linha, ou utilize "Limpar Tudo" para remover todas as entradas do tipo de armazenamento atual. Útil para repor o estado da aplicação durante os testes.
As alterações feitas no editor são refletidas imediatamente na aplicação. Se a aplicação lê um valor do localStorage na interação do utilizador, editar esse valor no panel altera o que a aplicação lê a seguir — sem necessidade de recarregar a página na maioria dos casos.
Inspecione que valores a sua aplicação armazenou no localStorage. O token de autenticação está presente? O objeto de preferência do utilizador está estruturado corretamente? Um valor em cache obsoleto está a causar um comportamento inesperado?
Limpe todo o localStorage para repor a aplicação ao seu estado inicial — útil para testar experiências de primeira execução, fluxos de integração e configurações padrão sem limpar os dados do navegador para outros sites.
Muitas aplicações armazenam valores de sinalizadores de funcionalidades no localStorage. Edite-os diretamente para ativar ou desativar funcionalidades sem passar pela UI de gestão de sinalizadores ou fazer nova implementação.
Edite preferências de utilizador armazenadas, definições de tema, seleções de idioma ou sinalizadores de conclusão de integração para simular diferentes estados de utilizador e testar como a aplicação lida com cada um.
Veja que dados scripts de terceiros (análise, chat, publicidade) estão a armazenar no localStorage do seu domínio. Audite os dados para conformidade com a privacidade e utilização inesperada de armazenamento.
Abra a doca flutuante do DevSuite Pro e clique no ícone Editor de Armazenamento Local. Um painel abre-se mostrando todas as entradas de localStorage para o domínio atual.
Percorra a tabela de chave-valor. Os valores JSON são formatados automaticamente. Alterne os separadores para ver o sessionStorage.
Clique em qualquer valor para o editar inline. Para valores JSON, aparece um editor formatado. As alterações são guardadas na API de armazenamento imediatamente.
Clique em "Adicionar Entrada" para criar um novo par chave-valor. Clique no ícone de eliminar em qualquer linha para a remover. "Limpar Tudo" remove tudo.
Depois de editar os valores de armazenamento, interaja com a página para ver como a aplicação responde aos dados alterados.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
