Archives par mot-clé : Firebug

HTML 5 : LocalStorage et SessionStorage

HTML5 apporte plusieurs solutions concernant la sauvegarde de données coté client :

  • Web SQL database (qui n’est plus maintenue par le W3C)
  • IndexedDB
  • Local storage et session storage
  • HTML5 File API

Nous allons parler dans cet article de Local storage et session storage qui permettent de sauvegarder coté client des données sous forme clé/valeurs au format texte. La différence entre les 2 est la durée de conservation des données stockées :

  • LocalStorage : pas de limite de temps. Conservé à la fermeture de la page/navigateur.
  • SessionStorage : données conservée seulement le temps d’une session. Cela peut être utile pour partager des infos entre 2 onglets sur le même site, formulaire multi-page.

Ces 2 stores permettent de s’affranchir des limitations des cookies puisqu’on peut sauvegarder 5 Mo au lieu de 4Ko.

Les 2 stores partagent la même interface (api) avec les méthodes suivantes :

  • getItem : Permet de récupérer une valeur via sa clé
  • setItem : Permet de mettre a jour une valeur via sa clé
  • removeItem : Permet de supprimer un item via sa clé
  • clear : Supprime toutes les items du store
  • length : Nombre d’items du store
  • key(n) : retourne la clé à l’index n (null si pas de résultats)

LocalStorage et SessionStorage étant des tableaux, vous pouvez également utiliser les syntaxes suivantes :

window.localStorage.maCle //--> renvoie la valeur associée à la clé maCle
window.sessionStorage["maCle"] //--> renvoie la valeur associée à la clé maCle

Afin d’illustrer cet article, j’ai utilisé le localStorage sur ma page de gestion d’un match de volley que j’avais déjà évoquer dans des articles précédents :

Le LocalStorage va nous permettre de sauvegarder et visualiser les résultats des matchs précédents et sauvegarder les noms des dernières équipes utilisées.

Voici les fonctions qui vont permettre de récuperer et sauvegarder le nom des équipes dans le localStorage :

var getTeamName = function(nb) {
    var storage = window.localStorage;
    //Verifie si navigateur compatible localStorage et si il y a une valeur
    if (storage && storage.getItem('Team' + nb)) {
            return storage.getItem('Team' + nb);
    }
    //On retourne une valeur par défaut
    return "Equipe " + nb;
};

var saveTeamName = function(nb, value) {
    var storage = window.localStorage;
    //Verifie si navigateur compatible localStorage
    if (storage) {
        storage.setItem('Team' + nb, value);
    }
};

On ne peut sauvegarder que du texte. Mais il possible de sauvegarder des objet au format JSON. Nous allons ainsi sauvegardés la liste des matchs sous la forme d’un tableau qui sera sérialisé en JSON.

var storage = window.localStorage;
var saveGame = function (game) {
    var savedGames;
    if (storage) {
        savedGames = JSON.parse(storage.getItem('games')) || [];
        savedGames.push(game);
        storage.setItem('games', JSON.stringify(savedGames));
    }
},
getSavedGames = function () {
    if (storage) {
        return JSON.parse(storage.getItem('games')) || [];
    }
};

Et voila. Vous pouvez voir le résultat ici.

Outils

Les barres de développeurs permettent de consulter les données enregistrées. Voyons comment visualiser ces données sous Chrome et Firebug (voir les références pour un les autres navigateurs).

Sous Chrome, il faut aller dans l’onglet Resources / LocalStorage (ou SessionStorage).

LocalStorage dans Chrome

Sous Firebug, il faut aller dans l’onglet DOM, et regarder dans l’objet LocalStorage.
LocalStorage dans Firebug

Références

Quelques liens utiles :

Conclusion

Le localStorage/SessionStorage est très facile à mettre en œuvre et peut s’avérer très pratique afin d’améliorer les possibilités d’un site/application web. Pour ne rien gâcher, ils sont très bien supportés (même IE8 le supporte !!!) donc utilisable en production.

HTML 5 : Debogage du mode offline

J’ai abordé dans un article précédent la gestion du mode offline en HTML 5.

Voyons comment débugger un site avec une gestion du mode offline.

Chrome

Comment souvent, c’est la barre d’outils de Chrome qui s’avère la plus efficace pour déboguer. Sous Chrome, les événements liés à la mise à jour du cache sont affichés dans la console. On peut ainsi voir la liste des fichiers qui sont téléchargés pour être mis en cache.

Mise à jour du cache applicatif dans Chrome

2 petite précisions qui ont leur importance :

  • Ne mettez pas le manifest lui-même en cache où il sera impossible au navigateur de savoir qu’une nouvelle version est disponible.
  • Comme le document a déjà été chargé dans le navigateur à partir du cache, la nouvelle version ne sera affichée qu’après rechargement (manuel ou via programmation). (cf abonnement à l’événement updateready ci-dessous)

 

//Méthode appelée apres mise à jour du cache
function onUpdateReady() {
  alert('Nouvelle version chargée!');
}
//on s'abonne à l'événement de mise à jour du cache
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady();
}

La console affiche les fichiers en erreurs. Il faut savoir que si il y a une erreur, le cache n’est pas mis à jour.

Erreur lors de la mise à jour du cache applicatif

La liste des ressources en cache peut être visualiser dans la barre d’outils > Ressources > Application Cache.

Visualisation du cache applicatif dans l'onglet Ressources

Il est également possible de vider le cache en se rendant à l’URL chrome://appcache-internals/. Cette page permet de visualiser la liste des sites ayant des données dans l’application cache. Pour chaque site, il est possible de visualiser la liste des fichiers (View Entries) et de supprimer le cache (Remove).

Gestion du cache applicatif de tous les sites dans Chrome

Autres Navigateurs

Afin de débugger plus facilement, voici un script à placer sur votre site qui va logger dans la console les événements liés au cache et simule une mise à jour toutes les 10s.

Dans Firebug, il est possible de consulter, dans l’onglet DOM, l’objet ApplicationCache mais il est toujours vide !!!

Ressources

Astuces pour bien débuger du Javascript avec la Console : Command Line API

Les développeurs web connaissent bien les barres d’outils des navigateurs qui permettent de développer et déboguer plus facilement des sites. Ces barres d’outils mettent à disposition des alias et des fonctions utilitaires pour augmenter votre productivité. A priori, la barre d’outils (qui s’est grandement améliorée) de IE (même dans sa version 10) ne les proposent pas 🙁

$0, $1, …, $4

Ces alias permettent d’accéder aux éléments inspectés via l’inspecteur d’éléments (Firebug ne permet d’accéder qu’aux 2 derniers mais fournit une fonction $n qui permet de récupérer l’un des 5 derniers éléments sélectionné)

Alias $0

$_

Retourne la dernière valeur évaluée dans la console (Chrome seulement)

Alias $_

$ et $$

alias des fonctions document.querySelector() et document.querySelectorAll() (j’avais évoqué ces fonctions dans un article précédent)

Méthode $$

Inspect()

Cette fonction prend en paramètre un objet du DOM et permet de l’afficher dans l’inspecteur d’élément

Méthode Inspect

keys(object) & values(object)

Ces 2 fonctions permettent d’afficher respectivement les clés et les valeurs de propriétés d’un objet.

Méthodes keys values

monitorEvents

Cette fonction permet de logger les évènements émis pour un élément donné. On peut filtrer suivant le type d’événement. Seulement disponible sur Chrome.

Méthode monitorEvents

Copy

Copie le paramètre dans le presse papier. Cela peut être une valeur retournée par une fonction ou un objet.

Clear

Vide la console. Les barres d’outils proposent également des boutons pour le faire.

Références

Astuce pour bien débuger du Javascript sous Chrome

De nos jours, les navigateurs modernes possèdent des outils très puissant de débogage comme Chrome Developer Tools sous Chrome ou Firebug/Outils de développement Web  sous Firefox par exemple.

Pour les 3, les consoles web offre de la complétion sur le JavaScript mais sous Firebug la complétion est plus puissante. En effet, si j’utilise le sélecteur JQuery, j’obtiens les fonctions accessibles via auto complétion comme le montre l’exemple ci dessous.

Firebug avec l'autoCompletionSous Chrome, cela ne fonctionne pas mais j’ai une astuce afin d’obtenir cette auto complétion qui vous permettra de gagner du temps. L’astuce consiste à passer par une variable intermédiaire et la complétion marchera.

sans Variable -> pas d’auto complétion 🙁
Chrome sans autocompletionavec Variable -> Auto complétion 🙂
Chrome avec l'auto-completion

Bon débogage !!!