Last updated 1 year ago by Ashwin Nayarreact
So you decided to start work on your ambitious React app using create-react-app. You begin filling your code with console.log() messages, and soon you realize there’s no easy way of getting rid of them in the production build. I can already hear some of you screaming, “It’s 2018, use breakpoints in
Your users should not see these messages in their consoles, but manually deleting each console.log() from your code can take ages. One solution would be to monkey-patch console.log() so that it works only in the “development” environment. But it’s monkey-patching… Just hearing that term makes me sick. We can do better.
debug is an extremely popular tool in the Node.js world. It’s robust and can be used for all sorts of logging applications. It also works in web browsers.
We will be using debug for logging in our React app. It will let us create messages of different levels such as info or error, and optionally add the source location, such as the name of the component where the message was triggered.
For it to work, we need to set a field in the browser’s Local Storage with key debug and the value can be anything, like the name of the app, followed by an asterisk (*).