170

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

4

14 回答 14

102

考虑使用console.table()。

控制台表输出

于 2014-11-06T13:44:18.753 回答
76

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

Ctrl + Alt + 单击或Opt + 单击箭头图标

（请注意，尽管开发工具文档列出了 Ctrl + Alt + 单击，但在 Windows 上，只需要 Alt + 单击）。

于 2015-03-17T03:55:40.103 回答
43

虽然提到的解决方案JSON.stringify在大多数情况下都非常好，但它有一些限制

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

这是一个通过创造性地（ab）使用解决上述两个问题的解决方案console.group：

function expandedLog(item, maxDepth = 100, depth = 0){
    if (depth > maxDepth ) {
        console.log(item);
        return;
    }
    if (typeof item === 'object' && item !== null) {
        Object.entries(item).forEach(([key, value]) => {
            console.group(key + ' : ' +(typeof value));
            expandedLog(value, maxDepth, 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"
                }
            }
        }
    }
})

会给你类似的东西：

输出截图

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

尝试运行类似的东西：

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

在此处输入图像描述

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

于 2014-12-22T20:47:02.703 回答
41

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

更新：

用于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

不是最好的解决方案，但很适合我的使用。更深的对象将不起作用，因此可以改进。

于 2012-05-28T03:03:27.640 回答
10

选项+单击 Mac。我自己现在才发现它并度过了我的一周！这和任何事情一样烦人

于 2014-07-23T04:20:40.070 回答
8

这是 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);
于 2016-03-06T01:08:56.970 回答
5

我真的不喜欢 Chrome 和 Safari 如何控制对象（过度设计）。默认情况下，控制台会压缩对象，在对象展开时对对象键进行排序，并显示原型链中的内部函数。这些功能应该是可选设置。默认情况下，开发人员可能对原始结果感兴趣，因此他们可以检查他们的代码是否正常工作；这些特性会减慢开发速度，并给出不正确的排序结果。

如何在控制台中展开对象

受到推崇的

  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 函数——对于一个简单的解决方案来说开销太大

于 2019-04-13T19:21:40.553 回答
2

这是我的解决方案，一个迭代对象所有属性的函数，包括数组。

在这个例子中，我迭代了一个简单的多级对象：

    var point = {
            x: 5,
            y: 2,
            innerobj : { innerVal : 1,innerVal2 : 2 },
            $excludedInnerProperties : { test: 1},
            includedInnerProperties : { test: 1}
        };

如果属性以特定后缀开头（即 $ 用于角度对象），您还可以排除迭代

discoverProperties = function (obj, level, excludePrefix) {
        var indent = "----------------------------------------".substring(0, level * 2);
        var str = indent + "level " + level + "\r\n";
        if (typeof (obj) == "undefined")
            return "";
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                var propVal;
                try {
                    propVal = eval('obj.' + property);
                    str += indent + property + "(" + propVal.constructor.name + "):" + propVal + "\r\n";
                    if (typeof (propVal) == 'object' && level < 10 && propVal.constructor.name != "Date" && property.indexOf(excludePrefix) != 0) {
                        if (propVal.hasOwnProperty('length')) {
                            for (var i = 0; i < propVal.length; i++) {
                                if (typeof (propVal) == 'object' && level < 10) {
                                    if (typeof (propVal[i]) != "undefined") {
                                        str += indent + (propVal[i]).constructor.name + "[" + i + "]\r\n";
                                        str += this.discoverProperties(propVal[i], level + 1, excludePrefix);
                                    }
                                }
                                else
                                    str += indent + propVal[i].constructor.name + "[" + i + "]:" + propVal[i] + "\r\n";
                            }
                        }
                        else
                            str += this.discoverProperties(propVal, level + 1, excludePrefix);
                    }
                }
                catch (e) {
                }
            }
        }
        return str;
    };


var point = {
        x: 5,
        y: 2,
        innerobj : { innerVal : 1,innerVal2 : 2 },
        $excludedInnerProperties : { test: 1},
        includedInnerProperties : { test: 1}
    };

