Object Dump JavaScript

89

Existe-t-il un module complémentaire / application tiers ou un moyen d'effectuer un vidage de mappage d'objets dans le débogueur de script pour un objet JavaScript?

Voici la situation ... J'ai une méthode qui est appelée deux fois, et à chaque fois quelque chose est différent. Je ne sais pas ce qui est différent, mais quelque chose l'est. Donc, si je pouvais vider toutes les propriétés de window (ou au moins window.document) dans un éditeur de texte, je pourrais comparer l'état entre les deux appels avec un simple fichier diff. Pensées?

javascript Jessy Houle
la source
Double possible de Comment puis-je afficher un objet JavaScript?
Jan Hudec

Réponses:

61

Firebug +console.log(myObjectInstance)

Darin Dimitrov
la source
4
... puis regardez dans la console Firebug et non dans la console Javascript standard . :-)
towi
3
IE a une console, mais la journalisation d'un objet retourne [object Object]. Pas très utile
Steve Robbins
5
@SteveRobbins, qui utilise IE pour développer des applications Web de nos jours? Personnellement, la seule utilisation que j'ai trouvée jusqu'à présent pour Internet Explorer est de télécharger un vrai navigateur Web une fois que j'ai réinstallé mon système d'exploitation Windows. Au fait, c'est la seule fois que je lance cette paix de logiciels.
Darin Dimitrov
8
Tout développeur prenant en charge les principaux navigateurs. Si le problème n'existe que dans IE, il ne peut être testé que dans IE, vous devez donc utiliser le navigateur.
Steve Robbins
2
Et si vous utilisez node.js et un terminal .. Il n'y a pas de firebug ??
Cheruvim
134 
console.log("my object: %o", myObj)

Sinon, vous vous retrouverez avec une représentation sous forme de chaîne affichant parfois:

[object Object]

ou certains tels.

Tim
la source
3
imprime simplement [Object Object] pour Chrome et Firefox. <shrug>
slashdottir
1
@slashdottir Cela fonctionne absolument dans Chrome et FF. Je l'utilise dans Chrome au moins chaque semaine et occasionnellement dans FF.
Tim
1
@Tim: vous avez raison, ça marche. S'il vous plaît excusez-moi. user err
slashdottir
Comment diable n'est-ce pas la réponse choisie? Heureusement que j'ai répondu à cette question le jour de mon anniversaire il y a 4 ans, lorsque je n'utilisais pas js.
Joey Carson
2
Dans Meteor (côté serveur), il imprime my object: %o. Pas très utile :)
Erdal G.11
45 
function mydump(arr,level) {
    var dumped_text = "";
    if(!level) level = 0;

    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding += "    ";

    if(typeof(arr) == 'object') {  
        for(var item in arr) {
            var value = arr[item];

            if(typeof(value) == 'object') { 
                dumped_text += level_padding + "'" + item + "' ...\n";
                dumped_text += mydump(value,level+1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
            }
        }
    } else { 
        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
    }
    return dumped_text;
}
zhongshu
la source
4
Mettez à jour votre code en changeant le nom de la fonction, comme dans l'appel de récursivité, on l'appelle "dump" tout en définissant l'heure son "mydump"
Vikas
7
Copier et coller de: binnyva.blogspot.com/2005/10/…
utopianheaven
1
cela tue Chrome et Firefox avec "trop ​​de récursivité" lorsqu'il est utilisé pour examiner un objet jquery
slashdottir
@slashdottir c'est facile à réparer, en vérifiantif (level > 10) return level_padding + '<< too deep >>';
John Henckel
Le "trop ​​de récursivité" se produit en raison d'une référence circulaire (lorsque le paramètre enfant d'un objet fait référence à son objet parent). Peut être résolu en se souvenant de tous les parents de la valeur actuelle et si la valeur actuelle correspond à celle des parents, arrêtez de creuser davantage.
Alex Velickiy
42

Si vous êtes sur Chrome, Firefox ou IE10 + pourquoi ne pas étendre la console et utiliser

(function() {
    console.dump = function(object) {
        if (window.JSON && window.JSON.stringify)
            console.log(JSON.stringify(object));
        else
            console.log(object);
    };
})();

pour une solution concise et multi-navigateurs.

Chris HG
la source
J'aime celui la. Surtout pour les navigateurs qui ne prennent pas en charge le dumping d'objets.
Aley
Et peut-être remplacer "else console.log (object);" avec un appel à une fonction de parcours personnalisée comme dans stackoverflow.com/a/3011557/2236012 ci-dessus? ...;)
CB
@CB "trop ​​de récursivité" et un navigateur gelé est ce que cela me procure dans Firefox et Chrome.
slashdottir
3
JSON.stringify ne peut pas sérialiser les structures cycliques. Cela ne fonctionnera pas pour tous les objets.
Grzegorz Luczywo
24

Utilisez simplement:

console.dir(object);

vous obtiendrez une belle représentation d'objet cliquable. Fonctionne dans Chrome et Firefox

mons droïde
la source
1
Chrome et Firefox donnent [objet objet]
slashdottir
Vous pouvez le tester dans la console (Hit F12) avec console.dir({bar:"foo"}); Votre objet écrase-t-il la méthode toString?
mons droid
semble fonctionner au moins dans la console. probablement userr par moi. merci
slashdottir
une telle fonctionnalité douce
tomalone
12

Pour Chrome / Chrome

console.log(myObj)

ou c'est équivalent

console.debug(myObj)
Kaznovac
la source
4

Utiliser console.log(object)lancera votre objet dans la console Javascript, mais ce n'est pas toujours ce que vous voulez. L'utilisation JSON.stringify(object)retournera la plupart des éléments à stocker dans une variable, par exemple pour l'envoyer à une entrée textarea et soumettre le contenu au serveur.

Sébastien
la source