Comment inspecter les objets Javascript


100

Comment puis-je inspecter un objet dans une boîte d'alerte? Normalement, alerter un objet lance simplement le nom du nœud:

alert(document);

Mais je veux obtenir les propriétés et les méthodes de l'objet dans la boîte d'alerte. Comment puis-je obtenir cette fonctionnalité, si possible? Ou y a-t-il d'autres suggestions?

En particulier, je recherche une solution pour un environnement de production où console.log et Firebug ne sont pas disponibles.


9
faire console.logsur Firefox ou Chrome
KJYe.Name 葉的

1
Je suis confus. Dans un environnement de production, vous avez de vrais utilisateurs, non? Alors, pourquoi voudriez-vous lancer une alerte avec des propriétés d'objet? Peut-être qu'une meilleure solution est de sérialiser l'objet et de le consigner dans un fichier ou d'envoyer un e-mail?
Nathan Long

Peut-être a-t-il besoin de l'alerte comme outil, mais de la fonctionnalité réelle pour faire autre chose. Il peut y avoir toutes sortes de raisons pour lesquelles il / elle pourrait vouloir faire cela, comme afficher des statistiques, ou une occurrence d'erreur, ou faire les deux simplement en passant un objet à tout ce qu'il utilise pour inspecter l'objet.
Christian


C'est parfois JSON.stringifyutile.
BrainSlugs83

Réponses:


56

Les boucles for- inpour chaque propriété d'un objet ou d'un tableau. Vous pouvez utiliser cette propriété pour accéder à la valeur et la modifier.

Remarque: les propriétés privées ne sont pas disponibles pour inspection, sauf si vous utilisez un "espion"; fondamentalement, vous remplacez l'objet et écrivez du code qui effectue une boucle d'entrée dans le contexte de l'objet.

Car en ressemble à:

for (var property in object) loop();

Quelques exemples de code:

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

Edit: Il y a quelque temps, j'ai écrit mon propre inspecteur, si cela vous intéresse, je suis heureux de partager.

Edit 2: Eh bien, j'en ai écrit un de toute façon.


Doit être en quelque sorte protégé de la récursivité. Hashs ( dictionnaires ) avec des identifiants internes de rendu html? Cela pourrait être utile pour noobs de pousser cette vérification dans le code.
Nakilon

@Nakilon J'ai toujours contesté la récursivité infinie, en particulier en PHP. Il existe deux façons de résoudre ce problème: en utilisant un paramètre de profondeur ou en modifiant le hachage et en ajoutant votre propre propriété que vous utilisez pour vérifier la récursivité. La profondeur est probablement plus sûre.
Christian

J'aime mieux cette version de la ligne 7. Il ressemble un peu plus au rubis et fait de jolis espaces r.push (i + '"' + p + '" =>' + (t == 'object'? '{\ N' + xinspect (o [p], i + '') + ('\ n' + i + '},'): o [p] + ''));
BC.

2
Ce morceau de code a totalement détruit Safari Mobile sur iPhone. Je choisirais la solution JSON.stringify ci-dessous pour une alternative plus sûre.
Daniel

1
Cette chose s'est écrasé safari, chrome inspectant un objet, ne le recommanderait pas.
Keno

194

Que diriez-vous alert(JSON.stringify(object))d'un navigateur moderne?

Dans le cas de TypeError: Converting circular structure to JSON, voici plus d'options: Comment sérialiser le nœud DOM en JSON même s'il existe des références circulaires?

La documentation: JSON.stringify()fournit des informations sur le formatage ou la mise en valeur de la sortie.


+1 Bonne suggestion. J'ajouterais qu'il pourrait utiliser jsonview ( jsonviewer.stack.hu ) pour le voir bien.
Christian

2
Si vous vouliez aussi qu'il soit bien formaté, vous pouvez appeler:, alert(JSON.stringify(object, null, 4)4est le nombre d'espaces utilisés pour l'indentation.
Jan Molak

