Debug: How to use in a create-react-app and webpack 4?

[kopax]

I have installed debug:

$ npm install --debug

The installed version is 4.1.1

I have the following source code:

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import debug from 'debug';
const logger = debug('Routes');

const list = [];
const makeRoutes = (routes) => {
  routes.forEach((route) => {
    if (list.filter((l) => l.key === route.name).length === 0) {
      route.from ?
        logger(`creating redirect ${route.name} with to ${route.to}`) || list.push(<Redirect key={route.name} {...route} />)
        : logger(`creating route ${route.name} with path ${route.path}`) || list.push(<Route key={route.name} {...route} />);
      routes.childRoutes && logger(routes.childRoutes);
      routes.childRoutes && makeRoutes(routes.childRoutes);
    }
  });
  return list;
};

export default ({ routes }) => (
  <Switch>
    {makeRoutes(routes)}
  </Switch>
);

I am trying to enable debugging by doing:

echo "DEBUG=:*" | tee -a .env

I have also tried to install craco and add the following webpack configuration:

```js
webpack: {
plugins: [
new webpack.DefinePlugin({
'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
}),
],
},
````

The documentation say that it also work for browser, how can I enable debug output in my console using create-react-app and webpack 4

Thanks in advance and keep up the good work!

[Qix-]

It's not :*, it's just *.

[kopax]

@Qix- thanks for your quick reply. Does DEBUG=* npm start would be sufficient to enable logging or does this needs to be configured in webpack configuration so it's included in my application context?

[Qix-]

No, it's a runtime variable - what you have there (DEBUG=* npm start) should suffice.

[kopax]

Thank you