When you press the right mouse button on a web page when using Chrome you are given the options menu, one of these options is “inspect element”. If anybody has ever looked at this they will find that they are instantly taken the HTML element the mouse pointer was over. Of course for most people who are just looking at the information on the page this means little. For others though they will notice that a wealth of information is suddenly provided about the page itself and the code behind it.
This information ranges from the actual HTML that is being used to create the page to various debugging options that look at not only the resources being used by the site but also how much bandwidth is being taken up, the speed of the page and also information such as the scripts being used and of course the CSS.
Debugging Web Pages
The main use for all of this information is to not only profile the performance of the web site itself but to also debug problems in the code. When you are creating HTML, especially dynamically it’s sometimes easy to leave the closing tag off a section, leading to open “divs” or incorrect tags meaning images won’t load, or any other numerous issues that can be a hassle to find. What Chrome does is to make this easier to track down by making the code my readable. Firefox can also do this by downloading add-ons such as Firebug.
By experimenting with the developer tools, for example on the “resources” tab you will see that you are able to extract all the elements of the page out and see exactly is used, this is very useful for example when it comes to images. Using the “Network” tab you can also look at the performance of the site and see if there are any bottle necks in the speed. Looking at the speed of images for example can be interesting, if for example the image load is taking over a second and is big, then it may be something that needs to be looked at.
As with any development process web sites must be planned, coded, and then tested and part of the testing process is to look at the performance of the site and how it can be improved. Google Chrome provides free tools that are actually quite useful, especially when looking at the HTML and the quality of the design. It can show you the errors, even audit the code and provide advice on how to improve it. Testing is sometimes something that web designers don’t spend enough time doing, in the end they can end up paying for this so it’s something we must all remember is an essential part of the development process.