Hermes profiles are difficult to read

[gaearon]

Profiles captured with Hermes look like this:

Why does every function name include the entire bundle URL? Is there a mistake in generation, or is this intentional? It's very hard to dig through these visually.

Conversely, if I load them in the Performance tool in Chrome, I do see the URL separately (so I see it twice) but clicking the link does not do anything 🥲. I suspect maybe it's because it isn't being formatted in a way that Chrome understands?

[dannysu]

Thanks for bringing this to our attention. This seems to be a mistake in the generation where the functionName field also got the url included: https://github.com/facebook/hermes/blob/main/lib/VM/Profiler/ChromeTraceSerializer.cpp#L432
I'm working on fixing.

The issue with clicking the URL needs more investigation.

Could you please share what version of DevTools or Chrome version you're using for the profiles?

[gaearon]

I'm adding some stuff to Metro to make this more useful for module initialization: facebook/metro#1130

Thank you for working on this!

As a side note, we need to get this profiler documented on the RN website. Currently, RN website suggests using Systrace (which apparently doesn't even exist anymore) and Hermes Sampling Profiler (which never works for me). Trying to use the Performance tab in Hermes DevTools integration hangs. The only way that's worked for me is this obscure "JS Profiler" tab in Hermes Chrome DevTools integration. Is anyone looking into documenting it on the RN website so that people know it exists?

[dannysu]

Landed fix for the function name issue: f956163

[dannysu]

A bit of background, in older versions of Chrome DevTools, it had a "Memory" tab and a "Profiler" tab in the UI. Then in newer versions of DevTools, Google consolidated those tabs' functionality into the "Performance" tab. Unfortunately our implementation isn't compatible with this new change yet. I believe the supported way to use DevTools is through RN's Dev Menu, and use the "Open Debugger" menu item. Going through this flow you'll see the Memory and Profiler tabs. Using DevTools from the installed Chrome browser isn't supported.

@motiz88 & @huntie: What do you think we should do with the outdated info on the RN website for the time being?
I think Perfetto is the tool to use for general perf analysis in newer Android versions. Systrace might be for older versions.

[gaearon]

I believe the supported way to use DevTools is through RN's Dev Menu, and use the "Open Debugger" menu item

Ah, unfortunately that option on Android simulator simply does not do anything at all. I've reported this to @brentvatne before who I believe has routed it somewhere. It does work on iOS simulator, but it only opens the very same DevTools I referred to (which I open by pressing j in the Expo console), which has the "Performance" tab that hangs. The only way to bring up the JS Profiler tab is by doing an obscure sequence (Shift+Cmd+P in those DevTools, "JS Profiler", then it'll show up.)

So to clarify I wasn't using actual Chome. I meant that the "special" DevTools (the button for opening which does not work) has a broken Performance tab (which hangs on recording) and an invisible "JS Profiler" tab (which works, but is not documented on the RN website, so there is no way to guess that it exists).

[motiz88]

There's a docs refresh for debugging coming in React Native 0.73, plus an experimental, opt-in new Chrome DevTools launch flow that fixes the Dev Menu (and other issues) on both platforms. Note that Expo has a standalone implementation of some of this infrastructure that has yet to be unified with React Native's (but that's planned for the future).

We are hard at work on more architectural fixes to debugging that will ship in future releases, where the goal is to fundamentally improve reliability and feature parity with the web version of Chrome DevTools.