有没有办法在Chrome开发工具中自动扩展对象？
每一次单一的时间我在控制台中查看一个对象我要扩大它，所以它不必要点击箭头来做这个每个单一的时间:)有没有一个快捷方式或设置自动完成这个？
虽然提到JSON.stringify的解决scheme在大多数情况下都非常棒，但是它有一些限制
- 它不能处理循环引用的项目，因为
console.log可以优雅地处理这些对象。 - 而且，如果你有一棵大树，那么交互式地折叠一些节点的能力可以使探索更容易。
这是一个解决scheme（使用underscore.js库），通过使用console.group创造性地（ab）解决上述两个问题：
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 } xx = x expandedLog(x)
请注意，下划线的依赖关系可以很容易地删除 – 只需从源提取所需的function。
还请注意console.group是非标准的。
考虑使用console.table（） 。
可能不是最好的答案，但我一直在我的代码中的某处。
更新 ：
使用JSON.stringify自动展开对象：
> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}] > JSON.stringify(a, true, 2) "[ { "name": "Joe", "age": 5 }, { "name": "John", "age": 6 } ]"
你可以随时创build一个快捷方式function，如果它伤害input所有的东西：
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
不是最好的解决scheme，但对我的使用效果很好。 更深的对象将无法工作，所以这是可以改进的。
要展开/折叠节点及其所有子节点，
Ctrl + Alt +点击或select+点击箭头图标
（请注意，虽然开发工具文档列出了Ctrl + Alt +单击，在Windows上所需的全部是Alt + Click）。
这里是一个修改版本的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);
选项+在Mac上单击。 现在就自己发现了，并且让我的一周！ 这一直像任何事情一样烦人
它是一个工作，但它适用于我。
我使用的情况下控件/部件自动更新取决于用户的行为。 例如，当使用twitter的typeahead.js时，一旦你把注意力集中在窗口之外，下拉菜单就消失了，build议就从DOM中移除了。
在开发工具中，右键单击要扩展的节点，然后将其发送给debugging器。 继续按F10或Shift + F11，直到你变异。 一旦变化，那么你可以检查。 由于debugging器处于活动状态，因此Chrome的用户界面被locking，并且不会closures下拉菜单，并且这些build议仍在DOM中。
排除dynamic插入节点的布局时非常方便，开始插入和删除的节点不断。
@Hady你的Mac解决scheme指向我正确的Windows解决scheme！ 我只是尝试ALT +左键点击我想要扩展的最高节点（在我的情况下），它扩展了标签内的所有内容。
这里是我的解决scheme，一个函数，迭代对象的所有属性，包括数组。
在这个例子中，我遍历了一个简单的多级对象：
var point = { x: 5, y: 2, innerobj : { innerVal : 1,innerVal2 : 2 }, $excludedInnerProperties : { test: 1}, includedInnerProperties : { test: 1} };
如果属性以一个特定的后缀开始，那么你也可以排除迭代（例如$ for angular objects）
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>");
您可以通过访问document.getElementsBy …来查看元素，然后右键单击并复制结果对象。 例如：
document.getElementsByTagName('ion-app')返回可以复制粘贴到文本编辑器的javascript对象，并完成它。
更好的是：右键单击结果元素 – “编辑为html” – “全选” – “复制” – “粘贴”
