Quel est l'équivalent JavaScript de var_dump ou print_r en PHP ?

Question

Je voudrais voir la structure d'un objet en JavaScript (pour le débogage). Existe-t-il quelque chose de similaire à var_dump en PHP ?

Answer 1

La plupart des navigateurs modernes disposent d'une console dans leurs outils de développement, utile pour ce type de débogage.

console.log(myvar);

Vous obtiendrez alors dans la console une interface joliment représentée de l'objet ou de tout autre élément.

Consultez le console pour plus de détails.

Answer 2

Le moyen le plus courant :

console.log(object);

Cependant, je dois mentionner JSON.stringify qui est utile pour vider les variables dans les scripts non-browser :

console.log( JSON.stringify(object) );

El JSON.stringify prend également en charge la préttification intégrée, comme l'a souligné l'auteur de l'article. Simon Zyx .

Exemple :

var obj = {x: 1, y: 2, z: 3};

console.log( JSON.stringify(obj, null, 2) ); // spacing level = 2

L'extrait ci-dessus s'imprimera :

{
  "x": 1,
  "y": 2,
  "z": 3
}

Sur caniuse.com vous pouvez afficher les navigateurs qui prennent en charge nativement l'option JSON.stringify fonction : http://caniuse.com/json

Vous pouvez également utiliser la bibliothèque Douglas Crockford pour ajouter JSON.stringify sur les anciens navigateurs : https://github.com/douglascrockford/JSON-js

Docs pour JSON.stringify : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

J'espère que cela vous aidera :-)

Answer 3

J'ai écrit cette fonction JS dump() pour fonctionner comme l'outil PHP var_dump() . Pour afficher le contenu de la variable dans une fenêtre d'alerte : dump(variable) Pour afficher le contenu de la variable dans la page web : dump(variable, 'body') Pour obtenir simplement une chaîne de caractères de la variable : dump(variable, 'none')

/* repeatString() returns a string which has been repeated a set number of times */
function repeatString(str, num) {
    out = '';
    for (var i = 0; i < num; i++) {
        out += str;
    }
    return out;
}

/*
dump() displays the contents of a variable like var_dump() does in PHP. dump() is
better than typeof, because it can distinguish between array, null and object.
Parameters:
    v:              The variable
    howDisplay:     "none", "body", "alert" (default)
    recursionLevel: Number of times the function has recursed when entering nested
                    objects or arrays. Each level of recursion adds extra space to the
                    output to indicate level. Set to 0 by default.
Return Value:
    A string of the variable's contents
Limitations:
    Can't pass an undefined variable to dump(). 
    dump() can't distinguish between int and float.
    dump() can't tell the original variable type of a member variable of an object.
    These limitations can't be fixed because these are *features* of JS. However, dump()
*/
function dump(v, howDisplay, recursionLevel) {
    howDisplay = (typeof howDisplay === 'undefined') ? "alert" : howDisplay;
    recursionLevel = (typeof recursionLevel !== 'number') ? 0 : recursionLevel;

    var vType = typeof v;
    var out = vType;

    switch (vType) {
        case "number":
        /* there is absolutely no way in JS to distinguish 2 from 2.0
           so 'number' is the best that you can do. The following doesn't work:
           var er = /^[0-9]+$/;
           if (!isNaN(v) && v % 1 === 0 && er.test(3.0)) {
               out = 'int';
           }
        */
        break;
    case "boolean":
        out += ": " + v;
        break;
    case "string":
        out += "(" + v.length + '): "' + v + '"';
        break;
    case "object":
        //check if null
        if (v === null) {
            out = "null";
        }
        //If using jQuery: if ($.isArray(v))
        //If using IE: if (isArray(v))
        //this should work for all browsers according to the ECMAScript standard:
        else if (Object.prototype.toString.call(v) === '[object Array]') {
            out = 'array(' + v.length + '): {\n';
            for (var i = 0; i < v.length; i++) {
                out += repeatString('   ', recursionLevel) + "   [" + i + "]:  " +
                    dump(v[i], "none", recursionLevel + 1) + "\n";
            }
            out += repeatString('   ', recursionLevel) + "}";
        }
        else {
            //if object
            let sContents = "{\n";
            let cnt = 0;
            for (var member in v) {
                //No way to know the original data type of member, since JS
                //always converts it to a string and no other way to parse objects.
                sContents += repeatString('   ', recursionLevel) + "   " + member +
                    ":  " + dump(v[member], "none", recursionLevel + 1) + "\n";
                cnt++;
            }
            sContents += repeatString('   ', recursionLevel) + "}";
            out += "(" + cnt + "): " + sContents;
        }
        break;
    default:
        out = v;
        break;
    }

    if (howDisplay == 'body') {
        var pre = document.createElement('pre');
        pre.innerHTML = out;
        document.body.appendChild(pre);
    }
    else if (howDisplay == 'alert') {
        alert(out);
    }

    return out;
}

Answer 4

L'équivalent de var_dump en JavaScript ? Tout simplement, il n'y en a pas.

Mais cela ne veut pas dire que vous restez impuissant. Comme certains l'ont suggéré, utilisez Firebug (ou équivalent dans d'autres navigateurs), mais contrairement à ce que d'autres ont suggéré, n'utilisez pas console.log lorsque vous disposez d'un outil (légèrement) meilleur console.dir :

console.dir(object)

Imprime une liste interactive de toutes les propriétés de l'objet. Ce site est identique à la vue que vous verriez dans l'onglet DOM.

Answer 5

Firebug .

Ensuite, dans votre javascript :

var blah = {something: 'hi', another: 'noway'};
console.debug("Here is blah: %o", blah);

Maintenant vous pouvez regarder la console, cliquer sur la déclaration et voir ce qu'il y a dedans blah