1
00:00:02,240 --> 00:00:09,740
Agora também há uma coisa nessa sobreposição de desenvolvedor que você pode abrir, o que é extremamente útil para depurar sua

2
00:00:09,740 --> 00:00:11,030
interface de usuário

3
00:00:11,030 --> 00:00:17,780
e essa é a opção do alternador de alternância. Para alternar isso, você verá essa sobreposição na parte inferior aqui

4
00:00:17,780 --> 00:00:22,710
e agora você pode clicar nos itens na interface do usuário para obter informações sobre eles, por

5
00:00:22,730 --> 00:00:24,260
exemplo, aqui no botão.

6
00:00:24,260 --> 00:00:29,990
Agora você vê a margem ao redor do botão, o preenchimento, você vê a sua posição na

7
00:00:30,440 --> 00:00:35,130
árvore de componentes, você vê alguma configuração do botão e você também pode dar

8
00:00:35,130 --> 00:00:38,780
uma olhada nos arredores e, portanto, ter uma noção de por

9
00:00:38,900 --> 00:00:45,200
que as coisas estão dispostas a tela eles são. Você sempre pode fechar isso novamente abrindo a sobreposição do

10
00:00:45,200 --> 00:00:51,410
desenvolvedor e clicando novamente em alternar inspetor e, é claro, isso também está disponível aqui no iOS, onde você também pode ter

11
00:00:51,410 --> 00:00:56,180
uma ideia de como as coisas estão posicionadas e por que elas estão posicionadas dessa maneira.

12
00:00:56,180 --> 00:01:02,670
No entanto, existe uma ferramenta ainda melhor para inspecionar isso e, portanto, vou fechar isso aqui e esse é

13
00:01:02,690 --> 00:01:04,800
o depurador nativo do React.

14
00:01:05,060 --> 00:01:10,580
Você pode pesquisar por depurador nativo React e você deve encontrar essa página github aqui

15
00:01:10,580 --> 00:01:18,280
e nesta página, você pode baixar o depurador nativo React. Você encontra instruções de instalação aqui e você pode simplesmente ir

16
00:01:18,780 --> 00:01:21,070
para a página de lançamento

17
00:01:24,380 --> 00:01:27,990
no final aqui para baixar um desses binários para o

18
00:01:27,990 --> 00:01:35,070
seu sistema operacional, para Windows, arquivo exe aqui, arquivo de instalação, para macOS, um arquivo dmg e assim por diante.

19
00:01:35,070 --> 00:01:37,860
Então, essas são coisas diferentes que

20
00:01:37,890 --> 00:01:46,460
você pode baixar, eu vou com o arquivo dmg para baixar a versão mais recente aqui, salve isso e espere este download

21
00:01:46,460 --> 00:01:53,730
terminar e então deixe-me simplesmente executar isso e terminar a instalação simplesmente andando pelo instalador ou no meu caso

22
00:01:53,730 --> 00:02:00,000
aqui no macOS, simplesmente arrastando isso para o diretório de aplicativos e agora ele pode abrir

23
00:02:00,000 --> 00:02:07,620
o depurador nativo do React aqui e aqui está. Agora, não está funcionando agora porque para isso

24
00:02:07,620 --> 00:02:12,410
funcionar, é necessário ativar a depuração de Javascript remota nos dispositivos,

25
00:02:12,420 --> 00:02:16,820
exatamente o que fizemos antes para depurar isso no Chrome.

26
00:02:16,820 --> 00:02:22,270
Agora, isso basicamente substitui essa experiência de depuração do Chrome que você poderia dizer ou aprimorá-la.

27
00:02:22,280 --> 00:02:30,140
Agora, com isso aberto, pressione o comando t no Mac ou o controle t no Windows ou Linux aqui para abrir

28
00:02:30,140 --> 00:02:38,690
uma nova guia e abra e confirme que a porta Reagir depurador nativo que a guia Chrome também usou antes e confirme isso

29
00:02:38,690 --> 00:02:46,730
e agora está tentando se conectar e para que isso seja bem-sucedido, abra suas ferramentas de desenvolvedor, digamos no Android agora

30
00:02:46,730 --> 00:02:49,920
e depure o JavaScript remotamente e agora isso

31
00:02:50,000 --> 00:02:57,030
deve se conectar aqui e você verá a saída do seu console aqui agora nas ferramentas do depurador.

32
00:02:57,020 --> 00:03:05,240
Você também verá, se eu expandir isso, que em fontes, você pode novamente mergulhar em seu código aqui se você quiser como antes e a grande diferença é

33
00:03:05,250 --> 00:03:05,960
claro que

34
00:03:06,650 --> 00:03:10,520
não é que você pode fazer isso porque é o mesmo que

35
00:03:10,520 --> 00:03:15,770
você poderia fazer no navegador, mas que aqui, agora você tem as ferramentas bem legais aqui à esquerda.

36
00:03:15,770 --> 00:03:17,950
Então você ainda pode definir pontos

37
00:03:17,960 --> 00:03:23,480
de interrupção e tudo, mas aqui, você agora tem um de suas ferramentas de depuração do Redux

38
00:03:23,480 --> 00:03:28,790
e nós não estamos usando o Redux aqui, então eles estão bem vazios, nada acontecendo aqui,

39
00:03:28,790 --> 00:03:37,760
mas no fundo, você tem esses elementos ferramenta de depuração e isso permite que você explore o seu código jsx React Native assim dizer, para o seu

40
00:03:37,790 --> 00:03:45,140
elemento, sua árvore componente nesta interface agradável que é definitivamente mais agradável do que o inspetor você poderia alternar aqui porque agora

41
00:03:45,140 --> 00:03:52,660
aqui, você realmente pode ter um olha o que está acontecendo. Você pode mergulhar no componente raiz para encontrar

42
00:03:52,660 --> 00:04:00,200
o componente do aplicativo lá e lá, nós encontramos a nossa visão com esse botão, podemos clicar no

43
00:04:00,200 --> 00:04:06,080
botão e vemos os objetos que estamos usando no botão, como onPress e o

44
00:04:07,720 --> 00:04:09,170
título que definimos.

45
00:04:09,250 --> 00:04:14,020
Nós podemos clicar em nosso próprio componente, onde vemos os adereços que estamos encaminhando lá, podemos

46
00:04:14,140 --> 00:04:18,720
até mesmo alterar o suporte visível para alternar este modal como este, se quisermos, então

47
00:04:18,790 --> 00:04:20,220
isso é muito legal.

48
00:04:20,290 --> 00:04:25,070
Nós vemos os ganchos que estamos usando lá, como o estado que estamos gerenciando atualmente

49
00:04:25,150 --> 00:04:31,540
em nosso componente e se eu abro esse modal aqui, você vê esse estado, os adereços aqui mudam e se eu

50
00:04:31,540 --> 00:04:37,870
começar a digitar aqui, aprenda Reagir Nativa , você verá que isso também é atualizado aqui à direita, como um

51
00:04:37,870 --> 00:04:39,220
pequeno atraso, mas

52
00:04:39,280 --> 00:04:42,730
isso não deve ser um problema, então isso é realmente legal.

53
00:04:42,820 --> 00:04:46,600
Podemos adicionar isso e ver as mudanças de estado aqui, podemos,

54
00:04:46,600 --> 00:04:51,340
claro, mergulhar mais fundo em nossa entrada de meta para ver o modal aqui.

55
00:04:51,400 --> 00:04:57,490
Você pode explorar o FlatList e o que está configurado lá e mergulhar mais fundo nessa

56
00:04:57,490 --> 00:05:04,600
visão, se quiser, então muitas coisas que você pode fazer lá e você pode explorar sua árvore de

57
00:05:04,660 --> 00:05:10,780
componentes para descobrir o que está acontecendo. Nos elementos em que você adicionou diretamente um estilo, como na

