Show React events in the timeline when ReactPerf is active #7549
Conversation
ghost
added
| }, | ||
| onUpdateComponent(debugID) { | ||
| checkDebugID(debugID); | ||
| emitEvent('onUpdateComponent', debugID); | ||
| if (isProfiling && hasAdvancedConsoleFeatures) { |
There was a problem hiding this comment.
These actually should be before emitEvent for better precision..
|
This is awesome, we've had the same view on React Native with systrace and it's been really helpful to track down what was going on during render. |
|
Outside of the label uniqueness issue and the missing check, sounds good to me :) |
|
I think performance.measure should be able to produce that same view without logging to the console: https://twitter.com/igrigorik/status/690636030727159808 |
This currently only seems to work on Chrome.
gaearon
changed the title
|
I tried using
This looks like a Chrome bug to me:
|
|
OK, I found a workaround for Chrome issue. |
| @@ -244,11 +301,13 @@ var ReactDebugTool = { | |||
| onBeginLifeCycleTimer(debugID, timerType) { | |||
| checkDebugID(debugID); | |||
| emitEvent('onBeginLifeCycleTimer', debugID, timerType); | |||
| markBegin(debugID, timerType); | |||
There was a problem hiding this comment.
So good, I was going to ask if you could make this less verbose and repetitive :)
There was a problem hiding this comment.
Yeah, I wrote this PR yesterday while waiting for the taxi so it wasn’t really clean 😄
|
Yay, this is going to help so many people! |
|
Is performance.measure() ideally the right way to do this? If so, can we follow up with the Chrome dev team to resolve the bug? |
|
@shaneosullivan a bug was created and involved parties on Chrome team have cc-ed themselves https://bugs.chromium.org/p/chromium/issues/detail?id=640652 |
|
We have a fix landing now for the Chrome bug: https://codereview.chromium.org/2276743004 Update: Fix landed. Update (sept 8th): Just FWIW, I benchmarked the cost of |
* Show React events in the timeline when ReactPerf is active This currently only seems to work on Chrome. * Address Chrome issue (cherry picked from commit 0a248ee)
|
This is amazing, is there a way to run this for React Native for iOS? |
|
@pavlelekic I think it might just work when you use Chrome debugger? You'd need to import Perf addon from RN itself though, maybe |
This was released in React 15.4.0. Read the blog post.
When you open the page with
?react_perf(or manually callReactPerf.start()), this emitsconsole.time()ings which are interpreted specially by Chrome (and maybe other browsers, I haven’t checked).Seems like a nice way to visualize what is being mounted / updated / unmounted.
It looks like this in Chrome Timeline:
Yay or nay?