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.
- Install the extension.
- On a page that uses web components, make a timeline recording.
- Look under the User Timing section of the timeline to track time spent in custom element lifecycle callbacks, as well as time spent reacting to Polymer databinding changes.
Screenshot of a recorded timeline
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
.
- Create a new Chrome profile
- Navigate to chrome://extensions
- Check the "Developer mode" checkbox
- Click "Load unpacked extension..."
- Choose
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.