모든 단일 시간 콘솔에서 개체를보고 확장하려고합니다. 따라서 모든 작업을 수행하려면 화살표를 클릭해야하는 번거로운 일이 있습니다.
답변
솔루션 언급 JSON.stringify은 대부분의 경우에 매우 훌륭 하지만 몇 가지 제한 사항이 있습니다.
console.log이러한 객체를 우아하게 처리 할 수있는 순환 참조가있는 항목은 처리 할 수 없습니다 .- 또한 큰 나무가있는 경우 일부 노드를 대화식으로 접을 수 있으므로 탐색이 쉬워 질 수 있습니다.
다음은 창조적으로 (ab)을 사용하여 위의 두 가지를 모두 해결 하는 솔루션 ( underscore.js 라이브러리 사용)입니다 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비표준입니다.
답변
답변
노드와 모든 하위 노드를 확장 / 축소하려면
Ctrl + Alt + 클릭 또는 Opt + 화살표 아이콘 클릭
( 개발 도구 문서 에는 Ctrl + Alt + Click이 나열되어 있지만 Windows에서는 Alt + Click 만 있으면됩니다.)
답변
가장 좋은 대답은 아니지만 내 코드 어딘가 에서이 작업을 수행했습니다.
업데이트 :
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
최상의 솔루션은 아니지만 내 사용법에 적합합니다. 더 깊은 개체는 작동하지 않으므로 개선 할 수 있습니다.
답변
옵션 + Mac을 클릭하십시오. 방금 지금 그것을 발견하고 내 주를 만들었습니다! 이것은 다른 것만 큼 성가시다
답변
다음은 밑줄에 의존하지 않는 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 = 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모든 웹 페이지 에이 기능을 삽입하고 모든 속성을 복사 및 분석하고 chrome 명령을 사용하여 Google 페이지에서 시도 할 수 있습니다.
discoverProperties(google,0,'$')
또한 chrome 명령을 사용하여 명령의 출력을 복사 할 수 있습니다.
copy(discoverProperties(myvariable,0,'$'))
