Adicionar o React.js Explorer ao Chrome com o React Developer Tools

Todo desenvolvedor web já deve saber sobre o incrível Ferramentas para desenvolvedores do Chrome. Esse recurso é construído diretamente no Chrome e permite que os desenvolvedores inspecionar páginas e editar ou remover elementos direto do navegador.

É incrivelmente poderoso e é a melhor maneira de estudar os comportamentos da página como latência, recursos de página ou para executar comandos do console.

A equipe do Facebook criou o React.js biblioteca que abstrai uma camada para desenvolvedores frontend para reutilizar determinados elementos da interface do usuário.

E agora, com React Developer Tools você pode inspecionar essas hierarquias de elementos e editá-los diretamente na página.

Isto é um extensão completamente livre e os seus desenvolvido pelo pessoal do Facebook então você sabe que é de boa qualidade.

Você também pode estudar os diferentes estados e os caminhos das árvores de objetos incluindo quais elementos estão acima e abaixo de outros elementos.

Na barra lateral, você pode navegar através de adereços e estados que permitem estudar o comportamento de outros elementos nessa mesma árvore. Este é realmente um ótimo plugin para novos usuários do React porque pode ajudá-los a entender mais sobre a biblioteca.

Naturalmente, isso também inclui qualquer ouvinte de evento Isso pode alterar o estado de um determinado componente. E a pão ralado na parte inferior deixá-lo facilmente percorrer os elementos pai / filho.

Isso está longe de ser a ferramenta React perfeita. Mas isso tornará seu trabalho muito mais fácil quando você estiver construindo aplicações dinâmicas a partir do zero.

Está completamente de código aberto com um repositório oficial do GitHub mantido pelo Facebook e atualizado com frequência.

Você pode instalar esta extensão do Chrome para qualquer versão do Chrome. Ou se você é um usuário do Firefox, você pode confira o add-on FF que suporta FireFox v38 e superior. Até agora eu não vi nenhum suporte para os usuários do Safari / Opera, mas é uma extensão de código aberto, então isso pode vir em um futuro próximo.