Comment profiler le code source React Native à l'aide de Xcode / Instruments / Time Profiler

19

Nous utilisons React Native 0.59.10et React-Redux 5.0.7, et nous rencontrons un problème de performances lié au processeur, dans lequel nos actions Redux prennent environ 0,25 seconde.

Nous avons profilé en utilisant la configuration Time Profiler dans Instruments, mais aucun de notre code JS n'est symbolisé.

Le débogage à distance dans Chrome semble simplement déboguer la page "inspecteur distant", ce qui est totalement inutile.

Existe-t-il un moyen de créer / attacher une carte source ou de symboliser les adresses de mémoire ci-dessous aux noms / appels de la fonction JS?

Instruments Callstack

javascript ios xcode react-native instruments Craig Otis
la source
Si vous utilisez expo, vous pouvez exécuter l'application directement dans Chrome et la déboguer là-bas.
Mykybo
Non, nous utilisons un bon nombre de composants natifs et, par conséquent, Expo n'est pas une option.
Craig Otis

Réponses:

1

Firefox Profiler

Comprendre Firefox Profiler

Le profileur Firefox dispose d'une documentation plus récente disponible sur profiler.firefox.com/docs/. Cependant, les informations suivantes pourraient contenir des informations potentiellement utiles pour les problèmes spécifiques à Gecko.

Vous pouvez consulter quelques questions fréquemment posées sur les profileurs Firefox.

Signaler un problème de performances dispose d'un guide étape par étape pour obtenir un profil à la demande des développeurs de Firefox.

1. Chronologie

La chronologie comporte plusieurs rangées de marqueurs de traçage (segments colorés) qui indiquent des événements intéressants. Passez la souris dessus pour voir plus d'informations. Sous les marqueurs de traçage se trouvent des lignes correspondant à l'activité sur une variété de fils.

Conseil: les threads annotés avec "[par défaut]" sont dans le processus parent (aka "UI", aka "browser chrome", aka "main") et ceux annotés avec "[tab]" sont dans le contenu Web (aka "enfant").

entrez la description de l'image ici

Astuce: les tâches de longue durée dans le processus parent bloqueront toutes les entrées ou tous les dessins avec l'interface utilisateur du navigateur (alias "UI jank") tandis que les tâches de longue durée dans le processus de contenu bloqueront l'interactivité avec la page tout en permettant à l'utilisateur de faire un panoramique et zoomez autour grâce à APZ.

Marqueurs de traçage

Red: Cela indique que la boucle d'événements ne répond pas. Notez que les événements de haute priorité tels que vsync ne sont pas inclus ici. Notez également que cela indique ce qui se serait produit s'il y avait eu un événement en attente et pas nécessairement qu'il y avait un événement en attente pendant aussi longtemps.

Black: Ceux-ci indiquent des appels IPC synchrones.

2. Arborescence des appels

entrez la description de l'image ici

L'arbre d'appels montre les échantillons organisés par «Durée d'exécution» qui afficheront les données par heure d'horloge murale. Il y a des noms gris plus clairs à droite des éléments d'arbre qui indiquent d'où vient le code. N'oubliez pas que les éléments peuvent provenir de JavaScript, de Gecko ou de bibliothèques système. Notez que si certaines fonctions ne sont pas encore nommées correctement, la symbolisation n'est peut-être pas encore terminée.

Conseil: vous pouvez cliquer avec le bouton droit sur le nom d'une fonction pour obtenir une option permettant de copier son nom dans le presse-papiers.

3. Partager le profil Cliquez sur "Partager ..."> Partager en reconnaissant que les URL que vous aviez ouvertes et vos extensions Firefox seront incluses dans les données de profil envoyées au serveur. Si vous sélectionnez une plage de temps différente, l'URL révélée en appuyant sur "Permalien" changera de sorte que vous puissiez être sûr que le destinataire de l'URL verra les mêmes choses que vous voyez.

Vignesh Kumar A
la source
Le profileur Firefox se comporte-t-il différemment des profileurs Safari ou Chrome? D'après mon expérience, ils profilent l'onglet / la page de débogage à distance lui-même, pas l'application React Native en cours d'exécution.
Craig Otis