2011-03-18 72 views
85

如何检查警报框中的对象?通常提醒一个对象只是抛出nodename:如何检查Javascript对象

alert(document); 

但我想要在警告框中的对象的属性和方法。如果可能,我怎样才能实现这个功能?或者还有其他建议吗?

特别是,我正在为console.log和Firebug不可用的生产环境寻求解决方案。

+9

做'在Firefox或Chrome – kjy112 2011-03-18 20:24:15

+1

我很困惑console.log'。在生产环境中,你有实际的用户,对吧?那么,为什么你要用对象属性抛出一个警报?也许更好的解决方案是序列化对象并将其记录在文件中或发送电子邮件? – 2011-03-19 00:17:28

+0

也许他/她需要警报作为工具,但是需要实际的功能来做其他事情。可能有各种各样的原因,为什么他/她可能想要这样做,比如显示统计数据或发生错误,或者通过简单地将对象传递给用来检查对象的任何对象。 – Christian 2011-03-21 00:06:25

回答

54

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:好吧,我写了一个。

+0

应该以某种方式保护递归。散列(*字典*)与一些内部的html渲染器id?对于noobs将此检查插入代码可能会有用。 – Nakilon 2012-04-03 06:58:27

+0

@Nakilon我总是遇到无限递归的问题,特别是在PHP中。有两种方法可以解决这个问题:使用深度参数,或修改散列并添加您用于检查递归的属性。深度可能更安全。 – Christian 2012-04-03 07:08:31

+0

我更喜欢这个版本的第7行。它看起来更像红宝石,并做了一些漂亮的空白 r.push(i +'''+ p +'“=>'+(t =='object'?'{\ n'+ xinspect(o [p] ,i +'')+('\ n'+ i +'},'):o [p] +'')); – 2012-06-12 21:20:55

8
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); 
+0

console.log()如何做到这一点? :) – Christian 2011-03-18 20:28:04

+0

使用Firefox或Chrome。获取Firefox的Firebug。一个必须有 – moe 2011-03-18 20:29:00

+0

我正在讽刺。 OP特意要求JS代码,除非你建议他钻研firebug/fox/chrome,否则我不知道他会在哪里找到答案。 – Christian 2011-03-18 20:46:28

180

alert(JSON.stringify(object))如何使用现代浏览器?

TypeError: Converting circular structure to JSON情况下,这里有更多的选择:How to serialize DOM node to JSON even if there are circular references?

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

+0

+1好的建议。我会添加他可以使用jsonview(http://jsonviewer.stack.hu/)很好地看到它。 – Christian 2011-03-18 21:27:46

+2

如果你想让它格式化得很好,你可以调用:'alert(JSON.stringify(object,null,4)',其中'4'是用于缩进的空格的数量。 – 2014-08-05 13:02:43

+0

这给了我'undefined'as输出我试图调试业障测试 – 2015-03-27 19:41:07

34

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

+4

这给了我最完整和有用的信息后,我感谢 – 2014-03-04 00:42:09

+1

我没有意识到'console.dir'功能。我无法弄清楚为什么我不能在Firebug中查看完整的对象,现在已经为我排序了,谢谢! – 2016-07-01 12:04:10

+0

除了显示方便之外,我还需要知道是否还有其他优点比'console.log'更好,请 – user10089632 2017-08-23 16:45:41

13

使用控制台:

console.log(object); 
+0

那些显示的值会动态变化,这对于调试目的可能会产生误导 – user10089632 2017-08-23 14:55:18

+0

在Chrome中使用您的控制台首选项并单击preser ve日志。现在,即使您的脚本将您重定向到另一页,您的控制台也不会被清除。 – 2017-08-23 16:07:30

+0

看来,这个问题是Firefox相关的,因为在Chrome中,除非你是console.log(),显示的值仍然是。您可能会建议迁移到Chrome,但有时您正在测试浏览器功能的可用性。无论如何感谢提示可能有用。 – user10089632 2017-08-23 16:27:18

15

有几个方法:

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

这是基督徒杰出答案的哗众取宠。我只是让它更具可读性:

/** 
* 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,对于这样的版本,它可以是一种很好,因为你知道你总是会看着最新的代码,而不是一些陈旧的东西,这是多年前发布,可能不会再工作了...... - 另外,这块巨大的代码将看起来非常糟糕粘贴到文本墙上,所以回答... - ** Off topic:**如果在SO上有一个方法可以使用代码的“spoiler”标签,并且能够链接到外部源并自动更新(如果可能), – BrainSlugs83 2015-06-25 20:14:54