State Inspector encuentra las stores Redux, Zustand, Pinia y Vuex en la página en la que se encuentra, muestra su estado como un árbol activo y le permite enviar acciones, parchear el estado o llamar a acciones store sin abrir un depurador.
Los errores de front-end a menudo viven en el estado en lugar de en el marcado: una bandera que nunca cambia, una lista que contiene un elemento obsoleto, un objeto de usuario al que le falta el campo que espera la interfaz. Framework devtools puede mostrarlo, pero solo cuando se instala la extensión correcta, la compilación la expone y usted está en una máquina donde puede abrir un depurador. En un sitio de prueba, en la computadora portátil de un colega o en una página de producción, ese no suele ser el caso.
Esta herramienta lee las stores directamente desde la página. Redux se encuentra a través de la store react-redux de las manos de su Provider, Pinia y Vuex a través de la aplicación Vue en la que están instalados ( Vue 3 y Vue 2), y Zustand a través de una store expuesta en window o a través de los componentes que leen desde ella. Cada store aparece con el lugar donde se encontró y su estado se muestra como un árbol plegable que mantiene Maps, Sets, Dates, funciones y referencias circulares legibles en lugar de no poder serializarse.
El modo Live vuelve a leer la store seleccionada cada dos segundos, resalta las claves de nivel superior que cambiaron y mantiene un breve registro de cambios, para que pueda hacer clic en la página y observar qué parte del estado toca cada interacción. Un filtro encuentra cualquier clave o ruta en un árbol de estado grande, y Copy state JSON le brinda una instantánea para un informe de error o un dispositivo de prueba.
Cuando leer no sea suficiente, cámbielo en su lugar: envíe una acción Redux, fusione un objeto en el estado Zustand o llame a una de sus acciones, $patch una store Pinia o ejecute sus acciones con argumentos y confirme mutaciones o envíe acciones en Vuex, incluidos los módulos con espacios de nombres. El árbol y la página se actualizan inmediatamente. La herramienta también es clara acerca de lo que no puede alcanzar: una store guardada dentro de un módulo y nunca entregada a la interfaz es invisible desde el exterior, y el panel explica cómo exponer una durante el desarrollo.
Redux y Redux Toolkit, Zustand, Pinia y Vuex en Vue 2 y Vue 3, se encuentran automáticamente: sin configuración ni gancho devtools en la compilación.
Estado anidado como un árbol plegable que maneja Maps, Sets, Dates, funciones, instancias de clases y referencias circulares, con los captadores Pinia y Vuex que se muestran por separado.
El modo Live resalta las claves de nivel superior que cambiaron y registra cada cambio con una marca de tiempo, para que pueda asignar interacciones a actualizaciones de estado.
Distribuya acciones Redux, llame a acciones Zustand y Pinia con argumentos, $patch el estado Pinia, fusione en el estado Zustand y confirme o envíe en Vuex.
Filtre un árbol de estado grande por clave o ruta, luego copie el estado completo como JSON para un informe de error, un dispositivo de prueba o una comparación.
No es necesario instalar nada en la aplicación y no se necesita compilación de depuración: funciona en etapa de prueba, en producción y en sitios de otras personas, dondequiera que se pueda acceder a las stores.
Compruebe si el error está en los datos o en la vista: si la store ya tiene el valor incorrecto, el componente no es el problema.
Coloque la store en un estado al que sea difícil acceder haciendo clic (un carrito vacío, una sesión caducada, mil artículos) y vea cómo se comporta la interfaz.
Lea las stores en vivo de una compilación implementada donde Redux DevTools o Vue Devtools no están conectados.
Haga clic en la aplicación y mire el registro de cambios para saber qué interacciones actualizan qué parte del estado.
Agregue una instantánea JSON exacta de la store al ticket en lugar de describir lo que mostró la interfaz.
Haga clic en el icono State Inspector en el Dock DevSuite Pro en una página React o Vue. Cada store que encuentra aparece enumerada con su biblioteca y dónde se encontró.
Seleccione una store para ver su estado como árbol. Expanda las ramas que necesita o escriba el filtro para ir directamente a una clave o ruta.
Con Live activado, interactúe con la página y observe el registro de cambios: cada entrada muestra la hora y las claves de nivel superior que cambiaron.
Introduce una acción, un parche o argumentos como JSON y ejecútalo. El árbol y la página se actualizan de inmediato, por lo que puede probar casos extremos sin tocar el código.
Copy state JSON captura la store tal como está en este momento, lista para pegarla en un ticket, una prueba o una herramienta de comparación.
Instala DevSuite Pro gratis y desbloquea más de 74 herramientas de desarrollador para tu navegador.
