Cómo ver o editar localStorage

259

Creé una extensión de Chrome y estoy usando localStorage para almacenar datos.

Estoy accediendo a localStorage a través de "background_page".

Funciona bien, pero ¿cómo puedo ver manualmente sus valores? En Firefox puedes usar Firebug.

¿Alguien tiene alguna sugerencia?

google-chrome local-storage Joe Doe
fuente

Respuestas:

270

Es sencillo. Simplemente vaya a las herramientas de desarrollador presionando F12, luego vaya a la pestaña Aplicación . En la sección Almacenamiento , expanda Almacenamiento local . Después de eso, verá todo el almacenamiento local de su navegador allí.

Giorgi Gzirishvili
fuente
33
En Chrome versión 60 no puede modificar o agregar nuevos elementos, tendrá que hacerlo a través de la consola ylocalStorage.setItem('key', 'value')
Jim Aho
9
En Chrome versión 65, puede modificar y agregar nuevos elementos manualmente. Haga doble clic debajo del último par clave-valor en la lista clave-valor en Aplicación> Almacenamiento local para agregar un nuevo valor.
Rose Perrone
169

Simplemente abra las Herramientas del desarrollador presionando F12.

Haga clic en la pestaña Aplicación (anteriormente Recursos) y verá el contenido de localStorage. Desde allí, puede agregar / editar / eliminar las entradas de clave / valor manualmente.

pestaña de recursos de almacenamiento local

En OS X las teclas son: ⌥+ ⌘+i

Otra combinación: Ctrl+ Shift+i

EDITAR: En Chrome 56 se ve así:

ingrese la descripción de la imagen aquí

Simone
fuente
44
Sí, ya lo intentó, pero localStorage está vacío. ¿Quizás porque he cargado la extensión desempaquetada?
Joe Doe
Esto puede ayudarlo: stackoverflow.com/questions/3598669/…
Simone
3
Simone, sé cómo configurar y leer localStorage con JS, pero necesito editarlo / eliminarlo manualmente
Joe Doe
No es necesario hacerlo con JS, es posible agregar / editar / eliminar entradas de la interfaz de usuario
Simone
17

Estoy usando la versión de Chrome 52.0.2743.82 m actualmente. En esta última versión de Chrome a partir de ahora, puede ver los valores de almacenamiento local iniciando "Herramientas para desarrolladores" y luego mirando la pestaña "Aplicación".

Luke P. Issac
fuente
15

Puede ir a chrome: // chrome / extensiones y habrá un enlace a su página de fondo que una vez que lo inicie, puede usar las Herramientas de desarrollo para ver las cosas de almacenamiento local.

Ryan S
fuente
Gracias por responder @Ryan S pero localStorage está vacío. Lo configuré asílocalStorage['xy'] = JSON.stringify(xy);
Joe Doe
2
En la consola de Chrome puedes hacerlo localStorage.setItem('xy', JSON.stringify(xy))y eso establecerá el elemento en localStorage
Ryan S
2
do chrome: // chrome-urls /, luego almacenamiento local
khaled_webdev
2

O no entiendo lo que la gente aquí está tratando de hacer, y no es lo que estoy haciendo, y / o las herramientas de desarrollador de Chrome han cambiado y están rotas en este sentido.

El script de contenido de mi extensión almacena datos como este:

chrome.storage.local.set(packet);

Cuando veo la pestaña Aplicación de la página de fondo de la extensión y expando Almacenamiento> Almacenamiento local, veo mi extensión en la lista, pero al hacer clic en ella no se muestran datos.

La única solución que he encontrado es ejecutar esto en la consola de la página de fondo:

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

Eso es similar a cómo lo lee la extensión (excepto pasar nulo para obtener todas las claves en lugar de un nombre de clave para obtener solo el que quiero) y funciona bien, es incómodo escribirlo cada vez. También es extraño que haya todas estas respuestas aquí que no funcionan para mí.

Estoy usando Chrome 73.0.3683.103 (Official Build) (64-bit) en Windows 10. La extensión todavía está desempaquetada, si es relevante, pero es el momento más probable en que desearías hacer esto, es decir, en desarrollo.

enigmento
fuente