How to profile React Native source code using Xcode/Instruments/Time Profiler

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?

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.

> 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

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.