npm debug.enable('*') not working in Angular

Question

I want to set npm debug namespaces dynamically as documented here.

My code in app.component.ts is as follows:

import debug from 'debug'

ngAfterViewInit() {
  console.log('BEFORE')
  debug.enable('*')
  const test = debug('test')
  // debug.enable('*')
  test('hello')
  console.log('AFTER')
}

Sadly, I see no logging from debug. I only get the following logged to the browser console:

BEFORE
AFTER

I know I can set the DEBUG environment variable, but that is NOT dynamic and I want this to be dynamic.

PS I have had this problem for years now and it has stopped me using npm debug but I would like to use it again!

Answer 1

Full solution to get npm debug working:

(1) Install deps:

npm i --save debug
npm i --save-dev @types/debug

(2) Add your code

import debug from 'debug'

debug.enable('prefix:hello')
const hello = debug('prefix:hello')
hello('J-e^s^u-s saves!')

Using debug.enable means there is no need to set the DEBUG environment variable.

(3) Verbose logging

And finally enable verbose logging if you are using a Webkit browser e.g. Chrome