58
00:05:10,780 --> 00:05:11,970
vista ao redor,

59
00:05:11,980 --> 00:05:17,320
por exemplo, onde eu defini esse preenchimento, você pode até inspecionar o estilo e não apenas ver o estilo, mas

60
00:05:17,320 --> 00:05:18,960
também alterá-lo, por exemplo, para aumentar

61
00:05:19,030 --> 00:05:24,010
o preenchimento ou reduzi-lo. oferece uma maneira fácil de testar diferentes visuais e layouts na tela para descobrir

62
00:05:24,010 --> 00:05:27,190
o que está bom para você e o que você deseja alterar.

63
00:05:27,250 --> 00:05:33,310
Você também pode ir para a guia profiler aqui e iniciar uma sessão de criação de perfil e fazer

64
00:05:33,310 --> 00:05:39,760
algo na tela como abrir e fechar o modal e parar isso e você terá a experiência padrão de ferramentas de

65
00:05:39,760 --> 00:05:45,400
desenvolvimento React aqui onde você vê quais de seus componentes repintado e você pode mergulhar nisso para ter

66
00:05:45,400 --> 00:05:51,640
uma idéia do que foi repintado, quais suportes ele tinha no momento e quantos ciclos de re-renderização você tinha que,

67
00:05:51,640 --> 00:05:57,070
por exemplo, descobrir se havia repintura desnecessária acontecendo, obviamente, um pouco de Uma coisa mais avançada a

68
00:05:57,070 --> 00:06:02,800
fazer e algo que você pode querer fazer quando estiver mais perto de concluir seu aplicativo, certificar-se de

69
00:06:02,800 --> 00:06:08,230
que está otimizando o desempenho e evitando ciclos desnecessários de re-renderização, mas essas ferramentas podem ser

70
00:06:08,230 --> 00:06:13,870
realmente úteis para detectar pequenos problemas em seu aplicativo e para garantir que tudo esteja funcionando da

71
00:06:13,870 --> 00:06:16,360
maneira que deveria funcionar no seu aplicativo.

72
00:06:16,360 --> 00:06:20,890
Agora, uma outra coisa legal que você pode fazer com o depurador Native React, você pode clicar com o

73
00:06:21,130 --> 00:06:24,110
botão direito em qualquer lugar aqui, digamos aqui e você pode habilitar

74
00:06:24,250 --> 00:06:29,800
a inspeção de rede e se você fizer isso, você pode ir para a guia de rede e você verá solicitações de rede.

75
00:06:29,800 --> 00:06:35,770
Agora, essas são todas as solicitações relacionadas à depuração, mas mais tarde no curso quando adicionaremos nossas

76
00:06:35,770 --> 00:06:42,070
próprias solicitações de rede, onde enviamos solicitações para nosso próprio servidor da Web, podemos até inspecioná-las aqui e

77
00:06:42,070 --> 00:06:47,140
analisá-las e ver se estamos enviando e receber os dados certos, algo que é

78
00:06:47,380 --> 00:06:48,560
bem difícil

79
00:06:48,580 --> 00:06:55,480
de fazer com aplicativos nativos, aqui é muito fácil. Então o Depurador Nativo do React realmente é uma ferramenta interessante para procurar em seu aplicativo, para definir pontos

80
00:06:55,720 --> 00:07:02,860
de interrupção, visualizar o console, visualizar sua árvore de componentes, visualizar os estilos que você está usando e muito mais. Ele realmente permite que você mergulhe fundo no código

81
00:07:02,860 --> 00:07:10,570
do seu aplicativo, na sua interface do usuário, na sua lógica e descubra se tudo está funcionando como deveria funcionar

82
00:07:10,660 --> 00:07:15,490
e você pode até mesmo entrar aqui e alterar certas coisas como o

83
00:07:15,490 --> 00:07:21,220
estilo que você viu. experimente configurações diferentes e descubra onde você precisa ajustar seu aplicativo

84
00:07:21,220 --> 00:07:23,380
para que ele funcione corretamente.