dev-tools-element
Inject and View DevTools Timeline trace easily. Inspired by amazing work done by @paulirish for timeline-viewer.
Demo
Install
Install the component using npm:
$ npm install dev-tools-element --save
Usage
API
Attributes:
src
- path to timeline json trace, can be fromdropbox
,github
,google drive
user-access-token
- user access token for loading timeline trace from google drive
Events:
DevToolsReady
- event triggered when Dev Tools loaded and ready to use.
Arguments: CustomEvent.detail. Contains Timeline object.
DevToolsTimelineLoaded
- event triggered when timeline trace for Dev Tools custom element is loaded.
Arguments: CustomEvent.detail. Contains Timeline object.
Example:
const devToolsElement = document; devToolsElement; devToolsElement;
Usage with Google Drive resources
- Make your user Auth into Google account. (https://developers.google.com/identity/protocols/OAuth2 section https://developers.google.com/identity/protocols/OAuth2)
- When user signed in pass user access token to
dev-tools-element
. - Set google drive resource id into
src
attribute, e.g. =>document.querySelector('dev-tools-element').setAttribute('src', 'drive://0B0c67TI7mLzEMFNhSENiVDhHWEE');
Example:
<script src="https://apis.google.com/js/client.js"></script><script> // example for Google Drive usage const authBtn = document; authBtn;</script>
Look at source.