react / react/react

DevTools: Better linking between browser Performance tab and DevTools Profiler

Offen
#16,483 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: Developer Tools React Core Team Type: Enhancement
Vorherrschende Sprache
JavaScript
Sterne
251k
Forks
51.4k
Ø Merge
2 T. 4 Std.
Gemergte PRs (30 T.)
53

Beschreibung

Notes from a chat with Benoit:

It would be nice if starting profiling (or reload and profiling) in the browser auto-started profiling in DevTools.

It would also be nice if viewing a range of time in the Performance tab narrowed down the commits within the Profiler. At least starting the profilers at the same time would enable a manual match-up.

To my knowledge, none of the currently available APIs (including experimental) would enable us to support this level of integration.


If we were to make use of the DevTools protocol, we could Profiler.start and Profiler.stop the built-in profiler in sync with React's own profiler. Chrome's profiler also dispatches Profiler.consoleProfileStarted and Profiler.consoleProfileFinished events which we could use to follow the browser's profiler if we wanted to.

There do not appear to be any APIs/events for syncing the zoomed-in range.


Originally reported via https://github.com/bvaughn/react-devtools-experimental/issues/37

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der Überprüfung der in diesem Issue erwähnten Methoden DevTools Protocol Profiler.start und Profiler.stop sowie der Ereignisse Profiler.consoleProfileStarted und Profiler.consoleProfileFinished. Ermittle, ob die aktuellen Browser-APIs synchronisiertes React- und Browser-Profiling sowie die Verknüpfung von Bereichen im Performance-Tab unterstützen können; abgeschlossen bedeutet eine definierte, funktionierende Integration oder eine dokumentierte API-Einschränkung.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
devtools, performance
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.