Skip to content

Demonstrates the programmatic recording of a performance profile from a Chrome extension using the Chrome DevTools Protocol.

Notifications You must be signed in to change notification settings

taneliang/react-scheduling-profiler-devtools-integration-poc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Scheduling Profiler DevTools Integration POC

Demonstrates the programmatic recording of a performance profile from a Chrome extension using the Chrome DevTools Protocol.

This is intended as an initial step towards integrating the React concurrent mode scheduling profiler into the main React DevTools.

Context:

Relevant code located in panel.js.

Installation

  1. Clone this repository.
  2. In Chrome, navigate to chrome://extensions/.
  3. Use the "Load unpacked" button to load the cloned repository folder.

Usage

  1. On a new Chrome tab, open Chrome DevTools.
  2. Navigate to the Scheduling Profiler tab. tab
  3. Open a new DevTools window for the Scheduling Profiler tab, and navigate to its Console tab.
  4. Observe a profile that was recorded when the panel was mounted.
  5. Click the Profile button to record another 1-second profile. To modify the profile duration, change the timeout duration in panel.js. profile

About

Demonstrates the programmatic recording of a performance profile from a Chrome extension using the Chrome DevTools Protocol.

Resources

Stars

Watchers

Forks