58

We're using React Native 0.59.10 and React-Redux 5.0.7, and are experiencing a CPU-bound performance issue, in which our Redux actions are taking ~0.25s to complete.

We've profiled using the Time Profiler configuration in Instruments, but none of our JS code is symbolicated.

Remotely debugging in Chrome seems to just debug the "remote inspector" page, which is entirely unhelpful.

Is there a way to build/attach a source map, or symbolicate the memory addresses seen below, to the JS function names/calls?

Instruments Callstack

Craig Otis
  • 31,257
  • 32
  • 136
  • 234
  • If you are using expo, you can run the app directly in chrome and debug it there. – Mykybo Nov 06 '19 at 14:43
  • Nope, we're using a good number of native components, and as a result Expo is not an option. – Craig Otis Nov 06 '19 at 18:57
  • Have you used the latest react developer tools with your react native project ? https://stackoverflow.com/questions/33581160/how-to-use-react-dev-tools-with-react-native – Jacksonkr Oct 21 '21 at 15:48

1 Answers1

1

Firefox Profiler

Understanding Firefox Profiler

The Firefox Profiler has more current documentation available at profiler.firefox.com/docs/. However the following could have some potentially useful information for Gecko-specific problems.

You can check out some frequently asked questions about the Firefox Profilers.

Reporting a Performance Problem has a step-by-step guide for obtaining a profile when requested by Firefox developers.

1. Timeline

The timeline has several rows of tracing markers (colored segments) which indicate interesting events. Hover over them to see more information. Below the tracing markers are rows corresponding with activity on a variety of threads.

Tip: Threads that are annotated with "[default]" are in the parent (aka "UI", aka "browser chrome", aka "main") process and those annotated with "[tab]" are in the Web content (aka "child") processes.

enter image description here

Tip: Long-running tasks in the parent process will block all input or drawing with the browser UI (aka "UI jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to APZ.

Tracing markers

Red: These indicate that the event loop is being unresponsive. Note that high priority events such as vsync are not included here. Also note that this indicates what would have happened had there been an event waiting and not necessarily that there was an event pending for that long.

Black: These indicate synchronous IPC calls.

2. Call Tree

enter image description here

The Call Tree shows the samples organized by 'Running Time' which will show the data by wall clock time. There are lighter grey names to the right of tree elements that indicate where the code comes from. Be aware that elements can be from JavaScript, Gecko, or system libraries. Note that if some functions are not yet named properly, symbolication may not yet be finished.

Tip: You can right-click on a function name to get an option to copy its name to the clipboard.

3. Sharing the profile Click "Share..." > Share acknowledging that the URLs you had open and your Firefox extensions will be included in the profile data sent to the server. If you select a different time range, the URL revealed by pressing "Permalink" will change so that you can be sure the recipient of the URL will see the same things you are seeing.

Vignesh Kumar A
  • 27,863
  • 13
  • 63
  • 115
  • Does the Firefox profiler behave differently than the Safari or Chrome profilers? In my experience, they profile the remote debugging tab/page itself, not the running React Native application. – Craig Otis Nov 11 '19 at 12:31
  • 3
    Are you running a react-native app with this examples? This seems to be only the firefox profiler but the question asks for 'how to use the profiler while using the debug mode in react-native on a real device (not simulator) in IOs. – Mateo Marconi May 27 '21 at 02:00
  • How do you actually connect this profiler to the react native app? – david_adler Aug 29 '22 at 10:19