Reagir em Chrome com OffiDocs

DESCRIÇÃO

O Reactime foi indicado ao prêmio Productivity Booster no React Open Source Awards 2020. Visite-nos em https://www.

reati.

me/ Reactime é uma ferramenta de desenvolvedor Chrome de código aberto para depuração de viagens no tempo e monitoramento de desempenho em aplicativos React.

O Reactime permite que os desenvolvedores registrem instantâneos do estado do aplicativo, saltem entre e inspecionem instantâneos de estado e monitorem métricas de desempenho, como tempo de renderização do componente e frequência de renderização.

O Reactime 18.0 apresenta uma variedade de recursos novos e aprimorados com o objetivo de melhorar o desempenho e aprimorar a compatibilidade com o Next.

js e aplicativos Remix.

Também corrigimos o bug da tela preta e otimizamos o uso da memória para chamadas assíncronas.

Classificando instantâneos de estado por rota A lista de instantâneos de estado no painel do Reactime agora é classificada por rota para fornecer ao desenvolvedor dicas visuais da relação instantâneo-rota e facilitar a depuração de viagem no tempo de várias rotas.

Filtrando métricas de desempenho por rota O painel do Reactime inclui um gráfico de barras empilhadas mostrando os tempos de renderização de cada componente, com uma pilha de barras separada para cada instantâneo.

Com o Reactime 14.0, esse gráfico de barras composto agora pode ser filtrado por rota para permitir que o desenvolvedor revise dados de desempenho detalhados por rota.

Recursos: - Compatibilidade do roteador React - Visualização da árvore de componentes - Instantâneos de registro do estado do aplicativo - Depuração de viagem no tempo - Comparação de séries de instantâneos - Tempo e frequência de renderização do componente - Suporte para Gatsby, Next.

js e Remix - Suporte Beta para TypeScript - Tutorial Passo a passo Solução de problemas: Por que o Reactime está me dizendo que nenhum aplicativo React foi encontrado? O Reactime inicialmente é executado usando o gancho global de ferramentas de desenvolvimento da API do Chrome.

Leva tempo para o Chrome carregar isso.

Tente atualizar seu aplicativo algumas vezes até ver o Reactime em execução.

Há uma tela preta em vez da extensão Reactime.

Tente atualizar o aplicativo que deseja testar e atualize o DevTools clicando com o botão direito do mouse em “Recarregar quadro”.

Encontrei um bug no Reactime.

O Reactime é um projeto de código aberto e gostaríamos muito de sua ajuda para melhorar a experiência do usuário.

Crie uma solicitação pull (ou problema) para propor e colaborar em alterações em um repositório.

Leitura adicional: https://medium.

com/@zdf2424/reactime-18-0-better-than-ever-148b81606257 https://medium.

com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20 https://medium.

com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8 https://medium.

com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802 https://itnext.

io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb https://rxlina.

médio.

com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319 https://medium.

com/@liuedar/what-time-is-it-reactime-fd7267b9eb89 https://medium.

com/@christinaor/uncovering-reactime-understanding-react-fiber-redux-compatibility-and-zoning-in-on-components-59f0758e0fa3

Informação adicional:

- Oferecido por Reactime
- Avaliação média: 4.7 estrelas (adorei)
- Desenvolvedor Este endereço de e-mail está protegido contra spambots. Você deve habilitar o JavaScript para visualizá-lo.

Web reativa extension integrado com o OffiDocs Chromium online