New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Profiler plug-in for DevTools #1069

Merged
merged 138 commits into from Aug 15, 2018

Conversation

Projects
None yet
5 participants
@bvaughn
Contributor

bvaughn commented Jul 27, 2018

Builds on top of the experimental Profiler API and the "interactions" POC (facebook/react/pull/13253).

Blocking Dependencies

Non-blocking Dependencies

The profiler will degrade gracefully if the interaction-tracking features are not available at runtime.

Follow Up Work

  • The profiling detection capabilities I added to the Profiler backend are, I think, better than the approach used in the Relay plugin. We might consider porting the approach over at some point.
  • I've also added a new, lightweight shared "storage" abstraction that's used by the settings panel (to remember the theme) and by the new profiler plug-in (to remember the active chart). Based on recent Twitter feedback we might consider plugging this into other parts of DevTools to remember more things between sessions.

Demo

Video walk throughs of profiler UI can be found here and here. Below are some screenshots.

No profiling data

screen shot 2018-08-09 at 1 51 47 pm

Recording

screen shot 2018-08-09 at 1 51 57 pm

No timing data for commit

screen shot 2018-08-09 at 1 52 15 pm

Flame chart

screen shot 2018-08-09 at 1 52 25 pm

Ranked chart

screen shot 2018-08-09 at 1 52 32 pm

Interactions

screen shot 2018-08-09 at 1 52 46 pm

No Interactions

screen shot 2018-08-09 at 1 53 21 pm

Fiber render chart

screen shot 2018-08-09 at 1 52 56 pm

bvaughn added some commits May 24, 2018

@gaearon

I haven't reviewed in detail but from a glance looks good. I see a lot of copying — wondering if you have any memory usage concern, and whether it's likely the integration will introduce more GC pressure to potentially skew the measurements. I'd like to play with it in the coming days (maybe let's set up a video call)?

hook.sub('update', ({renderer, internalInstance, data}) => agent.onUpdated(internalInstance, data)),
hook.sub('updateProfileTimes', ({renderer, internalInstance, data}) => agent.onUpdatedProfileTimes(internalInstance, data)),
hook.sub('unmount', ({renderer, internalInstance}) => agent.onUnmounted(internalInstance)),

This comment has been minimized.

@gaearon

gaearon Aug 14, 2018

Member

Is it worth keeping "basic" events necessary for the tree separate from "profiler" events?

This comment has been minimized.

@bvaughn

bvaughn Aug 14, 2018

Contributor

Not sure what you're suggesting.

The added "updateProfileTimes" event was necessary to handle the case where a component bailed out– something DevTools traditionally didn't care about, but now needs to handle so that we can update the actualDuration

This comment has been minimized.

@gaearon

gaearon Aug 14, 2018

Member

Sorry, I proposed to separate

    // Basic functionality:
    hook.sub('mount', ({renderer, internalInstance, data}) => agent.onMounted(renderer, internalInstance, data)),	    hook.sub('mount', ({renderer, internalInstance, data}) => agent.onMounted(renderer, internalInstance, data)),
    hook.sub('update', ({renderer, internalInstance, data}) => agent.onUpdated(internalInstance, data)),	    hook.sub('update', ({renderer, internalInstance, data}) => agent.onUpdated(internalInstance, data)),
    hook.sub('unmount', ({renderer, internalInstance}) => agent.onUnmounted(internalInstance)),	    hook.sub('unmount', ({renderer, internalInstance}) => agent.onUnmounted(internalInstance)),

    // Necessary for profiler:
    hook.sub('root', ({renderer, internalInstance}) => agent.addRoot(renderer, internalInstance)),
    hook.sub('rootCommitted', ({renderer, internalInstance}) => agent.rootCommitted(renderer, internalInstance)),
    hook.sub('updateProfileTimes', ({renderer, internalInstance, data}) => agent.onUpdatedProfileTimes(internalInstance, data)),

So it's clearer the new set of events are additional and aren't necessary for the main part to work.

This comment has been minimized.

@bvaughn

bvaughn Aug 14, 2018

Contributor

Ah! Yeah that makes sense 😄 I misunderstood.

Show resolved Hide resolved plugins/Profiler/backend.js
</p>
)}
<p>
<a href="https://reactjs.org/docs/interaction-tracking.html" target="_blank">

This comment has been minimized.

@gaearon

gaearon Aug 14, 2018

Member

Can we make this an fb.me URL and then add a todo list to point it to the right thing together with the release that includes it?

This comment has been minimized.

@bvaughn

bvaughn Aug 14, 2018

Contributor

Sure. Done.

Although I think fb.me URLs don't support being edited after they're created– so I'm not sure how much value this actually provides vs a direct reactjs.org link.

This comment has been minimized.

@gaearon

gaearon Aug 14, 2018

