@sebgroup/ng-debug
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

@sebgroup/ng-debug

Build Status npm (tag)

This is a thin debug menu library for Angular applications and libraries. It provides simple way to add various hidden debug/developer options and a menu to enable them.

DEMO App

How to install

npm i --save @sebgroup/ng-debug

How to use

To enable debug menu in your application, simply import module in AppModule:

@NgModule({
  //...
  imports: [
    BrowserModule,
    NgDebugModule.forRoot(),
  ],
  //...
})

Then, by default it can be opened in 3 ways:

  • press keys dbg simultaniously (keyword can be changed)
  • in developer tools console, type ngdbg() ('ng' + keyword)
  • opening page with url parameter ending with keyword: http://localhost:4200/#dbg

Built-in *ngDebug directive

Library includes *ngDebug directive, which can be toggled with Debug Info menu item. It alows displaying info icons with tooltips containing any kind of object, printing object to console.

<div *ngDebug="user" >
  {{user.firstName}} {{user.lastName}}
</div>

Add your own debug functionality

To add debug functionality to menu, you need to provide NgDebugConfig object in your app or library:

import { NgDebugConfig, DEBUG_CONFIG } from '@sebgroup/ng-debug';

const appDebugConfig: NgDebugConfig = {
  name: 'ng-debug demo app',
  items: [
    { id: 'yodaMode', name: 'Yoda Mode', type: 'checkbox' },
    { id: 'color', name: 'Color', type: 'text' },
  ]
};

@NgModule({
  providers: [{ provide: DEBUG_CONFIG, multi: true, useValue: appDebugConfig }],
  //...
})

Then, to receive value changes of debug item, subscribe to them:

this.debugService.getFilteredObservable('color')
  .subscribe((v) => this.color = v );

Releases

Released using semantic release

  • fix(pencil): stop graphite breaking when too much pressure applied
  • feat(pencil): add 'graphiteWidth' option Minor Feature Release
  • perf(pencil): remove graphiteWidth option
  • BREAKING CHANGE: The graphiteWidth option has been removed.

Authors

SEB, ISD Channels, Branch Channels team.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 3.0.1
    0
    • latest

Version History

Package Sidebar

Install

npm i @sebgroup/ng-debug

Weekly Downloads

0

Version

3.0.1

License

Apache-2.0

Unpacked Size

164 kB

Total Files

36

Last publish

Collaborators

  • vsjolander
  • sebopensource
  • johanobrink