Ce guide vous explique comment utiliser les outils pour les développeurs Chrome pour afficher et modifier les données IndexedDB. Nous partons du principe que vous connaissez bien les outils de développement. Si ce n'est pas le cas, consultez la section Premiers pas. Nous partons également du principe que vous connaissez IndexedDB. Si ce n'est pas le cas, reportez-vous à la section Utiliser IndexedDB.
Afficher les données IndexedDB
Cliquez sur l'onglet Application pour ouvrir le panneau Application. Développez le menu IndexedDB pour voir les bases de données disponibles.
Figure 1 : Le menu IndexedDB
notes : https://mdn.github.io représente une base de données, où notes est le nom de la base de données et https://mdn.github.io est l'origine qui peut accéder à la base de données.
notes est un magasin d'objets.- title et body sont des index.
Cliquez sur une base de données pour afficher son origine et son numéro de version.
Figure 2 : La base de données notes
Cliquez sur un magasin d'objets pour afficher ses paires clé-valeur.
Image 3. Le magasin d'objets notes
- Nombre total d'entrées correspond au nombre total de paires clé-valeur dans le magasin d'objets.
- Key generator value (Valeur du générateur de clés) est la prochaine clé disponible. Ce champ n'est affiché que lors de l'utilisation de générateurs de clés.
Cliquez sur une cellule de la colonne Valeur pour développer la valeur correspondante.
Figure 4. Afficher une valeur IndexedDB
Cliquez sur un index, tel que title ou body (voir la Figure 6 ci-dessous) pour trier le magasin d'objets en fonction des valeurs de cet index.
Figure 5. Un magasin d'objets trié par ordre alphabétique en fonction de sa clé title
Actualiser les données IndexedDB
Les valeurs IndexedDB du panneau Application ne sont pas mises à jour en temps réel. Cliquez sur Refresh (Actualiser) 
lorsque vous consultez un magasin d'objets pour actualiser ses données, ou affichez une base de données et cliquez sur Refresh database (Actualiser la base de données) pour actualiser toutes les données.
Figure 6. Afficher une base de données
Modifier les données IndexedDB
Les clés et valeurs indexées d'une base de données ne sont pas modifiables depuis le panneau Application. Étant donné que les outils de développement ont accès au contexte de la page, vous pouvez y exécuter du code JavaScript qui modifie les données IndexedDB.
Modifier les données IndexedDB à l'aide d'extraits
Les extraits permettent de stocker et d'exécuter des blocs de code JavaScript dans les outils de développement. Lorsque vous exécutez un extrait de code, le résultat est consigné dans la console. Vous pouvez utiliser un extrait pour exécuter du code JavaScript qui modifie une base de données IndexedDB.
Figure 7 : Utiliser un extrait pour interagir avec IndexedDB
Supprimer les données IndexedDB
Supprimer une paire clé-valeur IndexedDB
- Affichez un magasin d'objets IndexedDB.
Cliquez sur la paire clé-valeur que vous souhaitez supprimer. Les outils de développement le mettent en surbrillance en bleu pour indiquer qu'ils sont sélectionnés.
Figure 8 : Sélection d'une paire clé-valeur en vue de la supprimer
Appuyez sur la touche Supprimer ou cliquez sur Supprimer la sélection
.
Figure 9. Apparence du magasin d'objets après la suppression de la paire clé-valeur
Supprimer toutes les paires clé-valeur d'un magasin d'objets
Affichez un magasin d'objets IndexedDB.
Figure 10 : Afficher un magasin d'objets
Cliquez sur Effacer le magasin d'objets
.
Supprimer une base de données IndexedDB
- Affichez la base de données IndexedDB que vous souhaitez supprimer.
Cliquez sur Supprimer la base de données.
Figure 11 : Le bouton Supprimer la base de données
Supprimer tout le stockage IndexedDB
- Ouvrez le volet Vider l'espace de stockage.
- Assurez-vous que la case IndexedDB est cochée.
Cliquez sur Effacer les données des sites.
Figure 12. Volet Effacer les données