A simple browser debugger tool


No matter how fancy the breakpoint system is in Chrome and Firefox, I often find myself resorting to using console.log. But the problem is, console.log becomes unwieldy when looking at the logs. And so, a simple solution would be to instead leverage Chrome's and Firefox's developer tools to filter out the logs.

The console API has the debug method. So, instead of invoking console.log, you can invoke console.debug. In Chrome and Firefox, the debug logs are hidden by default, and the only way to see the logs would be to enable "verbose" logging on the console.

Enabling vebose in Chrome

I also wote a library to better highlight logs. You can find the library here:


You can use it like so:

import createDebugger from './debug':
const debug = createDebugger('myapp:mymodule');
console.log(...debug('Some log'));

This is what the logs look like:

With verbose enabled in Chrome

The Chrome console also has a filtering mechanism, that will allow you filter by regular expression, and so finding the appropriate log should be very easy to do.

Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Sal Rahman.