dev-tools-element

Inject and View DevTools Timeline trace easily. Inspired by amazing work done by @paulirish for timeline-viewer.

Demo

Check it live!

Install

Install the component using npm:

$ npm install dev-tools-element --save

Usage

<dev-tools-element width="800" height="600" src="https://gist.github.com/paulirish/f83d30384954937dc3a1fae970a4ae52/raw/b25b27741c652d3091a316dfd8b58bf72f14aa74/twitch.json"></dev-tools-element>

API

Attributes:

• src - path to timeline json trace, can be from dropbox, 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.querySelector('dev-tools-element');
  devToolsElement.addEventListener('DevToolsReady', event => {
    console.log('Dev Tools custom element is ready!!!');
    console.log('DevTools Timeline - ', event.detail.Timeline);
  });

  devToolsElement.addEventListener('DevToolsTimelineLoaded', () => {
    console.log('Timeline trace for Dev Tools custom element is loaded!!!');
    console.log('DevTools Timeline - ', event.detail.Timeline);
  });

Usage with Google Drive resources

1. Make your user Auth into Google account. (https://developers.google.com/identity/protocols/OAuth2 section https://developers.google.com/identity/protocols/OAuth2)
2. When user signed in pass user access token to dev-tools-element.
3. 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.querySelector('.auth-btn');
  authBtn.addEventListener('click', () => {
    const authCallback = () => {
      // if user signed in show him the trace
      if (gapi.auth2.getAuthInstance().isSignedIn.get()) {
        const userAccessToken = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token;
        const devToolsElement = document.querySelector('.gdrive');
        // set userAccessToken token to get file from Google Drive
        devToolsElement.setAttribute('user-access-token', userAccessToken);
        // set file id
        devToolsElement.setAttribute('src', 'drive://0B0c67TI7mLzEMFNhSENiVDhHWEE');
      } else {
        console.log('User isn\'t signed in');
      }
    };
    const checkAuth = callback => {
      // use your own API key
      const apiKey = 'HNprjzdIDWo0CAohrwv48e9W';
      const scopes = [
        'https://www.googleapis.com/auth/drive'
      ];
      const oAuthOptions = {
        fetch_basic_profile: false,
        client_id: '727494663884-kkcfepd74cgg6fu2f5c5v4ruh7b86ul8.apps.googleusercontent.com',
        scope: scopes.join(' ')
      };

      gapi.load('client:auth2', () => {
        gapi.client.setApiKey(apiKey);

        // if we have authinstance yet, initialize
        if (gapi.auth2.getAuthInstance())
          return gapi.auth2.getAuthInstance().signIn(callback);

        return gapi.auth2.init(oAuthOptions).then(callback);
      });
    };
    checkAuth(authCallback);
  });
</script>

Look at source.