Inspecteur de stockage

L'inspecteur de stockage permet d'inspecter différents types de stockage qu'une page web peut utiliser. Actuellement, il peut être utilisé pour inspecter les types de stockage suivants :

• Cookies - Tout les cookies créés par la page ou par n'importe quel iframe dans la page. Les cookies créés par des réponses d'appel réseaux sont également listés, mais seulement s'il s'agit d'appels qui ont eu lieu alors que l'outil était ouvert.
• Stockage local - Tout les éléments de stockage local créés par la page ou par n'importe quel iframe dans la page.
• Stockage de session - Tout les éléments de stockage de sessions créés par la page ou par n'importe quel iframe dans la page.
• Indexed DB - Toute les bases de données Indexed DB créées par la page ou par n'importe quel iframe dans la page, leur magasin d'objets et les éléments stockés dans ces magasins.

Ouvrir l'inspecteur de stockage

Une fois activé, il est possible d’ouvrir l'inspecteur de stockage en le sélectionnant depuis le menu des outils de développement. Il faut sélectionner "Inspecteur de Stockage" dans le menu "Développement" (qui est un sous-menu du menu "Outils" sous Mac OS X) ou en utilisant le raccourci clavier Maj+ F9.

La boite à outils apparaitra en bas de la fenêtre du navigateur, avec l'inspecteur de stockage activé. L'onglet est nommé "Stockage".

Interface utilisateur de l'inspecteur de stockage

L'interface utilisateur de l'inspecteur de stockage est divisée en trois principaux composants :

• Arbre de stockage
• Tableau
• Panneau latéral

Arbre de stockage

L'arbre de stockage liste tous les types de stockage que l'inspecteur de stockage peut inspecter. Pour chaque type, il y a une liste de toutes les origines possibles disponibles. Une origine n'est rien de plus qu'un domaine ou un hôte pour les différents types de stockage. Pour les cookies, le protocole n'est pas différencié de l'origine, alors que pour l'Indexed DB ou le stockage local il s'agit d'une combinaison d'un protocole et d'un hôte. Par exemple https://mozilla.org et https://mozilla.org sont deux origines différentes et le stockage local entre autres ne peut pas être partagé par ceux-là.

Les cookies, le stockage local et le stockage de session sont directement associés à une origine, alors que pour l'Indexed DB, la hiérarchie a plus de niveaux. Touts les éléments Indexed DB sont associés avec un magasin d'objets qui est lui même associé à une base de donnée, et finalement une base de donnée est associée à une origine.

Il est possible de cliquer sur chaque élément de l'arbre pour l'étendre ou pour le réduire. Cet arbre est synchronisé, donc si une nouvelle origine est ajoutée (par l’addition d'un iframe), elle sera ajouté automatiquement à chaque type de stockage de l'arbre. Cliquer sur les éléments de l'arbre chargera son contenu dans le tableau à sa droite. Par exemple cliquer sur une origine dans le type de stockage cookie affichera tous les cookies du domaine de l'arbre.

Tableau

Le tableau est l'endroit ou tous les éléments correspondants à l'élément sélectionné de l'arbre (que cela soit une origine ou une base de données) sont listés. Le nombre de colonnes dépend du type de stockage.

Toutes les colonnes du tableau sont redimensionnables et peuvent être cachées via le menu contextuel de l'en-tête du tableau avec 2 colonnes minimum.

Cookies

Quand une origine dans le stockage des cookies est sélectionnée dans l'arbre de stockage, tous les cookies présents dans cette origine seront listés dans le tableau. Le tableau comporte les colonnes suivantes lorsque il affiche des cookies:

• Nom - Le nom du cookie
• Chemin - Le chemin d'accès du cookie
• Domaine - Le domaine du cookie
• Expire le - Le moment où le cookie expirera. Si c'est un cookie de session, la valeur de cette colone sera "Session"
• Created On - Le moment où le cookie à été créé
• Dernier accès le - Le moment où la cookie à été lu pour la dernière fois
• Valeur - La valeur du cookie
• isDomain - Si le cookie est un cookie de domaine, c'est à dire si il commence par un "."
• isSecure - Si c'est un cookie sécurisé
• isHttpOnly - Si c'est un cookie http uniquement

Stockage Local / Stockage de session

Quand une origine sélectionnée correspond à du stockage local ou du stockage de session, le tableau listera le nom et la valeur de tous les articles correspondant au stockage local ou au stockage de session.

Origine IndexedDB

Lorsque qu'une origine présente à l’intérieur du stockage de l'Indexed DB est sélectionnée, le tableau liste les détails de toutes les bases de données présentes pour cette origine. Chaque base a les détails suivants :

• Nom de la base de données - Le nom de la base de donnée
• Origine - L'origine à laquelle elle appartient
• Version - La version de la base de donnée
• Magasins d'objets- Le nombre de magasins d’objets stockés dans la base de donnée

Base de donnée Indexed DB

Quand une base de donnée IndexedDB est sélectionnée dans l'arbre de stockage, les détails sur tous ses magasins d'objets sont listés. Chaque magasin a les détails suivants :

• Nom du magasin d'objets - Le nom du magasin d'objets
• Clé- Le chemin de la propriété du magasin
• Incrémentation auto - Si l'incrémentation automatique est activée ou non
• Indexes - Tableau des index qui sont présents dans le magasin, voir ci dessous :

Magasin d'objets IndexedDB

Quand un magasin d'objets est sélectionné dans l'arbre de stockage, tous les objets présents dans ce magasin sont listés dans le tableau. Tous les objets ont une clé et une valeur qui leur est associé.

Panneau Latéral

Lorsque qu'une ligne dans le tableau est sélectionnée, le panneau latéral apparait avec tous les détails de la ligne en question. Si un cookie est sélectionné, cela listera tous les détails de ce cookie. Le panneau latéral est aussi capable d'analyser la valeur d'un cookie ou d'un élément de stockage local ou d'un élément IndexedDB et de le convertir en un objet au lieu d'une simple chaine de caractères. Par exemple, une chaine de caractères JSON comme '{"toto": "titi"}'est affiché comme le JSON original {toto: "titi"} , une clé séparée par des valeurs telles que : 1~2~3~4 est affichée comme un tableau : [1, 2, 3, 4] etc. Voici quelques captures d'écran donnant des exemples de différents types de valeurs analysés :

Une chaine de caractères JSON affichée comme du JSON original dans la section 'parsed value' du panneau latéral.

Un couple clé-valeur affiché en JSON dans la section 'parsed value' du panneau latéral.

Un chaine de caractères contenant des valeurs séparées affichée en tableau dans la section 'parsed value' du panneau latéral.