在Javascript中是否有等效的var_dump (PHP) ?

我们需要看看Javascript中对象有什么方法/字段。

315101 次浏览
小开

如果你正在使用firefox，那么firebug插件控制台是一种检查对象的极好方法

console.debug(myObject);

或者你可以像这样循环遍历属性(包括方法):

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

如果你使用Firebug，你可以使用console.log来输出一个对象，并在控制台上获得一个超链接的、可探索的项。

小开
最佳答案

正如其他人所说，您可以使用Firebug，这将使您不必担心Firefox。铬,Safari都有一个内置的开发控制台，它与Firebug的控制台具有几乎相同的界面，因此您的代码应该可以跨这些浏览器移植。对于其他浏览器，有Firebug Lite。

如果Firebug不适合你，那么试试这个简单的脚本:

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

我建议不要提醒每个单独的属性:有些对象有很多属性，你会在那里点击“OK”，“OK”，“OK”，“O…该死，这就是我要找的东西。”

小开

可以使用console.debug(object)来实现这一点再简单不过了。如果你以此为生，这个技巧将为你每年节省数百个小时

小开

很多现代浏览器都支持以下语法:

JSON.stringify(myVar);
小开

在firebug或google-chrome web-inspector中console.dir(指向链接页面的底部)将输出一个对象属性的交互式列表。

另见这个Stack-O答案

小开

对于那些不知道输入变量类型的人来说，对nickf函数做了一点改进:

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

我改进了nickf的答案，所以它递归循环遍历对象:

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

为了从问题标题的上下文中回答这个问题，这里有一个函数，它的功能类似于PHP var_dump。它每次调用只转储一个变量，但它指出数据类型以及值，并遍历数组和对象[即使它们是对象的数组，反之亦然]。我相信这是可以改进的。我更喜欢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;
}
}
小开
如果你正在寻找PHP函数转换成JS，有这个小网站:http://phpjs.org。 在那里，你可以用JS可靠地编写大部分PHP函数。对于var_dump尝试:http://phpjs.org/functions/var_dump/(确保检查顶部注释，这取决于“echo”，也可以从同一站点下载)

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

这些应该在谷歌Chrome和Mozilla Firefox上正常工作(如果你运行的是旧版本的Firefox，所以你必须安装Firebug插件)
在ie8及以上版本浏览器中，需要执行如下操作:

  • 启动“开发人员工具”，点击F12按钮
  • 在标签列表中，点击“脚本”标签
  • 点击右边的“控制台”按钮

有关更多信息，您可以访问这个URL: https://developer.chrome.com/devtools/docs/console-api

小开

我用了第一个答案，但我觉得里面少了一个递归。

结果是:

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

基于之前在这篇文章中找到的函数。 增加了递归模式和缩进 

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

例子

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

结果

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

您希望以JSON形式看到整个对象(对象和变量的所有嵌套层)。JSON代表JavaScript对象表示法，打印出对象的JSON字符串相当于var_dump(以获得JavaScript对象的字符串表示)。幸运的是，JSON很容易在代码中使用，而且JSON数据格式也很适合人类阅读。

例子:

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

下面是我最喜欢的var_dump / print_r等效 Javascript到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;
}
小开

虽然有点晚了，但这里有一个非常方便的函数，使用起来超级简单，允许您传递任意类型的参数，并将在浏览器控制台窗口中显示对象内容，就像您从JavaScript调用console.log一样——但是从PHP调用的

注意，你也可以使用标签通过传递" tag - yourtag "它将被应用，直到读取另一个标签，例如" 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>";
}
}
}
}

注意:func_num_args ()和func_num_args ()是php函数，用于读取动态数量的输入参数，并允许这个函数从一个函数调用中有无限多个console.log请求

小开

你可以简单地使用NPM包var_dump

npm install var_dump --save-dev

用法:

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)

这将打印:

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

链接:https://www.npmjs.com/package/@smartankur4u/vardump

以后谢谢我!

小开

这是我的解决方案。它很好地复制了var_dump的行为，并允许嵌套对象/数组。注意，它不支持多个参数。

function var_dump(variable) {
let out = "";
  

let type = typeof variable;
if(type == "object") {
var realType;
var length;
if(variable instanceof Array) {
realType = "array";
length = variable.length;
} else {
realType = "object";
length = Object.keys(variable).length;
}
out = `${realType}(${length}) {`;
for (const [key, value] of Object.entries(variable)) {
out += `\n [${key}]=>\n ${var_dump(value).replace(/\n/g, "\n  ")}\n`;
}
out += "}";
} else if(type == "string") {
out = `${type}(${type.length}) "${variable}"`;
} else {
out = `${type}(${variable.toString()})`;
}
return out;
}
console.log(var_dump(1.5));
console.log(var_dump("Hello!"));
console.log(var_dump([]));
console.log(var_dump([1,2,3,[1,2]]));


console.log(var_dump({"a":"b"}));

小开

我只是想添加一些关于console.log的相对重要的东西

如果您正在调试大型变量(如大型音频或视频数据缓冲区)。当你打印console.log(big_variable)时，控制台只会显示其中的一小部分。(这似乎有点明显)。

然而，如果变量处于循环中，并且该变量不断变化，如果您曾经“将其复制到剪贴板中”;，浏览器会做的是再次请求变量(在你复制的时候可能已经改变了)。

我来告诉你我的故事。我正在编写一个处理大块音频数据的应用程序，使用大小为8192的float32数组。如果缓冲区具有某些特征，我将使用console.log()打印变量，然后获取该变量进行测试并摆弄它(甚至将其用于模拟，以便进行自动化测试)

然而，结果永远不会成立。麦克风会捕捉音频数据，存储在这个上。audioBuffer变量和整个事情将工作，但当我从console.log复制那个确切的变量时，我可以把它作为一个模拟来运行一些自动化测试，行为将发生巨大变化。

我花了一段时间才明白这一点，显然，每当我“复制”;或者“将变量设置为global”;在调试器中，JSVM将要求this，而不是复制console.log中显示的变量。audioBuffer。由于变量是在循环中使用的，麦克风仍然会录音，我将得到一个完全不同的声音数组，而不是我正在听的声音，并认为音频缓冲区是放在第一位的。

如果您正在处理大型复杂数据结构，如音频或视频文件，图像文件……当你在chrome /firefox / edge控制台读取这些值时，这些值可能会发生变化，请确保你不是console.log(变量)，而是console.log(JSON.stringify(变量))。这会为你节省大量的时间


提交答案