document.write("<pre>" + discoverProperties(point,0,'$')+ "</pre>");

这是函数的输出：

level 0
x(Number):5
y(Number):2
innerobj(Object):[object Object]
--level 1
--innerVal(Number):1
--innerVal2(Number):2
$excludedInnerProperties(Object):[object Object]
includedInnerProperties(Object):[object Object]
--level 1
--test(Number):1

您也可以在任何网页中注入此函数并复制和分析所有属性，在 google 页面上使用 chrome 命令尝试：

discoverProperties(google,0,'$')

您还可以使用 chrome 命令复制命令的输出：

copy(discoverProperties(myvariable,0,'$'))
于 2016-04-22T16:31:34.863 回答
2

如果你有一个大对象， JSON.stringfy 会给出错误 Uncaught TypeError: Converting circular structure to JSON ，这里是使用它的修改版本的技巧

JSON.stringifyOnce = function(obj, replacer, indent){
    var printedObjects = [];
    var printedObjectKeys = [];

    function printOnceReplacer(key, value){
        if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
        return 'object too long';
        }
        var printedObjIndex = false;
        printedObjects.forEach(function(obj, index){
            if(obj===value){
                printedObjIndex = index;
            }
        });

        if ( key == ''){ //root element
             printedObjects.push(obj);
            printedObjectKeys.push("root");
             return value;
        }

        else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
            if ( printedObjectKeys[printedObjIndex] == "root"){
                return "(pointer to root)";
            }else{
                return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase()  : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
            }
        }else{

            var qualifiedKey = key || "(empty key)";
            printedObjects.push(value);
            printedObjectKeys.push(qualifiedKey);
            if(replacer){
                return replacer(key, value);
            }else{
                return value;
            }
        }
    }
    return JSON.stringify(obj, printOnceReplacer, indent);
};

现在你可以使用JSON.stringifyOnce(obj)

于 2018-12-08T14:49:40.233 回答
1

它是一种解决方法，但它对我有用。

我在控件/小部件根据用户操作自动更新的情况下使用。例如，当使用 twitter 的 typeahead.js 时，一旦您将注意力移出窗口，下拉菜单就会消失，并且建议会从 DOM 中删除。

在开发工具中右键单击要展开的节点 enable break on... -> subtree modified，然后将您发送到调试器。继续按F10或Shift+F11直到您的 dom 发生变异。一旦发生突变，您就可以进行检查。由于调试器处于活动状态，Chrome 的 UI 被锁定并且不会关闭下拉菜单，并且建议仍在 DOM 中。

在对不断插入和删除的动态插入节点的布局进行故障排除时非常方便。

于 2014-09-05T18:28:24.650 回答
0

另一种更简单的方法是

  • 使用 JSON.stringify(jsonObject)
  • 将结果复制并粘贴到 Visual Studio Code
  • 使用 Ctrl+K 和 Ctrl+F 格式化结果
  • 您将看到格式化的扩展对象

我已经尝试过这个简单的对象。

于 2018-08-10T08:57:04.967 回答
0

您可以将 JSON.stringify 打包成一个新函数，例如

jsonLog = function (msg, d) {
  console.log(msg + '\n' + JSON.stringify(d, true, 2))
}

然后

jsonLog('root=', root)

FWIW。默里

于 2021-07-15T23:14:49.547 回答
0

对于懒人

/**
 * _Universal extensive multilevel logger for lazy folks_
 * @param {any} value **`Value` you want to log**
 * @param {number} tab **Abount of `tab`**
 */
function log(value, tab = 4) {
  console.log(JSON.stringify(value, undefined, tab));
}

用法

log(anything) // [] {} 1 true null
于 2021-09-06T22:40:12.933 回答
-3

您可以通过访问 document.getElementsBy... 查看您的元素，然后右键单击并复制结果对象。例如：

document.getElementsByTagName('ion-app')返还可以复制粘贴到文本编辑器的 javascript 对象，它会完整地执行此操作。

更好的是：右键单击结果元素-“编辑为 html”-“全选”-“复制”-“粘贴”

于 2016-02-20T17:21:06.493 回答