Est-il un équivalent pour var_dump (PHP) en Javascript?

Comme les autres ont dit, vous pouvez utiliser Firebug, et qui va vous arranger pas de soucis sur Firefox. Chrome & Safari à la fois intégré dans la console développeur qui a presque la même interface de la console de Firebug, de sorte que votre code doit être portable dans l'ensemble de ces navigateurs. Pour les autres navigateurs, il y a Firebug Lite.

Si Firebug n'est pas une option pour vous, alors essayez ce simple script:

function dump(obj) {
    var out = '';
    for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
    }

    alert(out);

    //or, if you wanted to avoid alerts...

    var pre = document.createElement('pre');
    pre.innerHTML = out;
    document.body.appendChild(pre)
}

Je le recommande à l'encontre d'alerte de chaque propriété individuelle: certains objets ont BEAUCOUP de propriétés et vous serez là toute la journée en cliquant sur "OK", "OK", "OK", "O... nom d'une pipe qui a la propriété que je cherchais".

Beaucoup de navigateurs modernes soutien de la syntaxe suivante:

JSON.stringify(myVar);

Pour répondre à la question du contexte de l'intitulé de cette question, voici une fonction qui fait la même chose à un PHP var_dump. Il ne décharges d'une variable par appel, mais il indique le type de données ainsi que la valeur et il parcourt de la matrice et des objets [même si elles sont des Tableaux d'Objets et vice versa]. Je suis sûr que cela peut être amélioré. Je suis de plus en plus de PHP gars.

/**
* Does a PHP var_dump'ish behavior.  It only dumps one variable per call.  The
* first parameter is the variable, and the second parameter is an optional
* name.  This can be the variable name [makes it easier to distinguish between
* numerious calls to this function], but any string value can be passed.
* 
* @param mixed var_value - the variable to be dumped
* @param string var_name - ideally the name of the variable, which will be used 
*       to label the dump.  If this argumment is omitted, then the dump will
*       display without a label.
* @param boolean - annonymous third parameter. 
*       On TRUE publishes the result to the DOM document body.
*       On FALSE a string is returned.
*       Default is TRUE.
* @returns string|inserts Dom Object in the BODY element.
*/
function my_dump (var_value, var_name)
{
//Check for a third argument and if one exists, capture it's value, else
//default to TRUE.  When the third argument is true, this function
//publishes the result to the document body, else, it outputs a string.
//The third argument is intend for use by recursive calls within this
//function, but there is no reason why it couldn't be used in other ways.
var is_publish_to_body = typeof arguments[2] === 'undefined' ? true:arguments[2];
//Check for a fourth argument and if one exists, add three to it and
//use it to indent the out block by that many characters.  This argument is
//not intended to be used by any other than the recursive call.
var indent_by = typeof arguments[3] === 'undefined' ? 0:arguments[3]+3;
var do_boolean = function (v)
{
return 'Boolean(1) '+(v?'TRUE':'FALSE');
};
var do_number = function(v)
{
var num_digits = (''+v).length;
return 'Number('+num_digits+') '+v;
};
var do_string = function(v)
{
var num_chars = v.length;
return 'String('+num_chars+') "'+v+'"';
};
var do_object = function(v)
{
if (v === null)
{
return "NULL(0)";
}
var out = '';
var num_elem = 0;
var indent = '';
if (v instanceof Array)
{
num_elem = v.length;
for (var d=0; d<indent_by; ++d)
{
indent += ' ';
}
out = "Array("+num_elem+") \n"+(indent.length === 0?'':'|'+indent+'')+"(";
for (var i=0; i<num_elem; ++i)
{
out += "\n"+(indent.length === 0?'':'|'+indent)+"|   ["+i+"] = "+my_dump(v[i],'',false,indent_by);
}
out += "\n"+(indent.length === 0?'':'|'+indent+'')+")";
return out;
}
else if (v instanceof Object)
{
for (var d=0; d<indent_by; ++d)
{
indent += ' ';
}
out = "Object \n"+(indent.length === 0?'':'|'+indent+'')+"(";
for (var p in v)
{
out += "\n"+(indent.length === 0?'':'|'+indent)+"|   ["+p+"] = "+my_dump(v[p],'',false,indent_by);
}
out += "\n"+(indent.length === 0?'':'|'+indent+'')+")";
return out;
}
else
{
return 'Unknown Object Type!';
}
};
//Makes it easier, later on, to switch behaviors based on existance or
//absence of a var_name parameter.  By converting 'undefined' to 'empty 
//string', the length greater than zero test can be applied in all cases.
var_name = typeof var_name === 'undefined' ? '':var_name;
var out = '';
var v_name = '';
switch (typeof var_value)
{
case "boolean":
v_name = var_name.length > 0 ? var_name + ' = ':''; //Turns labeling on if var_name present, else no label
out += v_name + do_boolean(var_value);
break;
case "number":
v_name = var_name.length > 0 ? var_name + ' = ':'';
out += v_name + do_number(var_value);
break;
case "string":
v_name = var_name.length > 0 ? var_name + ' = ':'';
out += v_name + do_string(var_value);
break;
case "object":
v_name = var_name.length > 0 ? var_name + ' => ':'';
out += v_name + do_object(var_value);
break;
case "function":
v_name = var_name.length > 0 ? var_name + ' = ':'';
out += v_name + "Function";
break;
case "undefined":
v_name = var_name.length > 0 ? var_name + ' = ':'';
out += v_name + "Undefined";
break;
default:
out += v_name + ' is unknown type!';
}
//Using indent_by to filter out recursive calls, so this only happens on the 
//primary call [i.e. at the end of the algorithm]
if (is_publish_to_body  &&  indent_by === 0)
{
var div_dump = document.getElementById('div_dump');
if (!div_dump)
{
div_dump = document.createElement('div');
div_dump.id = 'div_dump';
var style_dump = document.getElementsByTagName("style")[0];
if (!style_dump)
{
var head = document.getElementsByTagName("head")[0];
style_dump = document.createElement("style");
head.appendChild(style_dump);
}
//Thank you Tim Down [http://stackoverflow.com/users/96100/tim-down] 
//for the following addRule function
var addRule;
if (typeof document.styleSheets != "undefined" && document.styleSheets) {
addRule = function(selector, rule) {
var styleSheets = document.styleSheets, styleSheet;
if (styleSheets && styleSheets.length) {
styleSheet = styleSheets[styleSheets.length - 1];
if (styleSheet.addRule) {
styleSheet.addRule(selector, rule)
} else if (typeof styleSheet.cssText == "string") {
styleSheet.cssText = selector + " {" + rule + "}";
} else if (styleSheet.insertRule && styleSheet.cssRules) {
styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
}
}
};
} else {
addRule = function(selector, rule, el, doc) {
el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
};
}
//Ensure the dump text will be visible under all conditions [i.e. always
//black text against a white background].
addRule('#div_dump', 'background-color:white', style_dump, document);
addRule('#div_dump', 'color:black', style_dump, document);
addRule('#div_dump', 'padding:15px', style_dump, document);
style_dump = null;
}
var pre_dump = document.getElementById('pre_dump');
if (!pre_dump)
{
pre_dump = document.createElement('pre');
pre_dump.id = 'pre_dump';
pre_dump.innerHTML = out+"\n";
div_dump.appendChild(pre_dump);
document.body.appendChild(div_dump);
}  
else
{
pre_dump.innerHTML += out+"\n";
}
}
else
{
return out;
}
}

Si vous utilisez Firebug, vous pouvez utiliser console.journal à la sortie d'un objet et d'obtenir un lien, reproduction d'un élément dans la console.

Un peu d'amélioration sur nickf de la fonction pour ceux qui ne connaissent pas le type de la variable à venir dans:

function dump(v) {
switch (typeof v) {
case "object":
for (var i in v) {
console.log(i+":"+v[i]);
}
break;
default: //number, string, boolean, null, undefined 
console.log(typeof v+":"+v);
break;
}
}

console.log(OBJECT|ARRAY|STRING|...);
console.info(OBJECT|ARRAY|STRING|...);
console.debug(OBJECT|ARRAY|STRING|...);
console.warn(OBJECT|ARRAY|STRING|...);
console.assert(Condition, 'Message if false');

Ces Devrait fonctionner correctement Sur Google Chrome et Mozilla Firefox (si vous êtes en cours d'exécution avec l'ancienne version de firefox, de sorte que vous devez installer le plugin Firebug)

Sur Internet Explorer 8 ou supérieur, vous devez procéder comme suit:

• Lancement "Outils de développement, en cliquant sur F12 Bouton
• Sur l'Onglet Liste, cliquez sur "Script" de l'Onglet"
• Cliquez sur "Console" dans le côté droit

Pour plus d'informations vous pouvez visiter cette URL: https://developer.chrome.com/devtools/docs/console-api

J'ai utilisé la première réponse, mais je me sentais manquait une récursivité dans il.

Le résultat a été ce:

function dump(obj) {
var out = '';
for (var i in obj) {
if(typeof obj[i] === 'object'){
dump(obj[i]);
}else{
out += i + ": " + obj[i] + "\n";
}
}
var pre = document.createElement('pre');
pre.innerHTML = out;
document.body.appendChild(pre);
}

Ce qui suit est mon préféré var_dump/print_r équivalent en Javascript pour PHPs var_dump.

 function dump(arr,level) {
var dumped_text = "";
if(!level) level = 0;
//The padding given at the beginning of the line.
var level_padding = "";
for(var j=0;j<level+1;j++) level_padding += "    ";
if(typeof(arr) == 'object') { //Array/Hashes/Objects 
for(var item in arr) {
var value = arr[item];
if(typeof(value) == 'object') { //If it is an array,
dumped_text += level_padding + "'" + item + "' ...\n";
dumped_text += dump(value,level+1);
} else {
dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
}
}
} else { //Stings/Chars/Numbers etc.
dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
}
return dumped_text;
}

Vous pouvez simplement utiliser le package NPM var_dump

npm install var_dump --save-dev

Utilisation:

const var_dump = require('var_dump')
var variable = {
'data': {
'users': {
'id': 12,
'friends': [{
'id': 1,
'name': 'John Doe'
}]
}
}
}
//print the variable using var_dump
var_dump(variable)

Ce sera d'impression:

object(1) {
["data"] => object(1) {
["users"] => object(2) {
["id"] => number(12)
["friends"] => array(1) {
[0] => object(2) {
["id"] => number(1)
["name"] => string(8) "John Doe"
}
}
}
}
}

Lien: https://www.npmjs.com/package/@smartankur4u/vardump

Me remercier plus tard!