Member

They do support being edited. (It's behind a scary confirmation dialog but it works.)

This comment has been minimized.

@bvaughn

bvaughn Aug 14, 2018

Contributor

I thought they used to! But the last two times I've looked for a way to edit one, it doesn't appear to exist anymore, and the tool specifically says that you shouldn't edit them because they might be cached externally. Maybe this changed recently?

This comment has been minimized.

@bvaughn

bvaughn Aug 14, 2018

Contributor

Or maybe I just overlooked the dialog 😄 Hopefully that's all!

This comment has been minimized.

@gaearon

gaearon Aug 14, 2018

Member

It's weird because there are two tools.

Go to the one that says "avoid" and then add /create/ to its URL. You'll find the one that allows it (after clicking okay in a confirmation dialog).

This comment has been minimized.

@bvaughn

bvaughn Aug 14, 2018

Contributor

Oh nice! Thanks

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Aug 14, 2018

I see a lot of copying — wondering if you have any memory usage concern, and whether it's likely the integration will introduce more GC pressure to potentially skew the measurements.

It's possible, although I think the impact of this is minimal (compared to the immutable data structure we're already maintaining) unless you actually profile in which case... I still think we're maybe doing the best thing I could think of.

I'd like to play with it in the coming days (maybe let's set up a video call)?

Sounds good to me!

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Aug 15, 2018

Okay– I'm landing this beast. I'll rebase my other less-clutter PR once it's landed and fix up the two issues you mentioned on it.

Let's setup a time (at your convenience) to do a video chat about the profiler and if anything's uncovered, I'll do a follow up.

Thanks!

@bvaughn bvaughn merged commit 6dc13c9 into facebook:master Aug 15, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@bvaughn bvaughn deleted the bvaughn:profiler-poc branch Aug 15, 2018

OrDuan added a commit to OrDuan/react-devtools that referenced this pull request Aug 23, 2018

@jrnail23

This comment has been minimized.

jrnail23 commented Aug 30, 2018

@bvaughn, is this feature actually supposed to work as of devTools v3.3.1? I see the Profiler tab, and I'm able to begin recording (or at least it looks that way according to the UI), but when I finish recording, I get nothing -- it looks as if no data has been collected.
FYI, this is with React v16.4.2, in development mode.
screen shot 2018-08-29 at 10 09 07 pm

@gaearon

This comment has been minimized.

Member

gaearon commented Aug 30, 2018

I thought we didn't show Profiler tab with 16.4.2.. 🤔

It wouldn't work. The code for it will be in the next patch.

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Aug 30, 2018

@bvaughn, is this feature actually supposed to work as of devTools v3.3.1?

No, it isn't expected to work until we release the next minor. Sorry for the confusion.

I thought we didn't show Profiler tab with 16.4.2

The profiler shows if it detects a profiling-capable version of React, which it does by checking for the presence of a specific profiling attribute that actually does exist in 16.4. In hindsight, I should have checked for treeBaseDuration instead.

Regardless, the plan (based on feedback from Sophie) is to show the tab always and promote upgrading to a profiling-capable build of React if it's not supported. I was planning on making that change soon. As part of that, I'll change the feature detection to use treeBaseDuration.

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Aug 30, 2018

Btw @jrnail23, I've just published 3.3.2 to the Chrome and Firefox stores that should fix this issue. Thanks!

@jrnail23

This comment has been minimized.

jrnail23 commented Aug 30, 2018

@bvaughn, thanks for the really quick turnaround on this! Any idea when I might expect to see v3.3.2 in the stores?

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Aug 30, 2018

No. It's out of my hands. Whenever Chrome team approves it. 😄 Usually within an hour or so.

@jrnail23

This comment has been minimized.

jrnail23 commented Aug 30, 2018

@bvaughn, to be clear, should I expect the profiling to work in 3.3.2, or did you just stop the tab from showing for now?

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Aug 30, 2018

I fixed the false positive feature detection. Profiling won't work until we release the next react version or if you're using a pre-built release with it enabled.

@jrnail23

This comment has been minimized.

jrnail23 commented Aug 30, 2018

Got it, @bvaughn, thanks again for being so responsive!

@denniscual

This comment has been minimized.

denniscual commented Sep 1, 2018

@bvaughn Awesome work! I tried to install the pre-build release of devtool but the Profiler tab was not showing. Did I miss something obvious in here? Or currently, the Profiler tab was purposely disabled?

@bvaughn

This comment has been minimized.

Contributor

bvaughn commented Sep 1, 2018

The prerelease page mentions this (but maybe not boldly enough) – the profiler will only work (show up) if you're running the latest React (from master) or one of the pre-built packages also on the page.

@denniscual

This comment has been minimized.

denniscual commented Sep 2, 2018

Sweet thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment