Agora também há uma coisa nessa sobreposição de desenvolvedor que você pode abrir, o que é extremamente útil para depurar sua
interface de usuário
e essa é a opção do alternador de alternância. Para alternar isso, você verá essa sobreposição na parte inferior aqui
e agora você pode clicar nos itens na interface do usuário para obter informações sobre eles, por
exemplo, aqui no botão.
Agora você vê a margem ao redor do botão, o preenchimento, você vê a sua posição na
árvore de componentes, você vê alguma configuração do botão e você também pode dar
uma olhada nos arredores e, portanto, ter uma noção de por
que as coisas estão dispostas a tela eles são. Você sempre pode fechar isso novamente abrindo a sobreposição do
desenvolvedor e clicando novamente em alternar inspetor e, é claro, isso também está disponível aqui no iOS, onde você também pode ter
uma ideia de como as coisas estão posicionadas e por que elas estão posicionadas dessa maneira.
No entanto, existe uma ferramenta ainda melhor para inspecionar isso e, portanto, vou fechar isso aqui e esse é
o depurador nativo do React.
Você pode pesquisar por depurador nativo React e você deve encontrar essa página github aqui
e nesta página, você pode baixar o depurador nativo React. Você encontra instruções de instalação aqui e você pode simplesmente ir
para a página de lançamento
no final aqui para baixar um desses binários para o
seu sistema operacional, para Windows, arquivo exe aqui, arquivo de instalação, para macOS, um arquivo dmg e assim por diante.
Então, essas são coisas diferentes que
você pode baixar, eu vou com o arquivo dmg para baixar a versão mais recente aqui, salve isso e espere este download
terminar e então deixe-me simplesmente executar isso e terminar a instalação simplesmente andando pelo instalador ou no meu caso
aqui no macOS, simplesmente arrastando isso para o diretório de aplicativos e agora ele pode abrir
o depurador nativo do React aqui e aqui está. Agora, não está funcionando agora porque para isso
funcionar, é necessário ativar a depuração de Javascript remota nos dispositivos,
exatamente o que fizemos antes para depurar isso no Chrome.
Agora, isso basicamente substitui essa experiência de depuração do Chrome que você poderia dizer ou aprimorá-la.
Agora, com isso aberto, pressione o comando t no Mac ou o controle t no Windows ou Linux aqui para abrir
uma nova guia e abra e confirme que a porta Reagir depurador nativo que a guia Chrome também usou antes e confirme isso
e agora está tentando se conectar e para que isso seja bem-sucedido, abra suas ferramentas de desenvolvedor, digamos no Android agora
e depure o JavaScript remotamente e agora isso
deve se conectar aqui e você verá a saída do seu console aqui agora nas ferramentas do depurador.
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 é
claro que
não é que você pode fazer isso porque é o mesmo que
você poderia fazer no navegador, mas que aqui, agora você tem as ferramentas bem legais aqui à esquerda.
Então você ainda pode definir pontos
de interrupção e tudo, mas aqui, você agora tem um de suas ferramentas de depuração do Redux
e nós não estamos usando o Redux aqui, então eles estão bem vazios, nada acontecendo aqui,
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
elemento, sua árvore componente nesta interface agradável que é definitivamente mais agradável do que o inspetor você poderia alternar aqui porque agora
aqui, você realmente pode ter um olha o que está acontecendo. Você pode mergulhar no componente raiz para encontrar
o componente do aplicativo lá e lá, nós encontramos a nossa visão com esse botão, podemos clicar no
botão e vemos os objetos que estamos usando no botão, como onPress e o
título que definimos.
Nós podemos clicar em nosso próprio componente, onde vemos os adereços que estamos encaminhando lá, podemos
até mesmo alterar o suporte visível para alternar este modal como este, se quisermos, então
isso é muito legal.
Nós vemos os ganchos que estamos usando lá, como o estado que estamos gerenciando atualmente
em nosso componente e se eu abro esse modal aqui, você vê esse estado, os adereços aqui mudam e se eu
começar a digitar aqui, aprenda Reagir Nativa , você verá que isso também é atualizado aqui à direita, como um
pequeno atraso, mas
isso não deve ser um problema, então isso é realmente legal.
Podemos adicionar isso e ver as mudanças de estado aqui, podemos,
claro, mergulhar mais fundo em nossa entrada de meta para ver o modal aqui.
Você pode explorar o FlatList e o que está configurado lá e mergulhar mais fundo nessa
visão, se quiser, então muitas coisas que você pode fazer lá e você pode explorar sua árvore de
componentes para descobrir o que está acontecendo. Nos elementos em que você adicionou diretamente um estilo, como na
vista ao redor,
por exemplo, onde eu defini esse preenchimento, você pode até inspecionar o estilo e não apenas ver o estilo, mas
também alterá-lo, por exemplo, para aumentar
o preenchimento ou reduzi-lo. oferece uma maneira fácil de testar diferentes visuais e layouts na tela para descobrir
o que está bom para você e o que você deseja alterar.
Você também pode ir para a guia profiler aqui e iniciar uma sessão de criação de perfil e fazer
algo na tela como abrir e fechar o modal e parar isso e você terá a experiência padrão de ferramentas de
desenvolvimento React aqui onde você vê quais de seus componentes repintado e você pode mergulhar nisso para ter
uma idéia do que foi repintado, quais suportes ele tinha no momento e quantos ciclos de re-renderização você tinha que,
por exemplo, descobrir se havia repintura desnecessária acontecendo, obviamente, um pouco de Uma coisa mais avançada a
fazer e algo que você pode querer fazer quando estiver mais perto de concluir seu aplicativo, certificar-se de
que está otimizando o desempenho e evitando ciclos desnecessários de re-renderização, mas essas ferramentas podem ser
realmente úteis para detectar pequenos problemas em seu aplicativo e para garantir que tudo esteja funcionando da
maneira que deveria funcionar no seu aplicativo.
Agora, uma outra coisa legal que você pode fazer com o depurador Native React, você pode clicar com o
botão direito em qualquer lugar aqui, digamos aqui e você pode habilitar
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.
Agora, essas são todas as solicitações relacionadas à depuração, mas mais tarde no curso quando adicionaremos nossas
próprias solicitações de rede, onde enviamos solicitações para nosso próprio servidor da Web, podemos até inspecioná-las aqui e
analisá-las e ver se estamos enviando e receber os dados certos, algo que é
bem difícil
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
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
do seu aplicativo, na sua interface do usuário, na sua lógica e descubra se tudo está funcionando como deveria funcionar
e você pode até mesmo entrar aqui e alterar certas coisas como o
estilo que você viu. experimente configurações diferentes e descubra onde você precisa ajustar seu aplicativo
para que ele funcione corretamente.