Cela me donne «indéfini» comme sortie. J'essaye de déboguer les tests de karma.
Alex C

1
Il y a des réserves à cette approche. OP dit qu'elle veut inspecter les méthodes de l'objet. stringify ne montrera pas les méthodes: JSON.stringify({f: ()=>{}}) => "{}". En outre, si l'objet implémente la toJSONméthode que vous obtenez ce que retourne la méthode, ce qui est inutile si vous voulez inspecter l'objet: JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'.
Morozov du

39

Utilisation console.dir(object)et le plugin Firebug


4
Cela m'a donné les informations les plus complètes et les plus utiles sur ce que je cherchais. Merci.
Shon

2
Je n'étais pas au courant de la console.dirfonctionnalité. Je ne pouvais pas comprendre pourquoi je ne pouvais plus voir l'objet complet dans Firebug. Cela a maintenant réglé le problème pour moi. Merci!
Andrew Newby

J'ai besoin de savoir s'il y a d'autres avantages en console.logplus de la commodité d'affichage, s'il vous plaît
user10089632

17

Il existe quelques méthodes:

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty) 

Dans un contexte de console, parfois le .constructor ou .prototype peut être utile:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 

17

Utilisez votre console:

console.log(object);

Ou si vous inspectez des éléments html dom, utilisez console.dir (object). Exemple:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

Ou si vous avez un tableau d'objets js, vous pouvez utiliser:

console.table(objectArr);

Si vous sortez beaucoup de console.log (objets), vous pouvez également écrire

console.log({ objectName1 });
console.log({ objectName2 });

Cela vous aidera à étiqueter les objets écrits sur la console.


Ces valeurs affichées changent dynamiquement, en temps réel, ce qui peut être trompeur à des fins de débogage
user10089632

dans Chrome, utilisez les préférences de votre console et cliquez sur Conserver le journal. Maintenant, même si votre script vous redirige vers une autre page, votre console n'est pas effacée.
Richard Torcato

Il semble que ce problème soit lié à Firefox car dans Chrome, sauf si vous utilisez console.log (), les valeurs affichées sont toujours. Vous pourriez suggérer de passer à Chrome, mais vous testez parfois la disponibilité des fonctionnalités du navigateur. En tout cas merci pour le conseil qui peut être utile.
user10089632

Je ne peux pas utiliser consolecar j'utilise le style stackoverflow.com/q/7505623/1480391 et ce n'est pas compatible
Yves M.

9
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);

Comment fait console.log ()? :)
Christian

utilisez Firefox ou Chrome. Obtenez Firebug pour Firefox. un must have
moe

J'étais sarcastique. L'OP a spécifiquement demandé du code JS, et à moins que vous ne suggériez qu'il fouille dans firebug / fox / chrome, je ne sais pas où il trouverait une réponse.
Christian

6

C'est une arnaque flagrante de l'excellente réponse de Christian. Je viens de le rendre un peu plus lisible:

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector

4

Voici mon inspecteur d'objets qui est plus lisible. Parce que le code prend trop de temps à écrire ici, vous pouvez le télécharger à http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

Utilisez comme ceci:

document.write(inspect(object));

2
C'est généralement le cas (et c'est certainement le guide officiel - ne publiez pas de liens), OTOH, pour quelque chose qui est versionné comme celui-ci, cela peut être plutôt sympa, car vous savez que vous allez toujours regarder le le dernier code, et pas une chose périmée qui a été publiée il y a des années et qui pourrait ne plus fonctionner ... - De plus, cet énorme bloc de code aurait l'air assez horrible collé dans un mur de texte SO réponse ... - Hors sujet: ce serait bien s'il y avait un moyen sur SO d'avoir des balises de type "spoiler" pour le code et de pouvoir établir un lien vers une source externe et de la mettre à jour automatiquement (si possible),
BrainSlugs83
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.