CRA not working out of the box, here is how I set it up

I just want to provide a solution on how to get this working with create-react-app.

In CRA custom env variables have to be prefixed. See https://create-react-app.dev/docs/adding-custom-environment-variables/

I use this npm script to start the app. (not sure if cross-env is actually needed these days)

cross-env REACT_APP_DEBUG=app:* react-scripts start

I thought debug will use console.info for logging in browsers, but for some reason using debug.enable(process.env.REACT_APP_DEBUG) does not work.

So I ended up using

import debug from 'debug';

if (process.env.REACT_APP_DEBUG) {
  debug.enable(process.env.REACT_APP_DEBUG);
  debug.log = console.info.bind(console);
}

The process could be easier for newbies like me if there was a section in the docs explaining hot it works in the browser/CRA.

[flybayer]

I had trouble too, logs weren’t showing, but the issue was my browser console was not set to show “verbose” logs.

[Qix-]

This package doesn’t have anything to do with CRA, though. That’s CRA’s job to document their system. Feel free to open an issue there about them adding docs to their project.