Chrome 개발자 도구에서 개체를 자동 확장하는 방법이 있습니까?

모든 단일 시간 콘솔에서 개체를보고 확장하려고합니다. 따라서 모든 작업을 수행하려면 화살표를 클릭해야하는 번거로운 일이 있습니다.

솔루션 언급 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비표준입니다.

console.table () 사용을 고려하십시오 .

노드와 모든 하위 노드를 확장 / 축소하려면

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,'$'))

큰 객체가있는 경우 JSON.stringfy는 오류 Uncaught TypeError : 원형 구조를 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)

저는 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"(Windows의 경우 Chrome)
   그러나 모든 브라우저 (예 : Safari)에서 지원되는 것은 아니며 콘솔은 여전히 ​​프로토 타입 유형 체인을 인쇄하고 개체 키는 자동 정렬됩니다. 확장 등

권장하지 않음

나는 최고 답변 중 하나를 추천하지 않을 것입니다

1. console.table() -이것은 얕은 확장이며 중첩 된 개체를 확장하지 않습니다.

2. 사용자 정의 underscore.js 함수를 작성하십시오-간단한 솔루션이어야하는 너무 많은 오버 헤드

그 해결 방법이지만 그것은 나를 위해 작동합니다.

컨트롤 / 위젯이 사용자 작업에 따라 자동으로 업데이트되는 경우에 사용합니다. 예를 들어 Twitter의 typeahead.js를 사용할 때 창 밖으로 초점을 맞추면 드롭 다운이 사라지고 제안이 DOM에서 제거됩니다.

dev 도구에서 enable break on ...-> 하위 트리 수정 을 확장하려는 노드를 마우스 오른쪽 버튼으로 클릭 하면 디버거로 전송됩니다. 돔이 변할 때까지 F10 또는 Shift + F11을 계속 누르 십시오 . 일단 변경되면 검사 할 수 있습니다. 디버거가 활성화되어 있으므로 Chrome의 UI가 잠겨 있고 드롭 다운을 닫지 않고 제안 사항이 여전히 DOM에 있습니다.

지속적으로 삽입 및 제거되기 시작하는 동적으로 삽입 된 노드의 레이아웃 문제를 해결할 때 매우 유용합니다.

또 다른 쉬운 방법은

• JSON을 사용하십시오.
• 결과를 Visual Studio Code에 복사하여 붙여 넣기
• Ctrl + K 및 Ctrl + F를 사용하여 결과 형식화
• 형식화 된 확장 객체가 표시됩니다

나는 간단한 객체를 위해 이것을 시도했다.

document.getElementsBy ...에 액세스하여 요소를보고 마우스 오른쪽 단추를 클릭하고 결과 객체를 복사하십시오. 예를 들면 다음과 같습니다.

document.getElementsByTagName('ion-app') 텍스트 편집기에 붙여 넣을 수있는 자바 스크립트 객체를 반환하고 전체를 수행합니다.

더 나은 방법 : 결과 요소를 마우스 오른쪽 버튼으로 클릭- 'html로 편집'- '모두 선택'- '복사'- '붙여 넣기'

당신은 여기에서 볼 수 있습니다 :

https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/

가장 쉬운 방법:

import SampleJson from '../../assets/SampleJson.json';
...
console.log(SampleJson);

또한 tsconfig에 다음 코드를 추가해야합니다.

{  "compilerOptions": {  ..."resolveJsonModule": true, "esModuleInterop": true... } }

나는 도움이되는 출처를 언급하면서 이것에 대한 소유권을 주장하지 않습니다.