Inspect web elements using Google Chrome Inspector
- 6 Comment
Welcome back!
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!
6 Comments on this post
Trackbacks
-
padamanabham said:
this is very useful information thanks for the details provided.
January 13th, 2009 at 9:39 am -
Shantanu Adhicary said:
@Padamanabham: Thank you for the comment. Keep reading Three Tips a day or better, subscribe to get your daily dose of technology.
January 13th, 2009 at 7:44 pm -
norman runyan said:
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
July 17th, 2009 at 1:07 am -
Shantanu Adhicary said:
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.
July 17th, 2009 at 11:11 am
[...] 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 [...]