For starters, Chrome’s development tools are absolutely stellar. Just hit F12 and let the magic box of wonders greet you. There are so many features that it’s hard to keep track of them all, but one of my favorites is the ability to filter messages in the console.

That sweet, sweet console

If you’re working on a project using a framework like Angular 2, chances are that you have a lot of errors and warnings constantly in your console. It’s a pain to have to scroll past 20 warnings to get to the error you care about or fight through dozens of logs to find the one you actually care about.

Lotsa logs!

That’s why the beautiful people at Google made a way to filter through logs in your console. Click the image filter button and now you can choose whther you want to only see errors, warnings, logs, etc by just clicking on the labels. To see two categories (like errors and logs) at the same time, just Ctrl click on the labels.

click to filter!

You can also use the search box to find specific logs! So you can prepend logs with a custom message like

console.log('COMPONENT', thingToLog)

You can then search the logs for COMPONENT and it will filter out all messages that don’t contain COMPONENT. This is really helpful for if you are trying to debug a certain part of your app without seeing the clutter of other things.

search for anything at all

Basically, filters let you focus on what you need in the console. You don’t have to scroll through the weeds of errors and warnings. You just get to fix your JavaScript quicker.

Hope this helps you speed up some debugging time!