Débogage des applications IndexedDB

IEBlog Français

Blog de l'équipe de développement de Windows Internet Explorer

Débogage des applications IndexedDB

  • Comments 0

IndexedDB est une ébauche de travail du W3C permettant aux développeurs JavaScript de stocker et de rechercher des données sur le client local de l'utilisateur, mais aussi d'extraire ces données, même en l'absence de connectivité Internet. Dans ce billet, nous décrivons IDBExplorer, un outil que nous utilisons en interne pour déboguer les applications IndexedDB. IDBExplorer permet de visualiser les schémas de base de données, le contenu de magasins d'objets et les détails d'index.

Découverte de l'outil à travers un exemple d'application IndexedDB

Pour illustrer mes propos, j'ai créé une application permettant d'effectuer le suivi de mes résolutions de nouvelle année à l'aide d'IndexedDB. Elle stocke mes résolutions et y accède localement (sur le système affichant la page Web). Je peux ajouter ou modifier ces résolutions. Le bouton « Done That! » (Fait !) retire la résolution sélectionnée de la liste et supprime sa représentation interne de la base de données.

Capture d'écran partielle d'une application permettant d'effectuer un suivi de ses résolutions de nouvelle année à l'aide d'IndexedDB.

IndexedDB définit une base de données en tant que conteneur d'informations. Chaque base de données contient des magasins d'objets, c'est-à-dire des référentiels d'objets JavaScript. Chaque objet contient des attributs pouvant faire l'objet de requêtes par le biais de l'API. Si vous connaissez le principe des bases de données relationnelles, sachez que les magasins d'objets sont l'équivalent des tables et que chaque objet JavaScript stocké dans un magasin d'objets correspond à un enregistrement. En revanche, les objets stockés dans un magasin d'objets IndexedDB sont traités comme des entités opaques. En outre, ces objets ne contiennent pas forcément les mêmes propriétés.

Si l'on peut comparer un objet JavaScript à un enregistrement dans une base de données relationnelle, les propriétés de cet objet peuvent être considérées comme les colonnes (ou les champs) d'une table. Ainsi, IndexedDB vous permet de définir des index identifiant les propriétés d'objet permettant de rechercher les enregistrements présents dans un magasin d'objets. Par conséquent, les index permettent d'explorer et de rechercher les données IndexedDB en utilisant les valeurs d'attribut d'un objet JavaScript.

IndexedDB autorise la présence de plusieurs bases de données dans chaque domaine. Cet exemple utilise une seule base de données : « NewYear ». L'application stocke mes résolutions dans un magasin d'objets appelé « Resolutions », stocké dans la base de données NewYear. Chaque résolution se présente sous la forme d'un objet JavaScript présentant les attributs suivants :

  • priorityId: sépare les résolutions selon la priorité
  • name: nom de la résolution
  • occurrenceId: détermine à quelle fréquence l'action correspondant à la résolution doit être réalisée
  • dueDate: date à laquelle la résolution est terminée
  • createdDate: date interne à laquelle la résolution a été ajoutée au magasin d'objets
  • categoryId: définit le type d'activité d'une résolution

Vous remarquerez que tous les attributs ne sont pas visibles dans l'interface utilisateur de l'application. Dans certains, ils ne sont utilisés qu'en interne (attribut createdDate, par exemple).

Voici comment l'outil IDBExplorer affiche le contenu du magasin d'objets « Resolutions » :

Capture d'écran partielle de l'outil IDBExplorer affichant le contenu du magasin d'objets « Resolutions ».

Le magasin d'objets « Resolutions » contient également un index sur l'attribut priorityId, appelé « priorityId ». Il permet à l'application d'envoyer des requêtes d'objets en utilisant la propriété priorityId. La description de chaque valeur priorityId est disponible dans le magasin d'objets « Priorities ». La description des valeurs occurrenceId est quant à elle disponible dans le magasin d'objets « Occurrences ». De même, la description des valeurs categoryId se trouve dans le magasin d'objets « Categories ».

L'outil utilise une arborescence pour illustrer ces relations :

Capture d'écran de l'outil IDBExplorer montrant que la base de données contient cinq résolutions.

L'outil IDBExplorer montre que ma base de données contient cinq résolutions (deux tâches prioritaires, deux tâches de priorité moyenne et une tâche de faible priorité).

À l'aide de l'application, je peux ajouter une nouvelle résolution :

Capture d'écran partielle de l'application « New Year’s Resolutions » illustrant l'ajout d'une résolution.

L'application récupère les valeurs des champs Occurrence, Priority et Category des magasins d'objets correspondants à l'aide de curseurs et les présente à l'utilisateur. L'outil IDBExplorer permet de voir à quoi correspondent ces valeurs dans le magasin d'objets. Par exemple, si vous sélectionnez le magasin d'objets Categories, les catégories disponibles et leurs descriptions s'affichent :

Capture d'écran de l'outil IDBExplorer montrant comment sont représentées les valeurs dans le magasin d'objets.

Vous pouvez mettre à jour une résolution en la sélectionnant dans l'écran « WorkOn » et en choisissant « Edit » (Modifier). Une fois que vous avez apporté les modifications souhaitées, appuyez sur le bouton « Update » (Mettre à jour) pour valider les modifications et mettre à jour les valeurs dans le magasin d'objets « Resolutions ».

Capture d'écran partielle de l'application « New Year’s Resolutions » illustrant la mise à jour d'une résolution, en la sélectionnant dans l'écran « WorkOn ».

Utilisation d'IDBExplorer dans vos applications

Vous pouvez intégrer l'outil IDBExplorer à votre application de style Metro ou à votre site Web. Cependant, nous vous recommandons de ne pas déployer cet outil en même temps que l'application.

Pour ajouter l'outil à votre site, copiez le package IDBExplorer et extrayez son contenu dans votre site. Votre application devra contenir un lien vers le fichier IDBExplorer.html qui se trouve dans le dossier IDBExplorer, en utilisant soit un élément IFrame, soit une nouvelle fenêtre.

Dans notre exemple, nous avons décidé d'héberger l'outil IDBExplorer dans un élément IFrame. . Cependant, dans le cadre d'un développement standard, nous vous recommandons d'héberger cette URI dans une nouvelle fenêtre. Vous pourrez ainsi voir les informations côte à côte lorsque vous déboguez votre base de données et l'application, sans que cela influe sur l'interface utilisateur de votre site.

Lorsque vous hébergez IDBExplorer, vous devez transmettre le nom de la base de données par le biais de la chaîne de requête. Dans cet exemple, nous avons utilisé pour cela l'attribut src de l'élément IFrame :

<iframe id="debuggerId" class="debuggerContainer" src="IDBExplorer/IDBExplorer.html?name=NewYear"></iframe>

Si vous prévoyez d'héberger cette fonctionnalité dans une application de style Metro, n'oubliez pas que ces dernières sont exécutées en plein écran. Par conséquent, vous devez permettre l'accès à cette URL plutôt que d'ouvrir une nouvelle fenêtre (pour cela, vous devrez ajouter un bouton Retour au fichier IDBExplorer.html, pour permettre de revenir à l'application). Vous pouvez également ajouter un élément IFrame et afficher l'outil à l'intérieur de cet élément.

Amusez-vous bien avec cet outil et n'hésitez pas à nous donner votre avis !

—Israel Hilerio, chef de projet, Internet Explorer

  • Loading...