객체 덤프 JavaScript


89

타사 애드온 / 애플리케이션 또는 JavaScript 객체에 대한 스크립트 디버거에서 객체 맵 덤프를 수행하는 방법이 있습니까?

상황은 다음과 같습니다. 메소드가 두 번 호출되고 매번 다른 것이 있습니다. 무엇이 다른지 잘 모르겠지만 뭔가 있습니다. 따라서 window (또는 적어도 window.document)의 모든 속성을 텍스트 편집기에 덤프 할 수 있다면 두 호출 간의 상태를 간단한 파일 diff로 비교할 수 있습니다. 생각?


답변:


61

방화범 +console.log(myObjectInstance)


4
... 그런 다음 표준 Javascript 콘솔이 아닌 Firebug 콘솔 을 살펴보십시오 . :-)
— towi

3
IE에는 콘솔이 있지만 개체를 ​​로깅하면 [object Object]. 아니 매우 유용합니다
— 스티브 로빈스

5
@SteveRobbins, 요즘 웹 응용 프로그램을 개발하기 위해 IE를 사용하는 사람은 누구입니까? 개인적으로 지금까지 Internet Explorer에서 찾은 유일한 용도는 Windows 운영 체제를 다시 설치 한 후 실제 웹 브라우저를 다운로드하는 것입니다. 그건 그렇고,이 소프트웨어의 평화를 시작하는 유일한 시간입니다.
— Darin Dimitrov

8
주요 브라우저를 지원하는 모든 개발자. IE에만 문제가있는 경우 IE에서만 테스트 할 수 있으므로 브라우저를 사용해야합니다.
— Steve Robbins

2
그리고 node.js와 터미널을 사용한다면 .. 방화범이 없습니까 ??
— Cheruvim

136
console.log("my object: %o", myObj)

그렇지 않으면 때때로 다음과 같은 문자열 표현이 표시됩니다.

[object Object]

또는 일부.


3
Chrome 및 Firefox 용 [object Object] 만 인쇄합니다. <shrug>
— slashdottir 2014 년

1
@slashdottir Chrome 및 FF에서 절대적으로 작동합니다. 적어도 매주 Chrome에서 사용하고 가끔 FF에서 사용합니다.
— Tim

1
@ 팀 : 당신이 맞아요, 작동합니다. 실례합니다. 사용자 ERR
— slashdottir

도대체 어떻게 이것이 선택된 답이 아닌가? 4 년 전 js를 사용하지 않았을 때 제 생일에이 질문에 답한 것이 다행입니다.
— Joey Carson

2
Meteor (서버 측)에서는 my object: %o. :) 아니 매우 도움이
— Erdal은 G.

45
function mydump(arr,level) {
    var dumped_text = "";
    if(!level) level = 0;

    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding += "    ";

    if(typeof(arr) == 'object') {  
        for(var item in arr) {
            var value = arr[item];

            if(typeof(value) == 'object') { 
                dumped_text += level_padding + "'" + item + "' ...\n";
                dumped_text += mydump(value,level+1);
            } else {
                dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
            }
        }
    } else { 
        dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
    }
    return dumped_text;
}

4
재귀 호출에서와 같이 함수 이름을 변경하여 코드를 업데이트합니다. 이는 "mydump"시간을 정의하는 동안 "dump"라고합니다
— Vikas

7
복사하여 붙여 넣기 : binnyva.blogspot.com/2005/10/…
— utopianheaven

1
이것은 JQuery와 개체를 검사하는 데 사용 "너무 재귀"로 크롬과 파이어 폭스를 죽이고
— slashdottir

@slashdottir는 검사에 의해, 수정 용이if (level > 10) return level_padding + '<< too deep >>';
— 존 헨켈

순환 참조로 인해 "너무 많은 재귀"가 발생합니다 (한 개체의 자식 매개 변수가 부모 개체를 참조 할 때). 현재 값의 모든 부모를 기억하여 해결할 수 있으며 현재 값이 부모의 값과 일치하면 더 이상 파지 마십시오.
— Alex Velickiy

42

Chrome, Firefox 또는 IE10 +를 사용하는 경우 콘솔을 확장하고

(function() {
    console.dump = function(object) {
        if (window.JSON && window.JSON.stringify)
            console.log(JSON.stringify(object));
        else
            console.log(object);
    };
})();

간결한 브라우저 간 솔루션을 제공합니다.


난이게 좋아. 특히 객체 덤프를 지원하지 않는 브라우저의 경우.
— Aley

그리고 "else console.log (object);"를 바꿀 수도 있습니다. 위의 stackoverflow.com/a/3011557/2236012 에서와 같이 사용자 지정 순회 함수를 호출하여 ? ...;)
— CB

@CB "너무 많은 재귀"와 얼어 붙은 브라우저는 이것이 Firefox와 Chrome에서 나를 얻는 이유입니다.
— slashdottir 2014 년

3
JSON.stringify는 순환 구조를 직렬화 할 수 없습니다. 모든 개체에 대해 작동하지 않습니다.
— Grzegorz Luczywo 2014-06-11

24

다음을 사용하십시오.

console.dir(object);

클릭 가능한 멋진 객체 표현을 얻을 수 있습니다. Chrome 및 Firefox에서 작동


1
Chrome 및 Firefox에서 [object Object] 제공
— slashdottir 2014 년

console.dir({bar:"foo"}); 개체가 toString 메서드를 덮어 쓰나요? 를 사용하여 콘솔 (F12 누르기)에서 테스트 할 수 있습니다 .
— mons droid

적어도 콘솔에서 작동하는 것 같습니다. 나에 의해 아마도 userr. 감사합니다
— slashdottir

이러한 달콤한 기능
— tomalone

12

Chrome / Chromium 용

console.log(myObj)

또는 동등합니다

console.debug(myObj)


4

을 사용 console.log(object)하면 객체가 Javascript 콘솔에 던져 지지만 항상 원하는 것은 아닙니다. 를 사용 JSON.stringify(object)하면 변수에 저장 될 대부분의 항목이 반환됩니다. 예를 들어 텍스트 영역 입력으로 보내고 콘텐츠를 다시 서버에 제출합니다.


당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.