Agora, às vezes, o log do console por si só não chega
tão longe, você precisa de mais ajuda e, nesses casos, pode depurar seu código remotamente.
Agora, é necessário abrir o menu de depuração nesses emuladores ou em dispositivos reais também
se você estiver trabalhando com eles. Você faz isso pressionando no simulador
do iOS, comando d, e ele abrirá este menu aqui, no Android, pressione comando ou controle m, e ele abrirá esse menu.
Agora você vê algumas opções lá e veremos as importantes ao longo deste módulo.
A opção que escolheremos agora é depurar js remotamente.
Se você pressionar isso, uma nova guia deverá abrir no navegador que navegou automaticamente para o host local 1901 no meu caso aqui, a
barra de interface do usuário do depurador, que deve abrir automaticamente. Agora, para que isso funcione corretamente, certifique-se de que
nas ferramentas expo dev, você configurou a conexão como alarme ou local, não encapsulando, caso contrário, isso será super lento
e, agora, o que esse depurador gera, essa nova guia é que você pode abra as ferramentas de desenvolvedor do Chrome agora com
o atalho que você deve ver aqui e ali, agora também verá o mesmo log
do console que está recebendo aqui; agora, você também tem outro console que pode pesquisar,
o que pode ser mais conveniente para trabalhar , apenas para mostrar rapidamente esse exemplo com as
metas do curso novamente.
Se eu consolar o registro das metas do meu curso aqui e salvar isso, isso será reconstruído e agora vemos a matriz aqui e podemos
expandi-la.
Portanto, isso pode ser um pouco mais
conveniente de trabalhar, basicamente como você o conhece no desenvolvimento
da Web, caso você seja um desenvolvedor da Web, mas também pode fazer mais.
Você pode mergulhar nas fontes, por exemplo, para mergulhar no seu código-fonte e definir pontos de interrupção. Simplesmente expanda esse trabalho do depurador js
aqui, expanda essas pastas e você encontrará a estrutura de pastas com a qual também está
trabalhando, por exemplo, na
pasta de usuários aqui, você encontrará o aplicativo. arquivo js, você encontra os componentes.
Então agora no app. js, se você abrir esse arquivo, verá o seu código
como o escreveu; portanto, na
versão não compilada, o que é ótimo, porque é fácil reconhecer
seu código aqui e agora aqui, por exemplo, digamos que você queira interromper o código quando está prestes a adicionar um novo objetivo,
você pode adicionar um ponto de interrupção clicando aqui à esquerda do número
da linha, para ter essa marca azul
e agora a execução do seu código será interrompida na próxima vez que você atingir essa linha de código aqui.
Agora, ativei a depuração no emulador do Android, para que não pare se eu
tentar no iOS, mas para se tentar no Android.
Também poderíamos ter habilitado no iOS, aqui com js remotos de depuração, mas eu não fiz isso, então vamos com
o Android.
Você pode ignorar esse
aviso aqui, pode simplesmente descartá-lo e agora pressionar adicionar novo objetivo e talvez entrar aprender aprender Reagir nativo, clicar em adicionar e agora veja
que isso está ficando travado aqui, porque se você voltar para as ferramentas de desenvolvimento, isso é agora pausado, você vê que
agora está destacado em azul, está passando e
agora o mais legal é que você pode percorrer seu código passo a passo com esses controles aqui, basta
brincar com eles e também pode passar o mouse sobre as coisas no seu código, por exemplo, para
ver o valor atual no título da meta.
Agora, podemos simplesmente avançar passo a passo através desta linha com este botão, você pode
entrar em uma chamada de função com esse botão ou sair dela com este botão e
sempre pode retomar a execução do código com este botão azul de reprodução.
Essa pode ser uma ferramenta muito poderosa para realmente mergulhar profundamente no seu fluxo de código, pois
permite entender completamente o que
está acontecendo, analisar seus valores em tempo de execução e obter controle total sobre seu código.
Agora, se você quiser saber mais sobre como usar as ferramentas de depuração do Chrome, encontrará um link útil anexado
a esta palestra, com mais informações sobre as ferramentas de depuração do Chrome.