@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.

    Keywords

    none

    Install

    npm i @sebgroup/ng-debug

    DownloadsWeekly Downloads

    2

    Version

    3.0.1

    License

    Apache-2.0

    Unpacked Size

    164 kB

    Total Files

    36

    Last publish

    Collaborators

    • jonaslalin
    • sebopensource
    • johanobrink
    • hjalmers