Como criar um perfil React Native source code usando Xcode / Instruments / Time Profiler

19

Estamos usando o React Native 0.59.10e o React-Redux 5.0.7, e estamos enfrentando um problema de desempenho vinculado à CPU, no qual nossas ações Redux estão demorando ~ 0,25s para serem concluídas.

Criamos um perfil usando a configuração do Time Profiler no Instruments, mas nenhum do nosso código JS é simbolizado.

A depuração remota no Chrome parece apenas depurar a página "inspetor remoto", que é totalmente inútil.

Existe uma maneira de criar / anexar um mapa de origem ou simbolizar os endereços de memória vistos abaixo, para os nomes / chamadas da função JS?

Instrumentos Callstack

javascript ios xcode react-native instruments Craig Otis
fonte
Se você estiver usando o expo, poderá executar o aplicativo diretamente no chrome e depurá-lo lá.
Mykybo 6/11/19
Não, estamos usando um bom número de componentes nativos e, como resultado, a Expo não é uma opção.
Craig Otis

Respostas:

1

Firefox Profiler

Entendendo o Firefox Profiler

O Firefox Profiler possui uma documentação mais atual disponível em profiler.firefox.com/docs/. No entanto, o seguinte pode ter algumas informações potencialmente úteis para problemas específicos do Gecko.

Você pode conferir algumas perguntas freqüentes sobre o Firefox Profilers.

Relatar um problema de desempenho possui um guia passo a passo para obter um perfil quando solicitado pelos desenvolvedores do Firefox.

1. Linha do tempo

A linha do tempo possui várias linhas de marcadores de rastreamento (segmentos coloridos) que indicam eventos interessantes. Passe o mouse sobre eles para ver mais informações. Abaixo dos marcadores de rastreamento, há linhas correspondentes à atividade em uma variedade de threads.

Dica: os segmentos anotados com "[padrão]" estão no processo pai (também conhecido como "UI", "navegador chrome" ou "principal") e os anotados com "[tab]" estão no conteúdo da Web (também conhecido como "UI") processos "filho").

insira a descrição da imagem aqui

Dica: Tarefas de longa execução no processo pai bloquearão todas as entradas ou desenhos com a interface do usuário do navegador (também conhecida como "interface da interface do usuário"), enquanto tarefas de longa execução no processo de conteúdo bloquearão a interatividade com a página, mas ainda permitirão ao usuário zoom graças a APZ.

Marcadores de rastreamento

Red: Indicam que o loop de eventos não responde. Observe que eventos de alta prioridade, como vsync, não estão incluídos aqui. Observe também que isso indica o que teria acontecido se houvesse um evento aguardando e não necessariamente que houvesse um evento pendente por tanto tempo.

Black: Indicam chamadas IPC síncronas.

2. Árvore de Chamadas

insira a descrição da imagem aqui

A Árvore de Chamadas mostra as amostras organizadas pelo 'Tempo de Execução', que mostra os dados pelo tempo do relógio de parede. Existem nomes cinza mais claros à direita dos elementos da árvore que indicam de onde vem o código. Esteja ciente de que os elementos podem ser de JavaScript, Gecko ou bibliotecas do sistema. Observe que, se algumas funções ainda não foram nomeadas corretamente, a simbolização ainda não pode ser concluída.

Dica: Você pode clicar com o botão direito do mouse no nome de uma função para obter uma opção de copiar seu nome para a área de transferência.

3. Compartilhando o perfil Clique em "Compartilhar ..."> Compartilhar, reconhecendo que os URLs que você abriu e suas extensões do Firefox serão incluídos nos dados do perfil enviados ao servidor. Se você selecionar um período diferente, o URL revelado pressionando "Link permanente" será alterado para garantir que o destinatário do URL veja as mesmas coisas que você está vendo.

Vignesh Kumar A
fonte
O criador de perfil do Firefox se comporta de maneira diferente dos criadores de perfil do Safari ou Chrome? Na minha experiência, eles perfilam a própria página / guia de depuração remota, não o aplicativo React Native em execução.
Craig Otis