Necesitamos ver qué métodos/campos tiene un objeto en Javascript.¿Existe un equivalente para var_dump (PHP) en Javascript?
Respuesta
Como dijeron los otros, puedes usar Firebug, y eso te resolverá sin preocupaciones en Firefox. Chrome & Safari tiene una consola de desarrollador integrada que tiene una interfaz casi idéntica a la consola 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 usted, entonces 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)
}
me gustaría recomendar en contra de alerta cada propiedad individual: algunos objetos tienen una gran cantidad de propiedades y que usted estará allí todo el día presionando "OK", "OK", "OK", "O ... maldita sea esa era la propiedad que estaba buscando".
Recomendaría en contra de eso también - francamente, simplemente usaría console.bug.Pero estaba señalando la posibilidad de un bucle: le corresponde al usuario lo que quiere hacer con cada propiedad. – Ken
He estado usando Firebug por un tiempo, pero no estaba al tanto de Firebug Lite, gracias por señalarlo. . – codefin
@nickf, puedo solicitar su visita en http://stackoverflow.com/questions/9192990/how-to-print-the-associative-array-in-print-r-fashion-from-a-getjson -¿llamada? No sé si tal solicitud en el comentario es aceptable. –
Si está utilizando Firefox entonces la consola firebug plug-in es una manera excelente de objetos que examinan
console.debug(myObject);
Alternativamente puede recorrer las propiedades (incluyendo métodos) como esto:
for (property in object) {
// do what you want with property, object[property].value
}
Si use Firebug, puede usar console.log para generar un objeto y obtener un elemento hiperenlazado y explorable en la consola.
No se puede afirmar lo suficiente como para que pueda usar console.debug (objeto) para esto. Esta técnica le ahorrará literalmente cientos de horas al año si lo hace para ganarse la vida: p
Eso es increíble. Nunca había escuchado de console.bug (objeto) antes de hoy, y me ahorró un montón de tiempo en un formulario con el que he estado luchando durante tres días. Con 20 minutos, lo arreglé. ¡Gracias! – ShiningLight
Una gran cantidad de navegadores actuales son compatibles con la siguiente sintaxis:
JSON.stringify(myVar);
console.dir (hacia la parte inferior de la página del enlace) en firebug o google-chrome web-inspector generará una lista interactiva de las propiedades de un objeto.
Ver también this Stack-O answer
un poco de mejora en la función de nickf para aquellos que no conocen el tipo de la variable que entra:
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;
}
}
he mejorado la respuesta de nickf, por lo que de forma recursiva recorre 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;
}
para responder a la pregunta del contexto del título de esta pregunta, aquí es una función que hace algo similar a un PH P var_dump. Solo descarga una variable por llamada, pero indica el tipo de datos así como el valor e itera a través de objetos y matrices [incluso si son matrices de objetos y viceversa]. Estoy seguro de que esto se puede mejorar. Soy más un tipo 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://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 usted está buscando para la función PHP convertido en JS, no es este pequeño sitio: http://phpjs.org. Allí puede obtener la mayor parte de la función de PHP escrita de manera confiable en JS.para var_dump intento: http://phpjs.org/functions/var_dump/ (asegúrese de comprobar el comentario de la parte superior, esto depende de "eco", que también se puede descargar desde el mismo sitio)
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 deben funcionar correctamente en Google Chrome y Mozilla Firefox (si está ejecutando con la versión antigua de Firefox, así que hay que instalar Firebug plugin)
en Internet Explorer 8 o superior que debe hacer de la siguiente manera:
- lanzamiento "Herramientas de Desarrollo, haciendo clic en el botón F12
- En la lista de pestañas, haga clic en "escritura" Tab"
- Haga clic en 'botón de la consola' en el lado derecho
Para más información se puede visitar la siguiente dirección: https://developer.chrome.com/devtools/docs/console-api
he utilizado la primera respuesta, pero sentí que faltaba una recursividad.
El resultado fue el siguiente:
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);
}
Basado en las funciones anteriores que se encuentran en este post. Se agregó el modo recursivo y la 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)
¿Quieres ver todo el objeto (todos los niveles anidados de objetos y variables dentro de él) en forma JSON. JSON significa Notación de objetos 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 legible.
Ejemplo:
var objectInStringFormat = JSON.stringify(someObject);
alert(objectInStringFormat);
La siguiente es mi favorito var_dump/print_r equivalente en Javascript para los 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;
}
- 1. ¿Cuál es el equivalente .NET de PHP var_dump?
- 2. JavaScript equivalente para PHP preg_replace
- 3. ¿Cuál es el equivalente de JavaScript de var_dump o print_r en PHP?
- 4. ¿Existe un javascript equivalente para descomprimir secuencias como en python?
- 5. ¿Cuál es el equivalente Java de PHP var_dump?
- 6. ¿Existe un ColdFusion equivalente a PHP para include_once?
- 7. PHP: colores en var_dump (Ubuntu)
- 8. php var_dump() vs print_r()
- 9. ¿Existe un ClientScriptManager.RegisterClientScriptInclude equivalente para CSS
- 10. ¿Existe un equivalente de print_r de PHP en Ruby/Rails?
- 11. ¿Existe el equivalente de un conjunto de Java en php?
- 12. JavaScript equivalente de preg_replace PHP
- 13. ¿Existe un equivalente elegante para Mac?
- 14. ¿Existe un equivalente xhtml.xsd disponible para HTML5?
- 15. ¿Hay un equivalente a php.net para JavaScript?
- 16. ¿Existe una función equivalente de PHP para Python os.path.normpath()?
- 17. ¿Hay un javascript equivalente a. = Para auto concatenar?
- 18. var_dump() en Scala
- 19. ¿Hay un equivalente print_r o var_dump en Ruby/Ruby on Rails?
- 20. __LINE__ equivalente en Javascript
- 21. Existe un equivalente a size_t en llvm
- 22. Javascript: ¿Existe un equivalente a caniuse.com para las API HTML5/ECMAScript5/ECMAScript6 en los distintos navegadores?
- 23. Javascript equivalente a urldecode de php()
- 24. equivalente de JavaScript para __get de PHP (método mágico)
- 25. ¿Existe un equivalente a Thread.Sleep() en VBA
- 26. ¿Hay un JavaScript equivalente para C# 'params'?
- 27. Javascript equivalente a la lista de PHP()
- 28. PHP equivalente para un decorador de python?
- 29. equivalente de Javascript del strtotime de php()?
- 30. ¿Existe una función similar a setTimeout() (JavaScript) para PHP?
Depende en parte de cómo se desea imprimir, pero este es un muy buen aplicación que devuelve algo de HTML que se puede añadir a su documento (o escribir en un 'div debug'): http://james.padolsey.com/javascript/prettyprint-for-javascript/ –
Creo un código JavaScript que formatea el resultado como var_dump de PHP: http://rubsphp.blogspot.com/2011/03/vardump-para-javascript. html –
Encontré este fragmento de código mucho mejor y lo utilizo en mis proyectos: http://phpjs.org/functions/var_dump:604 – Hafiz