web-dev-qa-db-fra.com

Comment inspecter des objets Javascript

Comment puis-je inspecter un objet dans une boîte d'alerte? Normalement, alerter un objet renvoie simplement le nom de noeud:

alert(document);

Mais je veux obtenir les propriétés et les méthodes de l'objet dans la zone 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.

javascriptobjectinspect
94
Valentina

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

Remarque: Les propriétés privées ne sont pas disponibles à l'inspection, sauf si vous utilisez un "espion"; En gros, vous remplacez l'objet et écrivez du code qui effectue une boucle entrante dans le contexte de l'objet.

Pour dans 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 serai ravi de le partager.

Edit 2: Bien, j'en ai écrit un quand même.

55
Christian

Que diriez-vous de alert(JSON.stringify(object)) avec un navigateur moderne?

Dans le cas de TypeError: Converting circular structure to JSON, Voici plus d'options: Comment sérialiser un 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 personnalisation de la sortie.

190
Torsten Becker

Utilisez console.dir(object) et le plugin Firebug

39
Ranjeet

Il y a peu de 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, le .constructor ou .prototype peut être utile:

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

Utilisez votre console:

console.log(object);

Ou, si vous inspectez des éléments dom html, 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 éditez 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.

16
Richard Torcato
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);
9
moe

C'est l'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
6
vaFyreHeart

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

Utilisez comme ceci:

document.write(inspect(object));
4
Muhammad Eko Avianto