Chrome’s Console Filters and How to Use Them
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.
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.
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.
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.
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!
Originally published on my blog at vlaservi.ch/blog
