Google chrome devtools 有没有办法在Chrome开发工具中自动展开对象？
每次在控制台中查看对象时，我都想将其展开，因此每次都要单击箭头来执行此操作会让人感到厌烦：）是否有快捷方式或设置可以自动完成此操作？可能不是最佳答案，但我一直在代码的某个地方执行此操作 更新： 使用Google chrome devtools 有没有办法在Chrome开发工具中自动展开对象？,google-chrome-devtools,Google Chrome Devtools,每次在控制台中查看对象时，我都想将其展开，因此每次都要单击箭头来执行此操作会让人感到厌烦：）是否有快捷方式或设置可以自动完成此操作？可能不是最佳答案，但我一直在代码的某个地方执行此操作 更新： 使用JSON.stringify自动展开对象： > a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}] > JSON.stringify(a, true, 2) "[ { "name": "Joe", "age": 5
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=[{name:'Joe'，年龄：5}，{name:'John'，年龄：6}]
->a
a、 弗雷奇（漂亮）
选项+单击Mac。现在我自己刚刚发现了它，这周我过得很愉快！这和任何事情一样烦人这是一种变通办法，但对我来说很有效
我在控件/小部件根据用户操作自动更新的情况下使用。例如，当使用twitter的typeahead.js时，一旦您将焦点放在窗口外，下拉列表就会消失，建议也会从DOM中删除
在“开发工具”中，右键单击要展开的节点“启用”break on…->子树修改，然后将您发送到调试器。继续按F10或Shift+F11直到dom发生变异。一旦变异，你就可以检查了。由于调试器处于活动状态，Chrome的UI被锁定，不会关闭下拉列表，并且建议仍在DOM中
对动态插入的节点的布局进行故障排除时非常方便，这些节点会不断地插入和删除。请考虑使用
虽然在大多数情况下提到这一点非常好，但也有一些局限性
- 它不能处理带有循环引用的项目，因为as
console.log
可以优雅地处理这些对象
- 此外，如果您有一棵大树，那么交互折叠某些节点的能力可以使探索更容易
以下是一个解决方案，通过创造性地（ab）使用以下方法解决上述两个问题：
现在运行：
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"
}
}
}
}
})
将为您提供如下信息：
x = { a: 10, b: 20 }
x.x = x
expandedLog(x)
可以将maxDepth
的值调整到所需的级别，超过该级别的嵌套-扩展日志将返回到通常的console.log
尝试运行类似以下内容：
x = { a: 10, b: 20 }
x.x = x
expandedLog(x)
另外请注意，console.group
是非标准的。要展开/折叠节点及其所有子节点
Ctrl+Alt+单击或Opti+单击箭头图标
（请注意，尽管列出了Ctrl+Alt+Click，但在Windows上只需Alt+Click即可）。您可以通过访问文档来查看元素。getElementsBy。。。然后右键单击并复制结果对象。例如：
document.getElementsByTagName（'ion-app'）
返回可以复制粘贴到文本编辑器的javascript对象，并完整地执行该操作
更好的方法是：右键单击结果元素-“编辑为html”-“选择全部”-“复制”-“粘贴”这里是lorefnon答案的修改版本，它不依赖于下划线：
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);
这是我的解决方案，一个迭代对象所有属性（包括数组）的函数
在本例中，我迭代了一个简单的多级对象：
var point = {
x: 5,
y: 2,
innerobj : { innerVal : 1,innerVal2 : 2 },
$excludedInnerProperties : { test: 1},
includedInnerProperties : { test: 1}
};
如果属性以特定后缀开头（例如，角度对象为$），则还可以排除迭代
discoverProperties=函数（对象、级别、排除前缀）{
var indent=“-------------------------------------------------”。子字符串（0，级别*2）；
var str=indent+“level”+level+“\r\n”；
if（类型（obj）=“未定义”）
返回“”；
for（obj中的var属性）{
if（对象hasOwnProperty（财产））{
固有值；
试一试{
Proval=估价（'obj.'+财产）；
str+=indent+property+”（“+propVal.constructor.name+”）：“+propVal+”\r\n”；
if（typeof（propVal）=‘object’&&level<10&&propVal.constructor.name！=“Date”&&property.indexOf（排除前缀）！=0）{
if（propVal.hasOwnProperty（'length'））{
对于（变量i=0；iJSON.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.stringify（jsonObject）
- 将结果复制并粘贴到Visual Studio代码中
- 使用Ctrl+K和Ctrl+F格式化结果
- 您将看到格式化的扩展对象
我已经在简单对象上尝试过了。如果您有一个大对象，JSON.stringfy将给出错误uncaughttypeerror：将循环结构转换为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);
};
console.json = object => console.log(JSON.stringify(object, undefined, 2));
console.json({});
import SampleJson from '../../assets/SampleJson.json';
...
console.log(SampleJson);
{ "compilerOptions": { ..."resolveJsonModule": true, "esModuleInterop": true... } }