Knowledge is relative and there is no person that knows everything!
Opening the web element inspector may seem basic knowledge if you already know about it but if you’ve never used it before or are new to computing and the web, it may not seem that simple. However, it really is this easy…
It’s that easy. Of course you need to know what all the code means before you can modify it.
What is the element inspector?
The element inspector, often called the web inspector is an open source web development tool that is built into many browsers.
Different browsers use different methods to open it but where Chrome is concerned, you just left click on any part of the website and ‘Inspector’ will be part of the context menu.
You use it to inspect the code used to display all the elements on a webpage. You can figure out problems with these elements (debug) or analyse the existing code used in the webpage and improve it or use it as a code modification tool, in order to ascertain what code to implement into the website to make the changes you require.
For example, you might be looking at one of your webpages and decide to alter a margin or a text colour etc.
There are two main ways to open the inspector to display the right code. Either highlight the content if you can, such as in the case of text, and right click to open the menu or simply right-click in the area that you want to inspect.
The context menu on a right click displays the inspector option (although there are a few occasions that it doesn’t such as in the case of flash or animated content etc.
While writing this post, if I highlight ‘this piece of text’ and right click I get the following menu:
I have highlighted the Inspector option and when clicked, it opens the Inspector window, as below.
Opening the window is that simple. Understanding the code is something else!
If I look at the window on the right it displays information about that piece of text that I highlighted. For instance, I can see that the font is size 16 and that the font colour is #333.
If I wanted to make the text another colour, I would simply change the #333 to the colour I wanted and this would reflect on the webpage.
This doesn’t make the change permanently… otherwise, anybody would be able to change anyones website! It just applies that code change until the window is refreshed. But, where modifications are concerned, if you like the look of the temporary changes you have made, you have the option of copying the code you altered and pasting it into a styling sheet (i.e. style.css) which will make the change permanent.
This post is simply to explain how to open the inspector in Chrome. The options available once you have opened it are endless and range from simple modifications to text/layout etc to complex debugging scripts.
The Inspector can be a great learning tool and is invaluable in trying to figure out bugs with webpage content.