如何检查Javascript对象


100

如何检查警报框中的对象?通常,警告对象只会抛出节点名:

alert(document);

但是我想在警报框中获取对象的属性和方法。如果可能,如何实现此功能?还是有其他建议?

尤其是,我正在寻找针对console.log和Firebug不可用的生产环境的解决方案。


9
console.log在Firefox或Chrome
KJYe.Name叶家仁

1
我很困惑。在生产环境中,您有实际用户,对吗?那么,为什么要引发对象属性警报?也许更好的解决方案是序列化对象并将其记录在文件中或发送电子邮件?
内森·朗

也许他/她需要警报作为工具,但实际功能需要执行其他操作。他/她可能要这样做的原因可能有多种,例如显示统计信息或发生错误,或者通过将一个对象简单地传递到他/他正在使用的用于检查该对象的任何对象来完成这两项工作。
基督教徒


有时JSON.stringify是有帮助的。
BrainSlugs83 2015年

Answers:


56

for- in环路,用于在一个物体或阵列中的每个属性。您可以使用此属性获取和更改值。

注意:除非使用“间谍”,否则私有财产不可检查。基本上,您覆盖了对象并编写了一些代码,该代码在对象的上下文内进行了for-in循环。

对于看起来像:

for (var property in object) loop();

一些示例代码:

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

编辑:前一段时间,我写了我自己的检查器,如果您有兴趣,我很乐意分享。

编辑2:好吧,我还是写了一篇。


应该以某种方式防止递归。具有一些内部html渲染器ID的哈希(字典)?对于新手将此检查推送到代码中可能很有用。
Nakilon

@Nakilon我一直都遇到无限递归问题,尤其是在PHP中。有两种方法可以解决此问题:使用depth参数,或修改哈希并添加您自己的用于检查递归的属性。深度可能更安全。
基督教徒

我更喜欢此版本的第7行。它看起来更像ruby,并做了一些不错的空白r.push(i +'“'+ p +'” =>'+(t =='object'?'{\ n'+ xinspect(o [p],i + '')+('\ n'+ i +'},'):o [p] +''));
公元前。

2
这段代码彻底破坏了iPhone上的Safari Mobile。我会去下面的JSON.stringify解决方案,以获得更安全的选择。
丹尼尔(Daniel)

1
这东西使野生动物园坠毁,不建议检查物体。
基诺

194

怎么样 alert(JSON.stringify(object))用现代的浏览器?

如果是TypeError: Converting circular structure to JSON,则有更多选项:即使存在循环引用,如何将DOM节点序列化为JSON?

文档: JSON.stringify()提供有关格式化或美化输出的信息。


+1好建议。我将添加他可以使用jsonview(jsonviewer.stack.hu)很好地查看它。
基督教徒

2
如果您也想对其进行格式化,则可以调用:alert(JSON.stringify(object, null, 4),其中4缩进使用的空格数。
2014年

这给了我“未定义”作为输出。我正在尝试调试业力测试。
Alex C

1
这种方法有一些警告。OP说她想检查对象的方法。stringify 不会显示方法:JSON.stringify({f: ()=>{}}) => "{}"。此外,如果对象实现toJSON方法,你会得到什么方法返回,如果要检查的对象,它是无用的:JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'
Morozov

39

使用console.dir(object)和Firebug插件


4
这为我提供了最全面,最有用的信息。谢谢。

2
我不知道该console.dir功能。我无法弄清楚为什么我无法再在Firebug中查看完整对象。现在已经为我排序了。谢谢!
Andrew Newby

我需要知道console.log除了显示方便之外,还有其他好处
吗?

17

有几种方法:

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty) 

在控制台上下文中,有时.constructor或.prototype可能有用:

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 

17

使用控制台:

console.log(object);

或者,如果您正在检查html dom元素,请使用console.dir(object)。例:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

或者,如果您有一个js对象数组,则可以使用:

console.table(objectArr);

如果要输出很多console.log(objects),也可以编写

console.log({ objectName1 });
console.log({ objectName2 });

这将帮助您标记写入控制台的对象。


这些显示的值实时动态变化,可能会出于调试目的而产生误导
user10089632 '17

在chrome中,请使用您的控制台偏好设置,然后点击保留日志。现在,即使您的脚本将您重定向到另一个页面,您的控制台也不会被清除。
理查德·托卡托

似乎此问题与Firefox有关,因为在Chrome中,除非您重新console.log(),否则显示的值仍然是。您可能建议改用Chrome,但有时您正在测试浏览器功能的可用性。无论如何,感谢可能有用的提示。
user10089632

我无法使用,console因为我使用的是样式stackoverflow.com/q/7505623/1480391,并且不兼容
Yves M.

9
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);

console.log()是如何做到的?:)
基督教徒

使用Firefox或Chrome。获取适用于Firefox的Firebug。一个必须有

我在讽刺。OP特别要求提供JS代码,除非您建议他研究firebug / fox / chrome,否则我不知道他在哪里找到答案。
基督教徒

6

这是对克里斯蒂安出色回答的公然剥夺。我使它更具可读性:

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector

4

这是我的对象检查器,更具可读性。因为在这里写下代码需要很长时间,所以您可以在以下位置下载它 http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

像这样使用:

document.write(inspect(object));

2
OTOH通常就是这种情况(而且绝对是官方指南,请不要发布链接),对于这样的版本,它可能会很不错,因为您知道您将一直在关注最新的代码,而不是几年前发布的一些过时的东西,可能不再起作用了……-而且,巨大的代码块看起来非常糟糕,粘贴到了文本墙中,所以得到了答案……- 主题外:如果在SO上有一种方法可以使用类似“破坏者”的代码标签,并且能够链接到外部源并使其自动更新(可能的话),
那就太好了
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.