자바 스크립트 객체를 검사하는 방법


100

경고 상자에서 개체를 검사하려면 어떻게해야합니까? 일반적으로 Object에 경고하면 노드 이름이 발생합니다.

alert(document);

하지만 경고 상자에서 개체의 속성과 메서드를 가져오고 싶습니다. 가능하면이 기능을 어떻게 얻을 수 있습니까? 아니면 다른 제안이 있습니까?

특히 console.log 및 Firebug를 사용할 수없는 프로덕션 환경에 대한 솔루션을 찾고 있습니다.


9
어떻게 console.log파이어 폭스 나 크롬에
— KJYe.Name葉家仁

1
혼란 스럽습니다. 프로덕션 환경에서는 실제 사용자가 있습니다. 그렇다면 왜 객체 속성과 함께 경고를 던지고 싶습니까? 더 나은 해결책은 객체를 직렬화하고 파일에 기록하거나 이메일을 보내는 것입니까?
— Nathan Long

도구로서 경고가 필요하지만 다른 작업을 수행하기위한 실제 기능이 필요할 수 있습니다. 통계를 표시하거나 오류가 발생하거나 단순히 객체를 검사하는 데 사용하는 객체에 객체를 전달하여 둘 다 수행하는 것과 같이 사용자가이를 수행하려는 모든 종류의 이유가있을 수 있습니다.
— Christian


때때로 JSON.stringify도움이됩니다.
— BrainSlugs83

답변:


56

은 for- in객체 나 배열의 각 속성에 대해 반복합니다. 이 속성을 사용하여 값을 가져오고 변경할 수 있습니다.

참고 : "스파이"를 사용하지 않는 한 개인 속성은 검사에 사용할 수 없습니다. 기본적으로 객체를 재정의하고 객체의 컨텍스트 내에서 for-in 루프를 수행하는 코드를 작성합니다.

in은 다음과 같습니다.

for (var property in object) loop();

일부 샘플 코드 :

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

편집 : 얼마 전, 저는 제 자신의 검사관을 썼습니다. 관심이 있으시다면 기꺼이 공유하겠습니다.

편집 2 : 글쎄, 어쨌든 하나를 썼습니다.


재귀로부터 어떻게 든 보호되어야합니다. 내부 html-renderer ID가있는 해시 ( 사전 )? 멍청이가이 수표를 코드에 밀어 넣는 데 유용 할 수 있습니다.
— Nakilon

@Nakilon 저는 특히 PHP에서 항상 무한 재귀 문제를 겪었습니다. 이 문제를 해결하는 방법에는 깊이 매개 변수를 사용하거나 해시를 수정하고 재귀를 확인하는 데 사용하는 고유 한 속성을 추가하는 두 가지 방법이 있습니다. 깊이가 더 안전 할 것입니다.
— 기독교

이 버전의 7 행이 더 좋습니다. 좀 더 루비처럼 보이며 멋진 공백 r.push (i + ' "'+ p + '"=>'+ (t == 'object'? '{\ n'+ xinspect (o [p], i + '') + ( '\ n'+ i + '},') : o [p] + ''));
— BC.

2
이 코드는 iPhone에서 Safari Mobile을 완전히 망가 뜨 렸습니다. 더 안전한 대안을 위해 아래 JSON.stringify 솔루션을 사용하겠습니다.
— Daniel

1
이 물건은 사파리, 크롬이 물체를 검사하는 것을 권장하지 않습니다.
— Keno

194

방법에 대한 alert(JSON.stringify(object))현대적인 브라우저?

의 경우 TypeError: Converting circular structure to JSON더 많은 옵션이 있습니다. 순환 참조가 있어도 DOM 노드를 JSON으로 직렬화하는 방법은 무엇입니까?

문서 : JSON.stringify()출력 형식 지정 또는 미리 설정에 대한 정보를 제공합니다.


+1 좋은 제안. 나는 그가 jsonview ( jsonviewer.stack.hu )를 사용 하여 멋지게 볼 수 있다고 덧붙일 것 입니다.
— Christian

