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

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

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:

• MLH-Fellowship/scheduling-profiler-prototype#56
• MLH-Fellowship/scheduling-profiler-prototype#57

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.
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.