We have recently had some interns start at UNiDAYS and while showing one of the newbies how to write Jest tests in our solution one thing they started doing is adding console.log to various places in the code to see how it worked.
Now, go open Chrome and hit F12. This will show you the Chrome Dev Tools debugger.
We will be playing in Console and Sources tabs. For now, select the Console tab.
For those already familiar with the below, check out the Chrome API Reference. It has all
sorts of cool things like
This is standard, you maybe use this all the time to print out messages or objects to see what value is at the time of it being called. This is a slow way of debugging but still a viable option.
You can do this by adding
console.log(‘Code be here’);
This will print the message to the console window.
console.warn and console.error
This is just like console.log, works in the same way, however now you can get a nicely coloured error or warning message into your console. This can have advantages for debugging errors and warnings in a debug/local environment or if you are building a 3rd party plugin of some sort, a far better way of displaying that something is wrong in the way they have implemented your code rather than just throwing an error.
This is beautiful and so under used. Again used like console.log but it will instead display your object in the console as a table view. If you are wanting to log out an array or complex object, try this first, it is infinitely better to be able to see the data rather than console.log
Now you have
console.table all spitting out data to your console, it can become hard to sift through all the noise.
Click on the icon like above and this will open up a sidebar to allow you to filter what type of message you want to see.
You also have the ability to filter your messages using the filter bar. Again this is a massive time saver when searching for specific messages registered to your console window.