Skip to content
🔭 Angular 2 BatScanner - Yet another Angular 2 devtool for performance analysis
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/images
packages
test
.babelrc
.editorconfig
.eslintignore
.eslintrc.yml
.gitignore
.travis.yml
LICENSE
README.md
lerna.json
package.json
yarn.lock

README.md

angular-batscanner

angular-batscanner-logo

Travis Status JavaScript Style Guide No Maintenanc Intended

Packages

angular-batscanner-chrome

The chrome extension

link to chrome store

angular-batscanner-core

The core functionalities

NPM version

angular-batscanner-devtool

The timeline devtool

NPM version

Install

npm install angular-batscanner-core

You will need to replace the default CompilerMetadataResolver with BatscannerCompilerMetadataResolver to be able to extract the activity of the all components at runtime.

Usage

Rainbow comsole

import {
  BATSCANNER_PROVIDERS,
  BATSCANNER_ROOT_COMPONENT,
  BatscannerEventEmitter,
  BatscannerRainbowConsoleEmitter
} from 'angular-batscanner-core'

const compilerOptions = {
  providers: [
    BATSCANNER_PROVIDERS,
    {
      provide: BATSCANNER_ROOT_COMPONENT,
      useValue: TimerAppComponent
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerRainbowConsoleEmitter,
      multi: true
    }
  ]
}

document.addEventListener('DOMContentLoaded', function () {
  ng.platformBrowserDynamic
    .platformBrowserDynamic()
    .bootstrapModule(AppModule, compilerOptions)
})

Devtools performance marks

import {
  BATSCANNER_PROVIDERS,
  BATSCANNER_ROOT_COMPONENT,
  BatscannerEventEmitter,

  BatscannerPerformanceMarkEmitter
} from 'angular-batscanner-core'

const compilerOptions = {
  providers: [
    BATSCANNER_PROVIDERS,
    {
      provide: BATSCANNER_ROOT_COMPONENT,
      useValue: TimerAppComponent
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerPerformanceMarkEmitter,
      multi: true
    }
  ]
}

document.addEventListener('DOMContentLoaded', function () {
  ng.platformBrowserDynamic
    .platformBrowserDynamic()
    .bootstrapModule(AppModule, compilerOptions)
})

Batscanner devtool

Install the batscanner chrome devtool

import {
  BATSCANNER_PROVIDERS,
  BATSCANNER_ROOT_COMPONENT,
  BatscannerEventEmitter,

  BatscannerWindowPostMessageEmitter
} from 'angular-batscanner-core'

const compilerOptions = {
  providers: [
    BATSCANNER_PROVIDERS,
    {
      provide: BATSCANNER_ROOT_COMPONENT,
      useValue: TimerAppComponent
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerWindowPostMessageEmitter,
      multi: true
    }
  ]
}

document.addEventListener('DOMContentLoaded', function () {
  ng.platformBrowserDynamic
    .platformBrowserDynamic()
    .bootstrapModule(AppModule, compilerOptions)
})

Then open the devtool you should see a new tab named Angular Batscanner after you app started. Click on it ;) The devtool is recording by default when it's open. You can go on using your app and see on the devtool the Angular activity.

All for them (because YOLO)

const compilerOptions = {
  providers: [
    BATSCANNER_PROVIDERS,
    {
      provide: BATSCANNER_ROOT_COMPONENT,
      useValue: TimerAppComponent
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerWindowPostMessageEmitter,
      multi: true
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerRainbowConsoleEmitter,
      multi: true
    },
    {
      provide: BatscannerEventEmitter,
      useClass: BatscannerPerformanceMarkEmitter,
      multi: true
    }
  ]
}

TODO

  • Use standard version and conventional-github-releaser

Standard Version

npm i -D standard-version conventional-github-releaser

License

Copyright © Douglas Duteil <douglasduteil@gmail.com>
This work is free. You can redistribute it and/or modify it under the
terms of the Do What The Fuck You Want To Public License, Version 2,
as published by Sam Hocevar. See the LICENCE file for more details.
You can’t perform that action at this time.