1 00:00:02,300 --> 00:00:06,340 Agora, às vezes, o log do console por si só não chega 2 00:00:06,380 --> 00:00:11,270 tão longe, você precisa de mais ajuda e, nesses casos, pode depurar seu código remotamente. 3 00:00:11,270 --> 00:00:17,750 Agora, é necessário abrir o menu de depuração nesses emuladores ou em dispositivos reais também 4 00:00:17,750 --> 00:00:23,650 se você estiver trabalhando com eles. Você faz isso pressionando no simulador 5 00:00:23,660 --> 00:00:34,030 do iOS, comando d, e ele abrirá este menu aqui, no Android, pressione comando ou controle m, e ele abrirá esse menu. 6 00:00:34,030 --> 00:00:38,360 Agora você vê algumas opções lá e veremos as importantes ao longo deste módulo. 7 00:00:38,360 --> 00:00:41,780 A opção que escolheremos agora é depurar js remotamente. 8 00:00:42,050 --> 00:00:48,290 Se você pressionar isso, uma nova guia deverá abrir no navegador que navegou automaticamente para o host local 1901 no meu caso aqui, a 9 00:00:48,680 --> 00:00:54,700 barra de interface do usuário do depurador, que deve abrir automaticamente. Agora, para que isso funcione corretamente, certifique-se de que 10 00:00:54,690 --> 00:01:01,160 nas ferramentas expo dev, você configurou a conexão como alarme ou local, não encapsulando, caso contrário, isso será super lento 11 00:01:01,160 --> 00:01:08,490 e, agora, o que esse depurador gera, essa nova guia é que você pode abra as ferramentas de desenvolvedor do Chrome agora com 12 00:01:08,500 --> 00:01:13,650 o atalho que você deve ver aqui e ali, agora também verá o mesmo log 13 00:01:14,790 --> 00:01:19,890 do console que está recebendo aqui; agora, você também tem outro console que pode pesquisar, 14 00:01:19,890 --> 00:01:25,320 o que pode ser mais conveniente para trabalhar , apenas para mostrar rapidamente esse exemplo com as 15 00:01:25,320 --> 00:01:26,930 metas do curso novamente. 16 00:01:26,940 --> 00:01:36,290 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 17 00:01:36,290 --> 00:01:37,040 expandi-la. 18 00:01:37,040 --> 00:01:39,050 Portanto, isso pode ser um pouco mais 19 00:01:39,140 --> 00:01:41,420 conveniente de trabalhar, basicamente como você o conhece no desenvolvimento 20 00:01:41,420 --> 00:01:44,760 da Web, caso você seja um desenvolvedor da Web, mas também pode fazer mais. 21 00:01:44,780 --> 00:01:50,570 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 22 00:01:50,570 --> 00:01:56,870 aqui, expanda essas pastas e você encontrará a estrutura de pastas com a qual também está 23 00:01:56,900 --> 00:01:58,750 trabalhando, por exemplo, na 24 00:01:58,820 --> 00:02:05,000 pasta de usuários aqui, você encontrará o aplicativo. arquivo js, você encontra os componentes. 25 00:02:05,450 --> 00:02:10,950 Então agora no app. js, se você abrir esse arquivo, verá o seu código 26 00:02:10,960 --> 00:02:12,510 como o escreveu; portanto, na 27 00:02:12,550 --> 00:02:15,560 versão não compilada, o que é ótimo, porque é fácil reconhecer 28 00:02:15,700 --> 00:02:21,880 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, 29 00:02:21,880 --> 00:02:25,350 você pode adicionar um ponto de interrupção clicando aqui à esquerda do número 30 00:02:25,360 --> 00:02:27,370 da linha, para ter essa marca azul 31 00:02:27,370 --> 00:02:32,730 e agora a execução do seu código será interrompida na próxima vez que você atingir essa linha de código aqui. 32 00:02:32,830 --> 00:02:36,930 Agora, ativei a depuração no emulador do Android, para que não pare se eu 33 00:02:36,940 --> 00:02:39,980 tentar no iOS, mas para se tentar no Android. 34 00:02:40,000 --> 00:02:47,500 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 35 00:02:47,500 --> 00:02:48,250 o Android. 36 00:02:48,310 --> 00:02:49,800 Você pode ignorar esse 37 00:02:49,840 --> 00:02:57,340 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 38 00:02:57,340 --> 00:03:04,030 que isso está ficando travado aqui, porque se você voltar para as ferramentas de desenvolvimento, isso é agora pausado, você vê que 39 00:03:04,060 --> 00:03:06,580 agora está destacado em azul, está passando e 40 00:03:06,670 --> 00:03:12,610 agora o mais legal é que você pode percorrer seu código passo a passo com esses controles aqui, basta 41 00:03:12,760 --> 00:03:18,400 brincar com eles e também pode passar o mouse sobre as coisas no seu código, por exemplo, para 42 00:03:18,400 --> 00:03:21,060 ver o valor atual no título da meta. 43 00:03:21,070 --> 00:03:25,480 Agora, podemos simplesmente avançar passo a passo através desta linha com este botão, você pode 44 00:03:25,480 --> 00:03:30,220 entrar em uma chamada de função com esse botão ou sair dela com este botão e 45 00:03:31,210 --> 00:03:35,430 sempre pode retomar a execução do código com este botão azul de reprodução. 46 00:03:38,030 --> 00:03:43,850 Essa pode ser uma ferramenta muito poderosa para realmente mergulhar profundamente no seu fluxo de código, pois 47 00:03:43,850 --> 00:03:45,810 permite entender completamente o que 48 00:03:45,890 --> 00:03:51,240 está acontecendo, analisar seus valores em tempo de execução e obter controle total sobre seu código. 49 00:03:51,260 --> 00:03:56,960 Agora, se você quiser saber mais sobre como usar as ferramentas de depuração do Chrome, encontrará um link útil anexado 50 00:03:56,990 --> 00:04:01,040 a esta palestra, com mais informações sobre as ferramentas de depuração do Chrome.