O Chrome DevTools permite ver facilmente diversas variáveis em todo o aplicativo. Observar variáveis dentro do código fonte mantém você fora do console e com foco em melhorar o código.
O painel Origens oferece a capacidade de monitorar variáveis dentro do aplicativo. Ele fica na seção de exibição da barra lateral do depurador. Com essa funcionalidade, não é preciso registrar objetos repetidamente no console.
Adicionar variáveis
Para adicionar uma variável à lista de observação, use o ícone de adição à direita do título da seção. Isso vai abrir uma entrada inline em que você fornece o nome da variável a ser observada. Depois de preenchê-la, pressione a tecla Enter para adicioná-la à lista.
O inspetor mostrará o valor atual da variável à medida que ela for adicionada. Se a variável não estiver definida ou não puder ser encontrada, o valor do campo será
Como atualizar variáveis
Os valores das variáveis podem mudar à medida que um aplicativo continua em operação. A lista de observação não é uma visualização das variáveis em tempo real, a menos que você avance na execução. Quando você percorre a execução usando pontos de interrupção, os valores monitorados são atualizados automaticamente. Para verificar mais uma vez manualmente as variáveis na lista, pressione o botão de atualização à direita do título da seção.
Quando a atualização é solicitada, o estado atual do aplicativo é verificado novamente. Todos os itens monitorados serão atualizados com os valores atuais.
Remover variáveis
Para manter o que você está vendo com menos frequência e agilizar o trabalho, pode ser necessário remover variáveis da lista de observação. Isso pode ser feito passando o cursor sobre a variável e clicando no ícone de remoção que aparece à direita.
