[![Build Status](https://travis-ci.com/sebgroup/ng-debug.svg?token=o3pCqnRaRpu27HBJhsyh&branch=master)](https://travis-ci.com/sebgroup/ng-debug) ![npm (tag)](https://img.shields.io/npm/v/@sebgroup/ng-debug/latest.svg)

Usage no npm install needed!

<script type="module">
  import sebgroupNgDebug from 'https://cdn.skypack.dev/@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.


How to install

npm i --save @sebgroup/ng-debug

How to use

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

  imports: [

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}}

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' },

  providers: [{ provide: DEBUG_CONFIG, multi: true, useValue: appDebugConfig }],

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

  .subscribe((v) => this.color = v );


Released using semantic release

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


SEB, ISD Channels, Branch Channels team.