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


当前回答

如果使用Firebug,可以使用console.log输出一个对象,并在控制台中获得一个超链接的可浏览项。

其他回答

虽然有点晚了,但这里有一个非常方便的函数,使用起来超级简单,允许您传递任意类型的参数,并将在浏览器控制台窗口中显示对象内容,就像您从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请求

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

正如其他人所说,您可以使用Firebug,这将使您不必担心Firefox。Chrome和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.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(变量))。这会为你节省大量的时间

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

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)