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.
Table of Contents
How to launch Inspect Element and locate the code in Google Chrome
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.
Using Mouse:
- Click and select elements of the web content, which source you want to view.
- Right-click on the selected part and hit ‘Inspect Element’ from the pop-up menu.
Using Keyboard:
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.
Editing the source code of a web page
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.
Debugging using Inspect Element
Sitting beside the ‘Elements’ tab on the top right side of the window is the ‘Console’ menu, which shows the existing errors on your website. The errors shown under this tab helps pretty much in debugging. It detects code errors responsible for not loading of an image, JavaScript error, errors in page layout, etc. With proper knowledge of editing source code, you can easily rectify those error in order to make your website look inch-perfect.
Inspect Elements on other web browsers
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.
Inspect elements in Mozilla Firefox
Firefox, just like Chrome comes with a built-in ability to inspect elements. However, it uses a different name for the tool, ‘Inspector’.
- Right-click your mouse on the page or select the element to be inspected.
- Click ‘Web Developer’ from the browser’s menu tab and open the ‘Inspector’.
Inspect elements in Internet Explorer
- Inspect Element box in the Internet Explorer can be accessed just by hitting ‘F12’ key from the keyboard.
- The same can also be done from the ‘Tools’ menu, followed by clicking on the ‘F12 Developers Menu’ option.
Inspect elements in Safari
- Right click on the web page, whose source code needs to accessed.
- Click the ‘Develop’ tab and then select ‘Open Web Inspector’
Conclusion
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.
