.
O Chrome DevTools permite ver diversas variáveis com facilidade por todo o aplicativo. Monitorar as variáveis no Sources mantém você fora do console e com foco em melhorar seu código.
O painel Sources permite observar variáveis no seu aplicativo. Isso fica na seção de observação da barra lateral do depurador. Com essa funcionalidade, você não precisará registrar objetos repetidamente no console.
Adicionar variáveis
Para adicionar uma variável à lista de observações, use o ícone de adição à direita do título da seção. Isso vai abrir uma entrada in-line em que você fornece o nome da variável a ser observada. Depois de preencher, pressione a tecla Enter para adicioná-la à lista.
O inspetor vai 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,
Como atualizar variáveis
Os valores das variáveis podem mudar conforme o aplicativo continua funcionando. A lista de observação não é uma visualização ao vivo das variáveis, a menos que você esteja percorrendo a execução. Quando você está percorrendo a execução usando pontos de interrupção, os valores monitorados são atualizados automaticamente. Para reverificar manualmente as variáveis na lista, pressione o botão Atualizar à direita do título da seção.
Quando a atualização é solicitada, o estado atual do aplicativo é verificado novamente. Cada item monitorado será atualizado com os valores atuais.
Como remover variáveis
Para reduzir ao máximo o que você está procurando e agilizar o trabalho, talvez seja necessário remover variáveis da lista de observação. Para isso, passe o cursor sobre a variável e clique no ícone de remoção à direita.
