Debug REACT NATIVE no VS CODE e Flipper (Debugging Network, Componentes e Performance)

Publicado em: 26 Janeiro 2023
no canal de: Coffstack

5,837

261

Chega de console.log() para debugar o seu código! Nesse vídeo apresento 3 ferramentas incríveis para fazer você depurar (debugging) seu App React Native de forma profissional!

A primeira ferramenta é uma extensão do VS Code chamada React Native Tools. Ela permite você utilizar breakpoints e chegar valores de estado e propriedade dentro do próprio VS Code.

A segunda, é a React DevTools. Com ela você pode checar em tempo de execução toda a árvore de componentes com suas respectivas propriedades. Além disso, ela também conta com um “Profiler”, um analisador que nos ajudar a verificar a performance dos componentes, ou seja, em que condições e quanto tempo cada um deles está sendo renderizado.

Por último, temos o Flipper. Dentre muitas utilidades, a que mais me chama atenção é o Network Inspector, uma interface robusta e intuitiva para você checar todas as chamadas a API que seu App está fazendo. Um verdadeiro raio-x da sua camada de rede!

Acredito que todo profissional que usa diariamente o React Native deveria conhecer essas ferramentas, pois, elas tornam o trabalho mais simples e produtivo.

✅ VOCÊ TAMBÉM VAI GOSTAR DESSES VÍDEOS:

▸ Guia de Estudo REACT NATIVE 2023 (Roadmap PROFISSIONAL)
   • Guia de Estudo REACT NATIVE  2023 (Ro...

▸ Do ZERO ao EXTERIOR na PROGRAMAÇÃO (com Igor Ramos)
   • Do ZERO ao EXTERIOR na PROGRAMAÇÃO (c...

▸ Curso Teste Unitário no React Native (React Native Testing Library)
   • Curso Teste no React Native (React Na...

✅ REDES SOCIAIS:

Instagram: @coffstack
  / coffstack

TikTok: @coffstack
  / coffstack

Twitter: @coffstack
  / coffstack

Blog/Artigos
https://blog.coffstack.com/

Instagram: @lucasgar6
  / lucasgar6

00:00 - Introdução
01:38 - React Native Tools (VS Code)
03:21 - Breakpoint - Pausa na Execução
06:47 - Inspecionando Componentes
09:53 - Debug Performance - Profiler
14:21 - Flipper - Debug API (Network Inspector)
18:41 - Recado Final!

#reactnative #debug #vscode #flipper #programação #desenvolvedor #reactjs

Nesta página do site você pode assistir ao vídeo on-line Debug REACT NATIVE no VS CODE e Flipper (Debugging Network, Componentes e Performance) duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Coffstack 26 Janeiro 2023, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 5,837 vezes e gostou 261 espectadores. Boa visualização!

113