Local Storage Editor propose une interface tableau claire pour gérer les entrées localStorage et sessionStorage du site courant. Parcourez toutes les paires clé-valeur, modifiez les valeurs en ligne, ajoutez de nouvelles entrées et supprimez celles dont vous n'avez pas besoin. Les valeurs JSON sont automatiquement détectées et formatées pour une lecture aisée. Basculez entre les onglets localStorage et sessionStorage pour gérer les deux types de stockage.
Les applications web stockent d'énormes quantités d'état dans localStorage et sessionStorage — préférences utilisateur, jetons d'authentification, feature flags, assignations de tests A/B, contenus de paniers, brouillons de formulaires, réponses API mises en cache et état de l'interface. Déboguer ces valeurs dans Chrome DevTools nécessite de naviguer vers l'onglet Application, de trouver la section Storage et d'utiliser un visualiseur clé-valeur basique aux capacités d'édition limitées. Local Storage Editor propose un panneau dédié avec basculement par onglets, édition en ligne, formatage automatique JSON et opérations en masse. Le tableau affiche chaque paire clé-valeur avec le nom de la clé et la valeur. Les valeurs JSON (très courantes — objets sérialisés avec JSON.stringify) sont détectées automatiquement et affichées avec un formatage et une coloration syntaxique appropriés. Cliquez sur n'importe quelle valeur pour la modifier sur place — les modifications sont écrites dans l'API de stockage immédiatement. Ajoutez de nouvelles entrées via un formulaire épuré, ou supprimez des entrées individuellement ou en masse.
Basculez entre localStorage et sessionStorage grâce aux boutons d'onglets en haut du panneau. Chaque onglet affiche le nombre d'entrées (par ex. "localStorage (12)" / "sessionStorage (3)"). Les deux types de stockage sont gérés depuis une seule interface.
Cliquez sur n'importe quelle cellule de valeur pour la modifier sur place. Pour les valeurs simples, saisissez la nouvelle chaîne. Pour les valeurs JSON, l'éditeur s'étend en une zone de texte formatée avec coloration syntaxique. Les modifications sont enregistrées dans l'API de stockage immédiatement.
Les valeurs JSON (objets et tableaux sérialisés avec JSON.stringify) sont automatiquement détectées et affichées avec une indentation et une coloration syntaxique appropriées. Modifiez le JSON formaté directement — il est re-sérialisé lors de l'enregistrement.
Cliquez sur "Add Entry" pour créer une nouvelle paire clé-valeur. Saisissez le nom de la clé et la valeur (chaîne ou JSON). L'entrée est immédiatement écrite dans localStorage ou sessionStorage pour le domaine courant.
Supprimez des entrées individuelles via le bouton de suppression de ligne, ou utilisez "Clear All" pour supprimer toutes les entrées du type de stockage courant. Utile pour réinitialiser l'état de l'application pendant les tests.
Les modifications effectuées dans l'éditeur sont immédiatement répercutées dans l'application. Si l'application lit une valeur depuis localStorage lors d'une interaction utilisateur, modifier cette valeur dans le panneau change ce que l'application lira ensuite — sans rechargement de page dans la plupart des cas.
Inspectez les valeurs stockées par votre application dans localStorage. Le jeton d'authentification est-il présent ? L'objet de préférences utilisateur est-il correctement structuré ? Une valeur en cache obsolète provoque-t-elle un comportement inattendu ?
Videz tout le localStorage pour remettre l'application à son état initial — utile pour tester les expériences de première utilisation, les flux d'intégration et les configurations par défaut sans effacer les données du navigateur pour d'autres sites.
De nombreuses applications stockent les valeurs de feature flags dans localStorage. Modifiez-les directement pour activer ou désactiver des fonctionnalités sans passer par l'interface de gestion des flags ni redéployer.
Modifiez les préférences utilisateur stockées, les paramètres de thème, les sélections de langue ou les indicateurs de complétion d'intégration pour simuler différents états utilisateur et tester comment l'application gère chacun d'eux.
Voyez quelles données les scripts tiers (analytics, chat, publicité) stockent dans le localStorage de votre domaine. Auditez les données pour la conformité à la vie privée et les usages de stockage inattendus.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Local Storage Editor. Un panneau s'ouvre affichant toutes les entrées localStorage pour le domaine courant.
Faites défiler le tableau clé-valeur. Les valeurs JSON sont automatiquement formatées. Changez d'onglet pour afficher sessionStorage.
Cliquez sur n'importe quelle valeur pour la modifier en ligne. Pour les valeurs JSON, un éditeur formaté apparaît. Les modifications sont enregistrées dans l'API de stockage immédiatement.
Cliquez sur "Add Entry" pour créer une nouvelle paire clé-valeur. Cliquez sur l'icône de suppression d'une ligne pour la retirer. "Clear All" supprime tout.
Après avoir modifié les valeurs de stockage, interagissez avec la page pour voir comment l'application réagit aux données modifiées.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
