What if you can customise any website with your own set of designs and preview it right on your computer screen? Find quite intriguing? Well, you have the option to do this. Although not completely and permanently as you may not be the owner of that particular website, you can still view the changes live to discern how this website would look like with this and that. There is no need to download a third-party app to access the coding behind a webpage. The gem named ‘Google Chrome’ is probably installed on your computer. It has a tool called ‘Inspect Element’ that lets you view and edit the HTML & CSS of any web content.
Besides Google Chrome, computer web browsers like Mozilla Firefox also equips the ability to view the source behind a web page. However, we will limit our discussion to how and what can we do using Inspect Element in Google Chrome. Not only a mere playing tool but Inspect Element can evince to be handy in learning the coding involved while designing a web page. Moreover, it also lets you preview changes to your website before actually applying them. Having gained an overview and brief account of it, let us proceed to know how can we hop on to using it.
Just like other tools in Google Chrome, Inspect Element can also be launched either by using the mouse with a few clicks or using a keyboard shortcut.
Alternately, you can press CTRL + Shift + I keys on your keyboard to launch Inspect Element.
After launching the tool, your browser window will split into parts. The left one will display the web content, while the right one will contain the developer tool window. The latter is further divided into two segments, in which, the left part will show you the HTML code, whereas the right pane shows the CSS rules. As you hover the pointer over the HTML source, you will see the linked area on the web page. On the other side, you can also notice changes in the CSS rules that show the CSS for the elements you are viewing at that time.
The HTML and CSS displayed on the right side of the browser window can be edited. In order to do so, double click anywhere in the HTML source code and make the changes as you want. On the other hand, the styles and attributes in the CSS pane can be edited in the same way and one can also add custom style elements by tapping on the ‘+’ icon. All the changes made are displayed in real-time on the web content. However, as mentioned earlier, these changes are temporary and revert back to the original when the page in refreshed. Changes can only be made permanent if you edit stylesheet or template of your Wordpress theme.
Although Google Chrome is the most used web browser globally, browsers such as Mozilla Firefox and Safari are quite prevalent with users belonging to a particular niche. For example, Firefox is preferred by the one giving priority to privacy and security while Safari is the only option for MacOS users. Hence, follow this guide to access the source of websites using Firefox, Internet Explorer or Safari.
Firefox, just like Chrome comes with a built-in ability to inspect elements. However, it uses a different name for the tool, ‘Inspector’.
Inspect Elements is one of the most practical and free tools offered in most of the web browsers. It serves best when it comes to learning about the technicalities involved while designing a web page. Also, as learnt from the article, it can even be used effectively in debugging of the web contents.