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 that follows:
The Chrome Inspector opens up in a new window.
Features of Chrome Inspector:
1. Elements: In the Inspector elements tab, you can find HTML, CSS and Javascript elements buried deep in a page. You can edit these values here and notice the change in the background. You can also use the console to run commands. It also offers a complete detail about:
- Styles
- Metrics
- Element Properties
2. Resources: The resources tab tells you about the resource consumption of each element on the page in terms of size and time. So now you can know which element is pulling down the loading speed.
Google, by incorporating the Inspector, thus stays faithful towards Webmasters and developers and helps immensely in the task of developing efficient and high performance websites. Who knows, the Inspector might just fine Chrome a few converts from the beloved Firefox!
15 Responses to “Inspect web elements using Google Chrome Inspector”
[...] may want to subscribe to my RSS feed. Thanks for visiting!A short while ago we wrote about how to – Inspect web elements using Google Chrome Inspector – and discussed how this will immensely help Webmasters. But if Google can inspect web elements, [...]
[...] Inspect web elements using Google Chrome Inspector [...]
this is very useful information thanks for the details provided.
@Padamanabham: Thank you for the comment. Keep reading Three Tips a day or better, subscribe to get your daily dose of technology.
this thing popped up on my screen.”the chrome inspector” i guess.i know nothing about this.funny thing is,i have problems on facebook,now this pops up.what is it,and what can it do for me?i do not know how to use it,and cannot understand the lingo coming across it.please help
Hey Norman,
The Chrome inspector is just a developer’s toolbox thing which developers around the world find very useful. If you don’t want it, just close it like you close any Chrome window. It has nothing to do with your internet surfing. Don’t worry.
Best.
If you provide these details with demonstrate video that will be very much useful.
thanks and regards,
karthik
How do you edit styles in the Chrome Inspector??
[...] tab. You access this tab by right clicking inside the page, and selecting “Inspect element” from that menu. You can see the scripts and the images available, and how long they take to [...]
[...] a totally nerdy level, the Google Chrome browser and its inspect element feature are rocking my [...]
Is there a way to save these results for future reference?
how do you save on the ubuntu version of inspect element?
i can change things but it wont save it for me. it will just go back to the old style.
like if i am on gaia then change my gold to 999,999 it will show up but then i cant save it so it will stay. it will delete it and go back to what i had. i will not have the 999,999 gold like i just put in. if someone can help me out then plz e-mail me.
familyguy2095@hotmail.com
Hi Shantanu Adhicary,
I am looking for the CSS visual Editor to edit my existing web theme.
I know the code inspector i can visually change the style and fonts but i can’t save them all.
Is there any tool for CSS Live Edit. BASED ON WYSIWYG.
Thanks.
Can you tell me how to save changes made by the inspect element?
Is this something like the Firebug plugin for Firefox? If so then it’s definitely a useful tool. Thanks for the tip Shantanu.