DevTools/OperationInstrument: Difference between revisions

Jump to navigation Jump to search
structure
(more edits)
(structure)
Line 1: Line 1:
== Instrumenting Gecko: adding new markers ==
= Meta Bug =
 
[https://bugzilla.mozilla.org/show_bug.cgi?id=1145271 (operation-instrument) [meta] Instrument Gecko w/ moar timeline markers]
 
This is a meta bug for tracking the instrumentation of Gecko with profiler timeline markers.
 
= Tutorial: Instrumenting Gecko: Adding New Markers =


The Firefox performance tool breaks Gecko operations into labeled chunks of time, displayed as a waterfall (reflows, painting, restyle, JS run-to-completion, parse HTML, ...). Each of these chunks is registered with a '''pair''' of markers. A marker for when the operation '''starts''', and a marker for when the operations '''end'''. To add a new type of marker, instrumentation is required at the Gecko platform level, and some minimal configuration on the devtools frontend side.
The Firefox performance tool breaks Gecko operations into labeled chunks of time, displayed as a waterfall (reflows, painting, restyle, JS run-to-completion, parse HTML, ...). Each of these chunks is registered with a '''pair''' of markers. A marker for when the operation '''starts''', and a marker for when the operations '''end'''. To add a new type of marker, instrumentation is required at the Gecko platform level, and some minimal configuration on the devtools frontend side.


=== Example Bug: Adding Markers to Trace HTML Parsing ===
== Example Bug: Adding Markers to Trace HTML Parsing ==


[https://bugzilla.mozilla.org/show_bug.cgi?id=1151703 Bug 1151703 - Add profiler timeline markers for HTML/XML parsing]
[https://bugzilla.mozilla.org/show_bug.cgi?id=1151703 Bug 1151703 - Add profiler timeline markers for HTML/XML parsing]


=== Platform ===
== Platform ==


The easiest way to trace Gecko events/tasks with start and end timeline markers is to use the '''<code>mozilla::AutoTimelineMarker</code>''' RAII class. It automatically adds the start marker on construction, and adds the end marker on destruction. Don't worry too much about potential performance impact! It only actually adds the markers when the given docshell is being recorded.
The easiest way to trace Gecko events/tasks with start and end timeline markers is to use the '''<code>mozilla::AutoTimelineMarker</code>''' RAII class. It automatically adds the start marker on construction, and adds the end marker on destruction. Don't worry too much about potential performance impact! It only actually adds the markers when the given docshell is being recorded.
Line 37: Line 43:
For now, only the main thread is instrumented.
For now, only the main thread is instrumented.


=== Frontend ===
== DevTools Frontend ==


To get your new markers displayed in the performance tool's UI, edit the config data in '''<code>browser/devtools/shared/timeline/global.js</code>'''. To add new support for new markers in the UI, updating this file is enough.
To get your new markers displayed in the performance tool's UI, edit the config data in '''<code>browser/devtools/shared/timeline/global.js</code>'''. To add new support for new markers in the UI, updating this file is enough.
Confirmed users
125

edits

Navigation menu