Como visualizar ou editar o localStorage

259

Criei uma extensão do Chrome e estou usando o localStorage para armazenar dados.

Estou acessando localStorage através de "background_page".

Funciona bem, mas como posso visualizar manualmente seus valores? No Firefox, você pode usar o Firebug.

Alguém tem alguma sugestão?

google-chrome local-storage Joe Doe
fonte

Respostas:

270

É simples. Basta acessar as ferramentas do desenvolvedor pressionando e F12, em seguida, vá para a guia Aplicativo . Na seção Armazenamento , expanda Armazenamento Local . Depois disso, você verá todo o armazenamento local do seu navegador lá.

Giorgi Gzirishvili
fonte
33
No Chrome versão 60, você não pode modificar ou adicionar novos itens, você terá que fazê-lo através do console elocalStorage.setItem('key', 'value')
Jim Aho
9
Na versão 65 do Chrome, você pode modificar e adicionar novos itens manualmente. Clique duas vezes abaixo do último par de valores-chave na lista de valores-chave em Aplicativo> Armazenamento Local para adicionar um novo valor.
21118 Rose Perrone
169

Simplesmente abra as Ferramentas do desenvolvedor pressionando F12.

Clique na guia Aplicativo (anteriormente Recursos) e você verá o conteúdo do localStorage. A partir daí, você pode adicionar / editar / excluir as entradas de chave / valor manualmente.

guia recursos localStorage

No OS X, as teclas são: ⌥+ ⌘+i

Outra combinação: Ctrl+ Shift+i

EDIT: No Chrome 56, fica assim:

insira a descrição da imagem aqui

Simone
fonte
4
Sim, já tentei isso, mas localStorage está vazio. Talvez porque eu carreguei a extensão descompactada?
21812 Joe Doe
Isso pode ajudá-lo: stackoverflow.com/questions/3598669/…
Simone
3
Simone, eu sei como definir e ler localStorage com JS, mas eu preciso editar manualmente / excluí-lo
Joe Doe
Não é necessário fazer isso com o JS, é possível adicionar / editar / excluir entradas da interface do usuário
Simone
17

Atualmente, estou usando a versão 52.0.2743.82 m do chrome. Nesta versão mais recente do chrome, a partir de agora, você pode ver os valores de armazenamento local iniciando "Ferramentas do desenvolvedor" e depois examinando a guia "Aplicativo".

Luke P. Issac
fonte
15

Você pode acessar chrome: // chrome / extensions e haverá um link para sua página de plano de fundo que, depois que você iniciar, poderá usar as Ferramentas de Desenvolvimento para ver o material localStorage.

Ryan S
fonte
Obrigado por resposta @ Ryan S, mas localStorage está vazio eu defini-lo como estelocalStorage['xy'] = JSON.stringify(xy);
Joe Doe
2
No console do cromo que você pode fazer localStorage.setItem('xy', JSON.stringify(xy))e que irá definir o item em localStorage
Ryan S
2
do chrome: // chrome-urls / e, em seguida, armazenamento local
khaled_webdev
2

Ou eu não entendo o que as pessoas aqui estão tentando fazer, e não é o que estou fazendo, e / ou as ferramentas de desenvolvedor do Chrome mudaram e estão quebradas a esse respeito.

O script de conteúdo da minha extensão armazena dados como este:

chrome.storage.local.set(packet);

Quando visualizo a guia Aplicativo da página de plano de fundo da extensão e expanda Armazenamento> Armazenamento local, vejo minha extensão listada, mas clicar nela não mostra dados.

A única solução que encontrei é executar isso no console da página em segundo plano:

chrome.storage.local.get(null, function(data) {console.log(data);})

É semelhante à maneira como a extensão a lê (exceto passar nulo para obter todas as chaves em vez de um nome de chave para obter exatamente o que eu quero) e funciona bem, é apenas estranho digitar todas as vezes. Também é estranho que existam todas essas respostas aqui que não funcionam para mim.

Estou usando o Chrome 73.0.3683.103 (Compilação Oficial) (64 bits) no Windows 10. A extensão ainda está descompactada, se for relevante, mas é o momento mais provável em que você deseja fazer isso, ou seja, em desenvolvimento.

enigment
fonte