variable - ¿Hay un equivalente para var_dump(PHP) en Javascript?

php javascript alert

Question

Necesitamos ver qué métodos / campos tiene un objeto en Javascript.

Answer 1

Basado en las funciones anteriores encontradas en este post. Modo recursivo agregado y sangría.

function dump(v, s) {
  s = s || 1;
  var t = '''';
  switch (typeof v) {
    case "object":
      t += "/n";
      for (var i in v) {
        t += Array(s).join(" ")+i+": ";
        t += dump(v[i], s+3);
      }
      break;
    default: //number, string, boolean, null, undefined 
      t += v+" ("+typeof v+")/n";
      break;
  }
  return t;
}

Ejemplo

var a = {
  b: 1,
  c: {
    d:1,
    e:2,
    d:3,
    c: {
      d:1,
      e:2,
      d:3
    }
  }
};

var d = dump(a);
console.log(d);
document.getElementById("#dump").innerHTML = "<pre>" + d + "</pre>";

Resultado

b: 1 (number)
c: 
   d: 3 (number)
   e: 2 (number)
   c: 
      d: 3 (number)
      e: 2 (number)

Answer 2

Como dijeron los demás, puedes usar Firebug, y eso te resolverá sin preocuparte por Firefox. Chrome y Safari tienen una consola de desarrollador incorporada que tiene una interfaz casi idéntica a la de Firebug, por lo que su código debería ser portátil en esos navegadores. Para otros navegadores, hay Firebug Lite .

Si Firebug no es una opción para ti, prueba este sencillo 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)
}

Recomiendo no alertar a cada propiedad individual: algunos objetos tienen MUCHAS propiedades y estará allí todo el día haciendo clic en "OK", "OK", "OK", "O ... joder, esa era la propiedad que estaba buscando".

Answer 3

Desea ver el objeto completo (todos los niveles anidados de objetos y variables dentro de él) en forma JSON. JSON significa Notación de objetos de JavaScript, e imprimir una cadena JSON de su objeto es un buen equivalente de var_dump (para obtener una representación de cadena de un objeto JavaScript). Afortunadamente, JSON es muy fácil de usar en el código, y el formato de datos JSON también es bastante fácil de leer.

Ejemplo:

var objectInStringFormat = JSON.stringify(someObject);
alert(objectInStringFormat);

Answer 4

El siguiente es mi var_dump / print_r equivalente en Javascript a PHP 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;
 }

Answer 5

Mejoré la respuesta de Nickf, así que recursivamente recorre los objetos:

function var_dump(obj, element)
{
    var logMsg = objToString(obj, 0);
    if (element) // set innerHTML to logMsg
    {
        var pre = document.createElement(''pre'');
        pre.innerHTML = logMsg;
        element.innerHTML = '''';
        element.appendChild(pre);
    }
    else // write logMsg to the console
    {
        console.log(logMsg);
    }
}

function objToString(obj, level)
{
    var out = '''';
    for (var i in obj)
    {
        for (loop = level; loop > 0; loop--)
        {
            out += "    ";
        }
        if (obj[i] instanceof Object)
        {
            out += i + " (Object):/n";
            out += objToString(obj[i], level + 1);
        }
        else
        {
            out += i + ": " + obj[i] + "/n";
        }
    }
    return out;
}

Answer 6

Muchos navegadores modernos soportan la siguiente sintaxis:

JSON.stringify(myVar);

Answer 7

No se puede decir lo suficiente como para que puedas usar console.debug (objeto) para esto. Esta técnica te ahorrará literalmente cientos de horas al año si haces esto para vivir: p

Answer 8

Para responder a la pregunta desde el contexto del título de esta pregunta, aquí hay una función que hace algo similar a un var_dump de PHP. Solo descarga una variable por llamada, pero indica el tipo de datos así como el valor e itera a través de matrices y objetos [incluso si son matrices de objetos y viceversa]. Estoy seguro de que esto se puede mejorar. Soy más de un chico de PHP.

/**
 * 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://.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;
    }
}

Answer 9

Si está buscando una función PHP convertida en JS, hay un pequeño sitio: http://phpjs.org . Allí puede obtener la mayoría de la función PHP escrita de forma fiable en JS. para var_dump intente: http://phpjs.org/functions/var_dump/ (asegúrese de revisar el comentario principal, esto depende de "echo", que también se puede descargar desde el mismo sitio)

Answer 10

Si está utilizando Firefox, la consola de plug-in de firebug es una excelente manera de examinar objetos.

console.debug(myObject);

Alternativamente, puede recorrer las propiedades (incluidos los métodos) de esta manera:

for (property in object) {
    // do what you want with property, object[property].value
}

Answer 11

Si usa Firebug, puede usar console.log para generar un objeto y obtener un elemento explorable con hipervínculo en la consola.

Answer 12

Tarde en el juego, pero aquí hay una función realmente útil que es muy simple de usar, le permite pasar tantos argumentos como desee, de cualquier tipo, y mostrará el contenido del objeto en la ventana de la consola del navegador como si llamara una consola. iniciar sesión desde JavaScript, pero desde PHP

Tenga en cuenta que también puede utilizar etiquetas pasando ''TAG-YourTag'' y se aplicará hasta que se lea otra etiqueta, por ejemplo, ''TAG-YourNextTag''

/*
*   Brief:          Print to console.log() from PHP
*   Description:    Print as many strings,arrays, objects, and other data types to console.log from PHP.
*                   To use, just call consoleLog($data1, $data2, ... $dataN) and each dataI will be sent to console.log - note that
*                   you can pass as many data as you want an this will still work.
*
*                   This is very powerful as it shows the entire contents of objects and arrays that can be read inside of the browser console log.
*                   
*                   A tag can be set by passing a string that has the prefix TAG- as one of the arguments. Everytime a string with the TAG- prefix is
*                   detected, the tag is updated. This allows you to pass a tag that is applied to all data until it reaches another tag, which can then
*                   be applied to all data after it.
*
*                   Example:
*                   consoleLog(''TAG-FirstTag'',$data,$data2,''TAG-SecTag,$data3); 
*                   Result:
*                       FirstTag ''...data...''
*                       FirstTag ''...data2...''
*                       SecTag   ''...data3...'' 
*/
function consoleLog(){
    if(func_num_args() == 0){
        return;
    }

    $tag = '''';
    for ($i = 0; $i < func_num_args(); $i++) {
        $arg = func_get_arg($i);
        if(!empty($arg)){       
            if(is_string($arg)&& strtolower(substr($arg,0,4)) === ''tag-''){
                $tag = substr($arg,4);
            }else{      
                $arg = json_encode($arg, JSON_HEX_TAG | JSON_HEX_AMP );
                echo "<script>console.log(''".$tag." ".$arg."'');</script>";
            }       
        }
    }
}

NOTA: func_num_args () y func_num_args () son funciones php para leer un número dinámico de argumentos de entrada, y permiten que esta función tenga infinitas solicitudes de console.log en una llamada de función

Answer 13

Un poco de mejora en la función de nickf para aquellos que no conocen el tipo de variable que viene:

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;
    }
}

Answer 14

Usé la primera respuesta, pero sentí que faltaba una recursión en ella.

El resultado fue este:

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);
}

Answer 15

console.dir (hacia la parte inferior de la página enlazada) en firebug o el inspector web de google-chrome producirá una lista interactiva de las propiedades de un objeto.

Ver también esta respuesta de Stack-O.

Answer 16

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'');

Estos deberían funcionar correctamente en Google Chrome y Mozilla Firefox (si está ejecutando una versión anterior de Firefox, entonces tiene que instalar el complemento Firebug)
En Internet Explorer 8 o superior, debe hacer lo siguiente:

• Inicie "Herramientas de desarrollo, haciendo clic en el botón F12
• En la lista de pestañas, haga clic en la pestaña "Script"
• Haga clic en el botón "Consola" en el lado derecho

Para obtener más información, puede visitar este URL: https://developer.chrome.com/devtools/docs/console-api