Google Chrome - "Inspect Element" Feature... Did you ever imagine what is it???

• If you don't have a working knowledge of HTML, Cascading Style Sheets, and 

             Javascript you will find this article too heavy.

Google Chrome has loads of features some of which are an absolute delight for Webmasters. One 




such feature is the Google Chrome Inspector. To inspect, edit and debug the HTML, CSS or 




Javascript in a webpage in Google Chrome, right-click on the page and click on Inspect Element 




in the context menu.

The Chrome Inspector opens up in a new window.

Its not same as the view page source option in the right click right menu. How do you take to take 

benefit of this feature ?

Let's say you are playing an online game, and they only let you start out with a certain amount of 


money or certain weapons. You can change that by right clicking the form and click on "Inspect 


Element". In there you will see the source code highlighted for that part of the page.



You can only change the Blue text. For instance, you might see this.

<option value="10 dollars">
<option value="20 dollars">
<option value="30 dollars">
<option value="40 dollars">

Try adding replacing 40 dollars with 1000 dollars. To do so doubleclick on "40 dollars" and change it.

Then click on a blank area of the "Inspect Element" page to save your new settings.

Now reload the HTML page in your browser window to see if it is there.

• But remember, if the script on the server doesn't support that amount, then this won't help you.

BEST USE OF GOOGLE CHROME INSPECT ELEMENT FEATURE

The Inspect Element feature of  chrome developer tool is a great learning work similar to firebug add-on, a web inspection tool that allows inspect, edit and monitor css, html, javascript of a webpage. It’s a allow web developers to inspect their website and make changes on the fly. Changes made by inspect element feature are temporary and once you refresh the page, the changes are gone.

RESEARCH  WORK --> For me the best use of this feature is to use it as a tool for finding information about the theme of a blog. Whether its premium theme or free theme, in most of the cases people hide credits such as theme name, theme url and theme designer from the footer but typically, they do not remove credit from cascading style sheet. If i like a theme i just inspect  the theme’s cascading styles sheet with chrome to know the designer and source of the theme.

ANALYZE AND LEARN --> Say, you like some kind of design or widget on a webpage. With inspect element feature you can learn the piece of code (may be css or scripts ) for any element in a webpage. You can edit these values here and notice the change. You can then copy, edit and implement the same code to give your website an attractive design.

AUDITING AND ERROR DETECTION --> The inspect feature provide statistical data with nice charts regarding errors, loading time and performance of a website . You can use these information to make your website or blog compatible with browser, user friendly and saving bandwidth.

FEATURES OF CHROME INSPECTOR

1. Elements

In the Inspector Elements Tab, you can find HTML, CSS & Javascript elements buried deep in a page. You can edit these values here and notice the change in background.

It offers a complete detail about :-

    1. Styles 

    2. Metrics

  
    3. Element Properties.

2. Resources

The Resources Tab tells you about the resource consumption of each element on the page in terms of size & time. So now you can know which elements is pulling down tha loading speed.