ng-blackbox
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

Ng-BlackBox

ng-blackbox logo

If airplanes have black boxes why not web apps?

Description

Ng-BlackBox is development dock that provides ability to easily monitor observables, logs, basically anything that you wan't in your app. It was inspired by redux-devtools.

This package is under active development so please tread it as alpha version. I'm also looking for better way of creating library since currently you need scss support.

I will write better README when I finish implementing all futures and tests.

If you want to contribute you are more than welcome to do so. I will also appreciate any tips or suggestion how to make library better.

Features

  • subscribe to observables and see how data is changing
  • see last observable value
  • can be used instead of console.log
  • add custom monitor into dock

demo

Installation

Npm

npm install ng-blackbox

or if you are using yarn

yarn add ng-blackbox

Usage

Add BlackBoxModule to imports

import { BlackBoxModule } from 'ng-blackbox';
 
@NgModule({
  ...,
  imports: [
    ..., BlackBoxModule
  ]
 }

Add dock into your template

<app-black-box [visible]="true">
  <app-black-box-monitor [title]="'Logs'">
    <app-black-box-logs></app-black-box-logs>
  </app-black-box-monitor>
 
  <app-black-box-monitor [title]="'Observables'">
    <app-black-box-observables></app-black-box-observables>
  </app-black-box-monitor>
</app-black-box>

Keyboard shortcuts

key combination action
Ctrl + H SHow/hide dock
Ctrl + M Change dock position

For changing default keys read #configuration.

Custom monitor

<app-black-box>
  ...
 
  <app-black-box-monitor [title]="'Monitor example'">
    Hello world!
  </app-black-box-monitor>
</app-black-box>

Configuration

// TODO

Example:

<app-black-box 
  [visible]="true"
  [visibilityKey]="72"
  [moveKey]="77"
  [autoHide]="true">
  ...
</app-black-box>

Demo

You can find demo in blackbox-app folder. It's using angular-cli. If you wan't to run it just do git clone, yarn install or npm intall and finally ng serve (you must have angular-cli installed).

Licence

MIT

Package Sidebar

Install

npm i ng-blackbox

Weekly Downloads

0

Version

0.0.4

License

MIT

Last publish

Collaborators

  • tilen