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

Published: 26 January 2023
on channel: 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


On this page of the site you can watch the video online Debug REACT NATIVE no VS CODE e Flipper (Debugging Network, Componentes e Performance) with a duration of hours minute second in good quality, which was uploaded by the user Coffstack 26 January 2023, share the link with friends and acquaintances, this video has already been watched 5,837 times on youtube and it was liked by 261 viewers. Enjoy your viewing!