Before the holiday break, I was experimenting with a new profiler UI that may eventually make its way into a released version of the React DevTools. In the meanwhile, for anyone who is curious, here's how you can try this new profiler for yourself!
To start, you'll need an updated version of React that logs the new performance marks used by this profiler.
To do this, you'll need to check out PR 17772 and build it from source: yarn install && yarn build --type=NODE. (In the future I may publish an experimental release to NPM to simplify this step.)
Next you'll want to run the actual Profiler (currently built on top of Mozilla's perf.html profiler). I've been pushing my changes to a branch here which you can build (yarn install && yarn start). Or if you'd like, just use the preview build I deployed publically to dist-nine-murex.now.sh.
Next you'll want to run the special build of React to collect a profile. This is the most labor intensive step.
To start, you'll need to use the Firefox Developer Edition and the Gecko Profiler WebExtension.
- Using the Gecko Profiler, click the "start" recording button in the top right corner.
- Do some stuff with React.
- When you're finished, click the "Capture Profile" button (then click "Discard and stop").
- The profile you've just captured will be opened on the public profiler.firefox.com URL.
- To view it in the special React build of the profiler, click the "Publish" button
- This will generate a public URL for you, e.g. https://profiler.firefox.com/public/<data>
- Copy the portion of the URL after "/public/" and paste into the React profiler URL, e.g. https://dist-nine-murex.now.sh/public/<data>
I realize this is a lot of steps and so probably not many people will want to do this, but in case you did- I wanted to share how :) I'll try to reduce the barrier to playing with this tool in the future.