Automatic web components profiling in chrome devtools
polydev is the Polymer DevTools Extension - a tool to help develop Polymer and custom elements. Currently it's focused on performance tracking of web components.
Each web component lifecycle callback will be annotated as a span in the timeline called a measure
, representing the time that it took. If a measure is below another measure, the lower callback took place during the higher callback.
Each measure that polydev produces has a unique name like [WC] created paper-icon-button 5
. The format is [WC] callbackName tagName id
. The id numbers are on a per instance and per tag basis and count up from zero.
polydev exposes a method on the host page called _getElementMeasures. It returns an array of ElementMeasure objects, which obey the following interface:
interface ElementMeasurement {
tagName: string;
operation: string;
elementId: number|undefined;
duration: number;
start: number;
end: number;
}
polydev must be built before running. The build step externalizes inline scripts for CSP compliance, and copies some dependencies into convenient locations.
To build, run npm run build
:
> npm run build
The built project is available at build/polydev
.
polydev/build/polydev
When changing files in src/ the dev workflow should work cover most use cases.
> npm run dev
Depending on the change you can either then close and reopen the devtools, or if you've made a change to the content-script or to element-zones, you must reload both the extension and any page you're testing it on.