I am working on a next js react application and trying to see the rendering cycle. I am trying to debug performance issues which is a bit harder to see since the application is hosted in an iFrame that is hidden on start up.

I was able to get the react profiler using the external react debug tools to work but not for the first render since it is in a hidden iFrame. I was able to add the script so that after it starts up it would connect and then run tests based on this article. This gives me a way to visualize the rendering that happens after the start up.

I was able use the Profiler API to output data to the console the render data which gives me an output like:

    👁 Profiler result for _app 👁
​    👁 Profiler result for _app 👁: 11
​    Phase: update
​    Actual Duration: 7.199999749660492
​    Base Duration: 18.399999856948853
​    Start Time: 44385.90000003576
​    Commit Time: 44396.90000003576
​    Interactions
​    Set(0) {}

I can save that information to a file but I was wondering if anyone knows a way to import that to something that would visualize the data and make it easier to read much like the actual react dev tools.

It is hard to just parse console output, especially as I go deeper in the component tree manually.

Thanks for any help.