Debugging using the Browser console

One of the most important skills that you can have as a web developer is the ability to debug the web pages using the available tools, like the browser developer tools. Every browser these days comes with developer tools, so you should, theoretically, learn how to use all of them, but it's also good to know which browser has the most powerful tools and start your debugging in that browser. Right now, Chrome is the best one that I suggest.

**Let’s start debugging **

The first thing we are going to do is open the developer tools in Chrome and you can select any of the below ways:

(1) Select More Tools > Developer Tools from Chrome’s Main Menu. (2) Right-click a page element and select Inspect. (3) Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).

So here the one that we're about to use is the JavaScript Console. This console shows all of the warnings and errors related to HTTP requests, CSS files, and JavaScript, plus it shows anything that we log out. The next way is that Check the network tab for identifying any API related errors. Here we can see the requests and responses and we can check each request’s response and what is the status code. All right, so there's a ton more that you can do in your browser dev tools and you should explore them more, but this should be enough to help you in simple debugging.