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

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

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

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

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

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

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

这是我的解决方案。它很好地复制了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"}));

对于那些不知道输入变量类型的人来说，对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;
    }
}

你可以简单地使用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

以后谢谢我!

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

再看看这个Stack-O的答案

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

结果是:

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