Confirmed users
125
edits
DevTools/OperationInstrument: Difference between revisions
adding intro
m (Fitzgen moved page DevTools/PerfMarkers to DevTools/OperationInstrument: Renaming to what we are calling this push.) |
(adding intro) |
||
| Line 1: | Line 1: | ||
''''Operation Instrument'''' is a project that aims to add '''tracing''' instrumentation to Gecko and provide a holistic view of ''where'' time is being spent and ''why''. | |||
Examples of traced operations include: | |||
This is a meta bug for tracking | * Style Recalculation | ||
* Layout | |||
* Painting | |||
* JavaScript run-to-completion | |||
* HTML parsing | |||
* Etc... | |||
The traced operations are displayed in the DevTools Performance tool's timeline. | |||
[[File:Timeline-screenshot.png|thumbnail|DevTools Performance Tool - Timeline]] | |||
This is a meta bug for tracking instrumentation: [https://bugzilla.mozilla.org/show_bug.cgi?id=1145271 (operation-instrument) [meta] Instrument Gecko w/ moar timeline markers] | |||
= Tutorial: Instrumenting Gecko: Adding New Markers = | = Tutorial: Instrumenting Gecko: Adding New Markers = | ||
| Line 9: | Line 20: | ||
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. | ||
This is a good example bug, to see what adding new instrumentation is like: [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] | |||
== | == 1. Adding the Instrumentation to Gecko == | ||
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 43: | Line 52: | ||
For now, only the main thread is instrumented. | For now, only the main thread is instrumented. | ||
== DevTools Frontend == | == 2. Telling the DevTools Frontend About the New Markers == | ||
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. | ||