有没有办法在 Chrome 开发工具中自动扩展对象？
Posted
技术标签:
【中文标题】有没有办法在 Chrome 开发工具中自动扩展对象？【英文标题】：Is there a way to auto expand objects in Chrome Dev Tools? 【发布时间】：2012-05-14 22:38:32 【问题描述】：每次我在控制台中查看一个对象我都想要展开它，所以每次都必须单击箭头来执行此操作会很烦人:) 是否有快捷方式或设置来完成此操作自动？
【问题讨论】：
暂时没有。随时向new.crbug.com 提交功能请求（以“DevTools:”前缀开始摘要），但要非常具体地说明要扩展的 where 和 which 对象。例如，您当然永远不会想要扩展所有对象，因为它们可能 (a) 具有大量属性； (b) 包含循环（在后一种情况下，将需要 一段时间 来扩展整个树；）） bugs.webkit.org/show_bug.cgi?id=61427 【参考方案1】：考虑使用console.table()。
【讨论】：
看起来不错！但是如果有 10 个以上的键，它会缩小宽值:( 注意不要将它部署到生产环境中的浏览器，如果没有检查它的存在就可能没有它。 这只会扩展深度为1的对象。是浅扩展，不会扩展嵌套对象。【参考方案2】：要展开/折叠节点及其所有子节点，
Ctrl + Alt + 单击或Opt + 单击箭头图标
（请注意，虽然the dev tools doc 列出了 Ctrl + Alt + 单击，但在 Windows 上只需要 Alt + 单击）。
【讨论】：
在 OSX chrome 46 中进行测试，它也扩展了所有原型对象，这就像必须单击每个箭头一样糟糕。相反，您必须在 50 个原型方法、属性等中间找到属性（hasOwn）... 这给出了 Uncaught ReferenceError: _ is not defined 错误 只是一个旁注。对于深度较大的对象，应按几次 Ctrl+Alt+Click 直到展开整个对象，而不仅仅是一次。 正确回答了这个问题。虽然仍然需要用户手动点击控制台中的对象，而且该方案并未跨浏览器普遍支持。【参考方案3】：虽然solution 提到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 是非标准的。
【讨论】：
这是我使用的打字稿版本：gist.github.com/mathieucaroff/6851b295c1e4bffafce362d0a1ae00f0【参考方案4】：可能不是最好的答案，但我一直在我的代码中的某个地方这样做。
更新：
使用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
不是最好的解决方案，但很适合我的使用。更深的对象将不起作用，因此可以改进。
【讨论】：
将此与Adding custom functionality into chrome's console 结合起来，我们可以随时在所有站点中使用pretty(a) ;)
非常有帮助，谢谢！ j() 函数也给了我添加控制台日志函数的想法。在实际代码中“隐藏”日志可能不是一个好主意（ide 无论如何都有自动完成功能），但只是在在线编辑器中尝试某些东西只需输入 'clj(v)' 而不是 'console.log(j (v))' 是一种解脱【参考方案5】：
选项+在 Mac 上单击。我自己现在才发现它并度过了我的一周！这和任何事情一样烦人
【讨论】：
【参考方案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);
【讨论】：
【参考方案7】：我真的不喜欢 Chrome 和 Safari 如何控制对象（过度设计）。默认情况下，控制台会压缩对象，在对象展开时对对象键进行排序，并显示原型链中的内部函数。这些功能应该是可选设置。默认情况下，开发人员可能对原始结果感兴趣，因此他们可以检查他们的代码是否正常工作；这些功能会减慢开发速度，并给出错误的排序结果。
如何在控制台中展开对象
推荐
console.log(JSON.stringify(, undefined, 2));
也可以作为函数使用：
console.json = object => console.log(JSON.stringify(object, undefined, 2));
console.json();
“Option + 单击”（Mac 上的 Chrome）和“Alt + 单击”（Window 上的 Chrome） 但是，并非所有浏览器（例如 Safari）都支持它，并且控制台仍然会打印原型类型链，对象键在展开时会自动排序等。
不推荐
我不会推荐任何一个最佳答案
console.table() - 这只是浅层扩展，不会扩展嵌套对象
编写一个自定义的 underscore.js 函数 - 对于一个简单的解决方案来说开销太大
【讨论】：
【参考方案8】：这是我的解决方案，一个迭代对象所有属性的函数，包括数组。
在这个例子中，我遍历了一个简单的多级对象：
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,'$'))
【讨论】：
【参考方案9】：如果你有一个大对象，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)
【讨论】：
【参考方案10】：这是一种解决方法，但它对我有用。
我在控件/小部件根据用户操作自动更新的情况下使用。例如，当使用 twitter 的 typeahead.js 时，一旦您将注意力移出窗口，下拉菜单就会消失，并且建议会从 DOM 中删除。
在开发工具中右键单击要展开的节点启用break on... -> 子树修改，然后将您发送到调试器。继续按 F10 或 Shift+F11 直到 dom 发生变异。一旦发生突变，您就可以进行检查。由于调试器处于活动状态，Chrome 的 UI 被锁定并且不会关闭下拉菜单，并且建议仍在 DOM 中。
在对不断插入和移除的动态插入节点的布局进行故障排除时非常方便。
【讨论】：
【参考方案11】：另一种更简单的方法是
使用 JSON.stringify(jsonObject) 将结果复制并粘贴到 Visual Studio Code 使用 Ctrl+K 和 Ctrl+F 格式化结果 您将看到格式化的展开对象我已经尝试过这个简单的对象。
【讨论】：
【参考方案12】：您可以将 JSON.stringify 打包成一个新函数，例如
jsonLog = function (msg, d)
console.log(msg + '\n' + JSON.stringify(d, true, 2))
然后
jsonLog('root=', root)
FWIW。 穆雷
【讨论】：
【参考方案13】：适合懒人
/**
* _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
【讨论】：
【参考方案14】：您可以通过访问 document.getElementsBy... 查看您的元素，然后右键单击并复制结果对象。例如：
document.getElementsByTagName('ion-app') 返还 javascript 对象，该对象可以复制粘贴到文本编辑器中，并且可以完整地完成。
更好的是：右键单击结果元素-“编辑为 html”-“全选”-“复制”-“粘贴”
【讨论】：
以上是关于有没有办法在 Chrome 开发工具中自动扩展对象？的主要内容，如果未能解决你的问题，请参考以下文章
Chrome提示:＂请停用以开发者模式运行的扩展程序＂的解决办法
ChromeDriver - 在 Selenium WebDriver 自动化上弹出禁用开发者模式扩展