Getting familiar with the Chrome DevTools (part 2)


Chrome - Misc

January 04, 2020

How is your Saturday going guys? Today we'll be seeing another tip for the Chrome DevTools. A while ago I did one on the 'Elements' tab on the DevTools (tip #62) and now we'll be taking a brief look at the 'Console' tab.

The Chrome DevTools give us a JavaScript console where can check any logs, warning is errors in our applications. It's one of main tools used for debugging since all errors that might show up will pop-up here. It's also quite common for us to need to check a specific value somewhere on an application so we just do a console.log with it and check it here.

console.log('This is a console log'); console.warn('This is a warning') throw new Error('This is an error');

As you can see on the video, on the top bar we can filter what we want to see in the console: logs, warnings and errors. We can also clear the console in here.

Finally, we can also directly type any JavaScript we want in here and do any operations we want and it will run!
Hope you guys have a nice weekend! 😁🔥