Skip to content

Add profiler plugin for each platform#15

Open
tmarmer wants to merge 10 commits into
mobile-devtoolsfrom
profiler-plugin
Open

Add profiler plugin for each platform#15
tmarmer wants to merge 10 commits into
mobile-devtoolsfrom
profiler-plugin

Conversation

@tmarmer
Copy link
Copy Markdown

@tmarmer tmarmer commented May 8, 2026

This PR adds the ProfilerDevtoolsPlugin, available at the core layer with wrappers on each platform.

  • Tap into each of the core player hooks and collect timing information each time one is called.
    • Each hook call is assigned a ProfileNode which will have the start and end times, using the performance API when avialable, but defaulting to Date.now otherwise.
    • The value of each node is the total duration and is used by the flame-graph asset to determine the width of the bars it displays
    • The name is displayed on the graph and tooltip is displayed on hover
    • The children structure is inferred by when hooks are called, and is only needed for the flame-graph asset to render correctly.
      • Ideally we can group profiling data in a smarter way in the future and replace the current flame-graph with something that can better show the timings.
  • The plugin has a step to transform the profiling data to work with the flame-graph asset by inserting spacers and removing anything with a value of 0
    • The spacers are needed as the asset left-aligns everything relative to its parent so the (work) spacers provide a way to show the reelative timing with which a hook started relative to the its parent
    • Anything with a value of 0 doesn't render anyway so removing those helps group a few spacers to clean up the ui.
  • There is a rawData tab to show the profiling information without the transformation step.

Flame Graph:
Screenshot 2026-05-08 at 12 25 36 PM

Raw Data:
Screenshot 2026-05-08 at 12 25 52 PM

Change Type (required)

Indicate the type of change your pull request is:

  • patch
  • minor
  • major

Comment on lines +1 to +3
export const getNowTime = globalThis.performance
? () => globalThis.performance.now()
: () => Date.now();
Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

performance isn't available on the ios and kotlin integrations, so it's preferred for accuracy but Date.now still works.

"id": "Profile-main",
"type": "flame-graph",
"binding": "rootNode",
"width": "@[{{rootNode.value}} / 200]@",
Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks weird but it helps normalize the width of each bar on the graph to be 5px per millisecond. Since flame-graph doesn't show times this helps with at least seeing how long everything takes.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant