Javascript: lister les variables globales d’une page

Javascript: lister les variables globales d'une page

Une des bonnes pratiques élémentaires du Javascript du XXIème siècle consiste à ne pas polluer le namespace avec des variables globales. Ca évite tout un tas de problèmes.

Le petit script de cet article permet de lister facilement les variables globales « custom » déclarées sur la page courante, et permet donc en un clin d’oeil de vérifier si c’est le bazar ou pas 🙂

Le script

Rien de foufou: on crée une iframe vide pour avoir un modèle de l’objet window « de base », puis on en compare les propriétés avec celle de l’objet window du document (je n’utilise pas hasOwnProperty car je veux tout conserver, pas seulement les variables). Ensuite on utilise la console (ou à défaut alert) pour afficher un compteur et un objet ne contenant que les propriétés inédites. Bête et méchant.

(function() {
    var ifrm = document.createElement("iframe"),
        rest = {},
        cnt = 0,
        debug = window.console?console.log:alert;
    ifrm.setAttribute("style","display:none");
    document.body.appendChild(ifrm);
    var ifrw = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document);
    for(var prop in window) {
        if(typeof(ifrw[prop]) === "undefined") {
           rest[prop] = window[prop];
           cnt++;
        }
    }
    ifrm.parentNode.removeChild(ifrm);
    debug("Found " + cnt + " custom object(s)");
    debug(rest);
})();

J'ai rangé ça ainsi qu'une version minifiée et une page de démo dans un petit dépot sur github:

Le bookmarklet

Comme je suis sympa (notamment avec mon moi futur), j'ai créé un bookmarklet de façon à pouvoir récupérer et exécuter ce petit script directement depuis la barre de favoris d'un navigateur.

Glissez donc ce bouton dans votre barre de favoris JS Globals

Leave a Reply