TODAS AS VEZES ÚNICAS Vejo um objeto no console e quero expandi-las, por isso é cansativo clicar na seta para fazê-las TODAS AS ÚNICAS VEZES :) Existe um atalho ou configuração para fazer isso automaticamente?
google-chrome-devtools
Jeremy Smith
fonte
fonte
Respostas:
Embora a solução mencionada
JSON.stringify
seja ótima na maioria dos casos, ela tem algumas limitaçõesconsole.log
pode cuidar de tais objetos com elegância.Aqui está uma solução (usa a biblioteca underscore.js ) que resolve os itens acima de forma criativa (ab) usando
console.group
:Agora em execução:
Vai lhe dar algo como:
O valor de MAX_DEPTH pode ser ajustado para um nível desejado e além desse nível de aninhamento - o log expandido retornará ao console.log usual
Tente executar algo como:
Observe que a dependência de sublinhado pode ser facilmente removida - basta extrair as funções necessárias da fonte .
Observe também que isso
console.group
não é padrão.fonte
Considere usar console.table () .
fonte
Para expandir / recolher um nó e todos os seus filhos,
(observe que, embora o documento das ferramentas de desenvolvimento liste Ctrl + Alt + Click, no Windows, basta o Alt + Click).
fonte
Pode não ser a melhor resposta, mas venho fazendo isso em algum lugar do meu código.
Atualização :
Use
JSON.stringify
para expandir seu objeto automaticamente:Você sempre pode criar uma função de atalho se precisar digitar tudo isso:
Resposta anterior :
então, em vez de:
Você faz:
Não é a melhor solução, mas funciona bem para o meu uso. Objetos mais profundos não funcionarão, por isso é algo que pode ser aprimorado.
fonte
pretty(a)
em todos os locais em todos os momentos;)console.table
seja, expansão superficial, "Option / Alt + Click" é um processo manual, e escrever uma função personalizada que usa underscore.js não vale a pena )opção + Clique em um Mac. Acabei de descobrir agora e fiz a minha semana! Isso tem sido tão irritante quanto qualquer coisa
fonte
Aqui está uma versão modificada da resposta de lorefnon que não depende de underscorejs:
fonte
Aqui está minha solução, uma função que itera todas as propriedades do objeto, incluindo matrizes.
Neste exemplo, eu itero sobre um objeto de vários níveis simples:
Você também tem a possibilidade de excluir a iteração se as propriedades começarem com um sufixo específico (ou seja, $ para objetos angulares)
Aqui está a saída da função:
Você também pode injetar essa função em qualquer página da web e copiar e analisar todas as propriedades, tente na página do google usando o comando chrome:
Além disso, você pode copiar a saída do comando usando o comando chrome:
fonte
se você tiver um objeto grande, o JSON.stringfy dará erro TypeError não capturado: Convertendo a estrutura circular para JSON, aqui está um truque para usar a versão modificada dele
agora você pode usar
JSON.stringifyOnce(obj)
fonte
Eu realmente não sou fã de como o Chrome e o Safari consolam objetos (com excesso de engenharia). Por padrão, o console condensa o objeto, classifica as chaves do objeto quando o objeto é expandido e mostra as funções internas da cadeia de protótipos. Esses recursos devem ser configurações de aceitação. Os desenvolvedores, por padrão, provavelmente estão interessados nos resultados brutos, para que possam verificar se o código está funcionando corretamente; e esses recursos atrasam o desenvolvimento e fornecem resultados de classificação incorretos.
Como expandir objetos no console
Recomendado
console.log(JSON.stringify({}, undefined, 2));
Também pode usar como uma função:
"Option + Click" (Chrome no Mac) e "Alt + Click" (Chrome na janela)
No entanto, não é suportado por todos os navegadores (por exemplo, Safari), e o Console ainda imprime as cadeias de tipos de protótipo, as chaves de objetos são classificadas automaticamente quando expandido, etc.
Não recomendado
Eu não recomendaria nenhuma das principais respostas
console.table()
- essa é apenas uma expansão superficial e não expande objetos aninhadosEscreva uma função underscore.js personalizada - muita sobrecarga para o que deveria ser uma solução simples
fonte
É uma solução, mas funciona para mim.
Eu uso no caso em que um controle / widget é atualizado automaticamente dependendo das ações do usuário. Por exemplo, ao usar o typeahead.js do twitter, depois que você se concentra na janela, o menu suspenso desaparece e as sugestões são removidas do DOM.
Nas ferramentas de desenvolvimento, clique com o botão direito do mouse no nó que você deseja expandir, habilite a quebra em ... -> modificações na subárvore , e assim você será enviado ao depurador. Continue apertando F10 ou Shift + F11 até que você domine. Uma vez que isso muda, você pode inspecionar. Como o depurador está ativo, a interface do usuário do Chrome está bloqueada e não fecha o menu suspenso, e as sugestões ainda estão no DOM.
Muito útil ao solucionar problemas de layout de nós inseridos dinamicamente, que são inseridos e removidos constantemente.
fonte
Outra maneira mais fácil seria
Eu tentei isso para objetos simples.
fonte
Você pode ver aqui:
https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/
Caminho mais fácil:
Você também deve adicionar o seguinte código ao tsconfig:
Eu não reivindico a propriedade disso, apenas referindo uma fonte útil.
fonte
Você pode visualizar seu elemento acessando document.getElementsBy ... e, em seguida, clique com o botão direito do mouse e copie o objeto resultante. Por exemplo:
document.getElementsByTagName('ion-app')
devolve o objeto javascript que pode ser copiado e colado no editor de texto e o faz completamente.Melhor ainda: clique com o botão direito do mouse no elemento resultante - 'Editar como html' - 'Selecionar tudo' - 'Copiar' - 'Colar'
fonte