2
당신이 그것을 멋지게 너무 당신이 부를 수있는 포맷하고 싶었 경우 alert(JSON.stringify(object, null, 4), 어디에 4들여 쓰기에 사용되는 공간의 수입니다.
— Jan Molak 2014 년

이것은 출력으로 '정의되지 않음'을 제공합니다. 카르마 테스트를 디버그하려고합니다.
— Alex C

1
이 접근 방식에는주의 사항이 있습니다. OP는 객체의 메서드를 검사하고 싶다고합니다. stringify 메소드를 표시하지 않습니다 : JSON.stringify({f: ()=>{}}) => "{}". 또한 객체가 toJSON메소드를 구현 하면 해당 메소드가 반환하는 것을 얻습니다 JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'. 객체를 검사하려는 경우 쓸모가 없습니다 ..
— Morozov

39

사용 console.dir(object)및 Firebug 플러그인


4
이것은 내가 추구했던 것에 대한 가장 완전하고 유용한 정보를주었습니다. 감사.
— Shon

2
나는 console.dir기능을 인식하지 못했습니다 . Firebug에서 더 이상 전체 개체를 볼 수없는 이유를 파악할 수 없었습니다. 이것은 이제 나를 위해 그것을 정렬했습니다. 감사!
— Andrew Newby

나는 이상이 다른 장점이 있다면 알 필요 console.log는 표시 편리 외에하십시오
— user10089632

17

몇 가지 방법이 있습니다.

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty) 

콘솔 컨텍스트에서 때때로 .constructor 또는 .prototype이 유용 할 수 있습니다.

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ; 

17

콘솔 사용 :

console.log(object);

또는 html dom 요소를 검사하는 경우 console.dir (object)를 사용하십시오. 예:

let element = document.getElementById('alertBoxContainer');
console.dir(element);

또는 js 객체 배열이있는 경우 다음을 사용할 수 있습니다.

console.table(objectArr);

console.log (objects)를 많이 출력하는 경우 다음과 같이 작성할 수도 있습니다.

console.log({ objectName1 });
console.log({ objectName2 });

이것은 콘솔에 기록 된 개체에 레이블을 지정하는 데 도움이됩니다.


표시된 값은 디버깅 목적으로 오해의 소지가있는 실시간으로 동적으로 변경됩니다
— user10089632 aug

크롬에서 콘솔 환경 설정을 사용하고 로그 보존을 클릭하십시오. 이제 스크립트가 다른 페이지로 리디렉션하더라도 콘솔이 지워지지 않습니다.
— Richard Torcato

console.log ()를 사용하지 않는 한 Chrome에서는 표시된 값이 여전히 남아 있기 때문에이 문제는 Firefox와 관련된 것으로 보입니다. Chrome으로 이동을 제안 할 수 있지만 때로는 브라우저 기능 가용성을 테스트하고 있습니다. 어쨌든 유용한 팁을 주셔서 감사합니다.
— user10089632

console스타일링 stackoverflow.com/q/7505623/1480391을 사용 하고 있고 호환되지 않기 때문에 사용할 수 없습니다
— Yves M.

9
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);

console.log ()는 어떻게합니까? :)
— Christian

Firefox 또는 Chrome을 사용하십시오. Firefox 용 Firebug를 받으세요. 있어야합니다
— moe

나는 냉소적이었다. OP는 특별히 JS 코드를 요청했으며, 그가 firebug / fox / chrome에 대해 탐구하도록 제안하지 않는 한, 그가 어디에서 답을 찾을 수 있을지 모르겠습니다.
— Christian

6

이것은 Christian의 탁월한 대답을 노골적으로 뜯어 낸 것입니다. 좀 더 읽기 쉽게 만들었습니다.

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector

4

다음은 더 읽기 쉬운 객체 검사기입니다. 여기에 코드를 작성하는 데 시간이 오래 걸리기 때문에 http://etto-aa-js.googlecode.com/svn/trunk/inspector.js 에서 다운로드 할 수 있습니다 .

다음과 같이 사용하십시오.

document.write(inspect(object));

2
그것은 일반적으로 (그리고 그것은 확실히 공식적인 지침입니다-링크를 게시하지 마십시오), OTOH, 이와 같은 버전의 무언가에 대해서는, 당신이 항상보고있을 것이라는 것을 알고 있기 때문에 그것은 다소 좋을 수 있습니다. 최신 코드, 그리고 몇 년 전에 게시되어 더 이상 작동하지 않을 수있는 오래된 코드가 아닙니다 ...-- 또한 ​​그 거대한 코드 블록이 텍스트 벽에 붙여 넣어지면 꽤 끔찍해 보일 것입니다 ...-- Off topic : 코드에 대해 "스포일러"와 같은 태그를 사용하고 외부 소스에 연결하여 자동 업데이트 (가능한 경우) 할 수있는 방법이
— 있다면 좋을 것입니다
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.