React Native Modo Debug

React Native nos dá a possibilidade de debugar nosso código usando modo debug. Para ativar o modo debug vamos usar como exemplo o APP que criamos Nesse post. Primeiro vamos rodar nosso APP (no meu caso estou rodando no aparelho mas pode ser no emulador) e depois abrir o menu de desenvolvedor. Se não sabe como abrir o menu de desenvolvedor recomendo que leia Esse post 

Imagem

Agora basta escolher a opção "Debug Js Remotely"

Em seguida deve abrir essa página no navegador:

Imagem

Como estou usando o chrome, vou techar F12 para abrir o Developer Tools. Ou se preferir pode teclar CTR+Shift+J como mostra a instrução acima. Tudo ok. Agora nosso APP já está rodando no modo debug. 

Agora vamos editar o arquivo App.js e adicionar um construtor na classe e um console.log dentro do construtor:

   export default class App extends Component<{}> {
   
      constructor(props) {
           super(props);
           console.log("teste!");
      }
       
     render() {
       return (
         <View style={styles.container}>
           <Text style={styles.welcome}>
             Welcome to React Native!!
           </Text>
           <Text style={styles.instructions}>
             To get started, edit App.js
           </Text>
           <Text style={styles.instructions}>
             {instructions}
           </Text>
         </View>
       );
     }
   }

Feito isso vamos recarregar nosso APP e ver o resultado no Developer Tools:

Imagem

Se tudo ocorreu bem, nossa mensagem aparece no console do Developer Tools.

Para sair do modo debug basta abrir novamente o menu de desenvolvedor e escolher a opçao "Stop Remote Debug"

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente