Web Debugging Tips

Web developers often struggle with the ability to debug their code and see what is causing elements to look out of place. In one of our previous articles we looked at the best browser for web development, and in this article we will look at how you can use one of those browsers to your advantage and how you can test, debug and experiment directly from the window where people will be viewing your website.

For the purposes of this guide we will be using Google Chrome. However, most if not all of these tips are available in other browsers and are probably located in the exact same places.

Firstly let’s open up the developer tools. To do this click the 3 vertical dots on the top right of your browser to open the settings menu. Then hover over “More tools” and select “Developer tools” at the very bottom of the sub-menu. This will open a developer console pane.

The pane has a few tabs but the ones of interest are Elements, Console, Sources, Network and Application. To be clear the other options are also very useful however this is more of a bigger article and the other tabs involve a bit more set up in order to use. In a later article we will look at the advanced developer options within browsers.