有没有办法在Chrome Dev Tools中自动扩展对象？

Question

每个单一时间我在控制台中查看一个对象我想要扩展它,所以每次单击箭头来执行此操作都很烦人:)是否有自动完成此操作的快捷方式或设置？

Answer 1

考虑使用console.table().

Answer 2

要展开/折叠节点及其所有子节点,

Ctrl + Alt +单击或选择+单击箭头图标

(请注意,虽然开发工具文档列出了Ctrl + Alt + Click,但在Windows上只需要Alt + Click).

Answer 3

可能不是最好的答案,但我一直在我的代码中的某个地方这样做.

更新:

用于JSON.stringify自动扩展对象:

> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
> JSON.stringify(a, true, 2)
"[
  {
    "name": "Joe",
    "age": 5
  },
  {
    "name": "John",
    "age": 6
  }
]"

你总是可以创建一个快捷方式功能,如果它输入所有这些都很痛苦:

j = function(d) {
    return JSON.stringify(d, true, 2)
}

j(a)

上一个答案:

pretty = function(d)
{
  var s = []
  for (var k in d) {
    s.push(k + ': ' + d[k])
  }
  console.log(s.join(', '))
}

然后,而不是:

-> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
-> a
<- [Object, Object]

你做:

-> a.forEach(pretty)
<- name: Joe, age: 5
   name: John, age: 6

不是最好的解决方案,但适合我的使用.更深的对象将无法工作,因此可以改进.

Answer 4

虽然提到的解决方案JSON.stringify对于大多数情况来说非常好,但它有一些限制

• 它无法处理具有循环引用的项目,因为它console.log可以优雅地处理这些对象.
• 此外,如果您有一棵大树,那么以交互方式折叠某些节点的能力可以使探索更容易.

这是一个解决方案(使用underscore.js库),通过创造性地(ab)使用console.group以下方法解决上述问题:

expandedLog = (function(){
    var MAX_DEPTH = 100;

    return function(item, depth){

        depth = depth || 0;

        if (depth > MAX_DEPTH ) {
            console.log(item);
            return;
        }

        if (_.isObject(item)) {
            _.each(item, function(value, key) {
            console.group(key + ' : ' +(typeof value));
            expandedLog(value, depth + 1);
            console.groupEnd();
            });
        } else {
            console.log(item);
        }
    }
})();

现在运行:

expandedLog({
    "glossary": {
        "title": "example glossary",
        "GlossDiv": {
            "title": "S",
            "GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
                    "SortAs": "SGML",
                    "GlossTerm": "Standard Generalized Markup Language",
                    "Acronym": "SGML",
                    "Abbrev": "ISO 8879:1986",
                    "GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
                        "GlossSeeAlso": ["GML", "XML"]
                    },
                    "GlossSee": "markup"
                }
            }
        }
    }
})

会给你类似的东西:

可以将MAX_DEPTH的值调整到所需的级别,超出嵌套级别 - 扩展日志将回退到通常的console.log

尝试运行类似:

x = { a: 10, b: 20 }
x.x = x 
expandedLog(x)

请注意,可以轻松删除下划线依赖项 - 只需从源中提取所需的函数.

另请注意,这console.group是非标准的.

Answer 5

默认情况下，Chrome 和 Safari 浏览器上的控制台将输出折叠的对象，带有排序的属性键，并包含所有继承的原型链。

我个人不是粉丝。大多数开发人员需要没有原型链的对象的原始输出，并且其他任何内容都应该选择加入。折叠的对象浪费了开发人员的时间，因为他们需要扩展它们，如果他们想要更少的输出，他们可以只记录他们需要的属性键。自动排序属性键使开发人员无法检查自己的排序是否正确，这可能会导致错误。最后，普通的 Javascript 开发人员不会花太多时间在继承的原型链上，因此这会增加日志的噪音。

如何在控制台中展开对象

受到推崇的

1. console.log(JSON.stringify({}, undefined, 2));

   也可以用作函数：

   console.json = object => console.log(JSON.stringify(object, undefined, 2));
   
   console.json({});
   

2. “Option + Click”（Mac 上的 Chrome）和“Alt + Click”（Window 上的 Chrome）
   但是，并非所有浏览器（例如 Safari）都支持它，控制台仍然会打印原型链、自动排序属性键等。

不建议

我不会推荐任何一个最重要的答案

1. console.table()- 这只是浅层扩展，不会扩展嵌套对象

2. 编写一个自定义的 underscore.js 函数 - 对于一个简单的解决方案来说开销太大

Answer 6

这是lorefnon的答案的修改版本,它不依赖于underscorejs:

var expandedLog = (function(MAX_DEPTH){

    return function(item, depth){

        depth    = depth || 0;
        isString = typeof item === 'string'; 
        isDeep   = depth > MAX_DEPTH

        if (isString || isDeep) {
            console.log(item);
            return;
        }

        for(var key in item){
            console.group(key + ' : ' +(typeof item[key]));
            expandedLog(item[key], depth + 1);
            console.groupEnd();
        }
    }
})(100);

Answer 7

选项+单击Mac.刚刚发现它现在我自己已经完成了我的一周!这和任何事都一样烦人