Como inspecionar objetos Javascript


100

Como posso inspecionar um objeto em uma caixa de alerta? Normalmente alertar um objeto apenas lança o nome do nó:

alert(document);

Mas desejo obter as propriedades e métodos do objeto na caixa de alerta. Como posso obter essa funcionalidade, se possível? Ou há alguma outra sugestão?

Particularmente, estou procurando uma solução para um ambiente de produção onde console.log e Firebug não estão disponíveis.


9
fazer console.logno firefox ou no Chrome
KJYe.Name 葉家仁

1
Estou confuso. Em um ambiente de produção, você tem usuários reais, certo? Então, por que você deseja lançar um alerta com propriedades de objeto? Talvez a melhor solução seja serializar o objeto e registrá-lo em um arquivo ou enviar um e-mail?
Nathan Long,

Talvez ele precise do alerta como ferramenta, mas da funcionalidade real para fazer outra coisa. Pode haver vários motivos pelos quais ele / ela deseja fazer isso, como mostrar estatísticas ou uma ocorrência de erro, ou fazer ambos simplesmente passando um objeto para qualquer coisa que ele / ela esteja usando para inspecionar o objeto.
Christian


Às vezes JSON.stringifyé útil.
BrainSlugs83

Respostas:


56

O for- inloops para cada propriedade em um objeto ou matriz. Você pode usar essa propriedade para obter o valor, bem como alterá-lo.

Nota: Propriedades privadas não estão disponíveis para inspeção, a menos que você use um "espião"; basicamente, você sobrescreve o objeto e escreve algum código que faz um loop for-in dentro do contexto do objeto.

Para em parece:

for (var property in object) loop();

Alguns exemplos de código:

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));

Edit: Algum tempo atrás, eu escrevi meu próprio inspetor, se você estiver interessado, fico feliz em compartilhar.

Editar 2: Bem, eu escrevi um de qualquer maneira.


Deve ser protegido de alguma forma contra recursão. Hashes ( dicionários ) com alguns ids de renderizador html internos? Pode ser útil para noobs empurrar essa verificação para o código.
Nakilon,

@Nakilon Sempre tive problema com recursão infinita, especialmente em PHP. Existem duas maneiras de corrigir isso: usando um parâmetro de profundidade ou modificando o hash e adicione sua própria propriedade que você usa para verificar a recursão. O de profundidade é provavelmente mais seguro.
Christian,

Eu gosto mais dessa versão da linha 7. Ele se parece um pouco mais com ruby ​​e faz alguns r.push de espaço em branco (i + '"' + p + '" =>' + (t == 'objeto'? '{\ N' + xinspect (o [p], i + '') + ('\ n' + i + '},'): o [p] + ''));
BC.

2
Esse pedaço de código destruiu totalmente o Safari Mobile no iPhone. Eu escolheria a solução JSON.stringify abaixo para uma alternativa mais segura.
Daniel

1
Essa coisa travou o safari, o cromo inspecionando um objeto, não recomendaria.
Keno

194

Que tal alert(JSON.stringify(object))com um navegador moderno?

No caso de TypeError: Converting circular structure to JSON, aqui estão mais opções: Como serializar o nó DOM para JSON mesmo se houver referências circulares?

A documentação: JSON.stringify()fornece informações sobre como formatar ou embelezar a saída.


+1 Boa sugestão. Eu acrescentaria que ele poderia usar jsonview ( jsonviewer.stack.hu ) para ver isso muito bem.
Christian

2
Se você também quiser formatá-lo bem, pode chamar:, alert(JSON.stringify(object, null, 4)onde 4é o número de espaços usados ​​para indentação.
Jan Molak

Isso me dá 'indefinido' como saída. Estou tentando depurar testes de carma.
Alex C

1
Existem ressalvas a esta abordagem. OP diz que deseja inspecionar os métodos do objeto. stringify não mostrará métodos: JSON.stringify({f: ()=>{}}) => "{}". Além disso, se o objeto implementa toJSONmétodo que você recebe o que esse método retorna, o que é inútil se você quiser inspecionar o objeto: JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'.
Morozov

39

Use console.dir(object)e o plugin Firebug


4
Isso me deu as informações mais completas e úteis sobre o que eu procurava. Obrigado.
Shon

2
Eu não estava ciente do console.dirrecurso. Não consegui descobrir por que não conseguia mais visualizar o objeto completo no Firebug. Isso agora resolveu para mim. Obrigado!
Andrew Newby

Preciso saber se há outras vantagens disso console.logalém da conveniência de exibição, por favor
user10089632

17

Existem alguns métodos:

 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) 

Em um contexto de console, às vezes o .constructor ou .prototype pode ser útil:

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

17

Use seu console:

console.log(object);

Ou, se você estiver inspecionando elementos dom html, use console.dir (objeto). Exemplo:

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

Ou se você tiver uma matriz de objetos js que pode usar:

console.table(objectArr);

Se você estiver gerando muitos console.log (objetos), você também pode escrever

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

Isso o ajudará a rotular os objetos gravados no console.


Esses valores exibidos mudam dinamicamente, em tempo real, o que pode ser enganoso para fins de depuração
user10089632

no Chrome, use as preferências do console e clique em preservar log. Agora, mesmo que o seu script o redirecione para outra página, seu console não será limpo.
Richard Torcato

Parece que esse problema está relacionado ao Firefox porque no Chrome, a menos que você re console.log (), os valores exibidos ainda estão. Você pode sugerir mudar para o Chrome, mas às vezes você está testando a disponibilidade de recursos do navegador. De qualquer forma obrigado pela dica que pode ser útil.
user10089632

Não posso usar consoleporque estou usando o estilo stackoverflow.com/q/7505623/1480391 e não é compatível
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);

Como console.log () faz isso? :)
Christian

use Firefox ou Chrome. Obtenha o Firebug para Firefox. um must have
moe

Eu estava sendo sarcástico. O OP pediu especificamente o código JS e, a menos que você esteja sugerindo que ele investigue firebug / fox / chrome, não sei onde ele encontrará uma resposta.
Christian,

6

Esta é uma fraude flagrante da excelente resposta de Christian. Acabei de torná-lo um pouco mais legível:

/**
 * 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

Aqui está meu inspetor de objetos que é mais legível. Como o código demora muito para ser escrito aqui, você pode baixá-lo em http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

Use assim:

document.write(inspect(object));

2
Esse geralmente é o caso (e é definitivamente a orientação oficial - não poste links), OTOH, para algo que tem uma versão assim, pode ser legal, já que você sabe que sempre estará olhando para o código mais recente, e não algo obsoleto que foi postado anos atrás e pode não funcionar mais ... - Além disso, aquele enorme bloco de código ficaria horrível colado em uma parede de texto, SO responda ... - Tópico diferente: seria bom se houvesse uma maneira no SO de ter tags do tipo "spoiler" para o código e ser capaz de vincular a uma fonte externa e atualizá-lo automaticamente (quando possível),
BrainSlugs83
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.