Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

What is the Inspect Element feature in Google chrome and how can I benefit from it? When in the Inspect Element window if I click the Resource tab it doesn't show me any load times. How can I use this feature effectively?

I see the following screen when I open "Inspect Element" by right clicking on the page and selecting the Inspect Element item:

alt text

share|improve this question

4 Answers 4

up vote 7 down vote accepted

Inspect Element is Chrome's version of Firebug. It's not quite as full-featured, but it is still a very useful tool.

Make sure that the Resource tab is enabled - if it isn't, you won't be getting any load times. Click the big "Enable resource tracking" button.

Screenshot

share|improve this answer
    
@Dan, I am seeing totally different screen than you, I have updated my question with my screenshot what I am seeing, I am not seeing the Scrips and Profiles tab. Please tell me why its happening? –  Prashant Jul 16 '09 at 5:53
    
It's probably different because I'm running on the dev channel for Chrome instead of the stable version. The only advice I can give is to try both restarting Chrome and reloading the page. –  Dan Walker Jul 16 '09 at 5:55
    
I'm running on the dev channel what is this and can I too run my browser same as you are running, can you please guide me how to do that?? –  Prashant Jul 16 '09 at 5:57
    
dev.chromium.org/getting-involved/dev-channel - however, I would be cautious about installing this, especially if this is your main browser. At times it can be prone to crashing and seemingly random hangs. –  Dan Walker Jul 16 '09 at 6:03
    
Ok, thanks @Dan :) –  Prashant Jul 16 '09 at 6:05

As others have mentioned, it's the WebKit Web Inspector, which lets you inspect the HTML and other resources of a page, and assess loading times and such. Here's a screenshot of using it on this page (from Safari; same inspector):

WebKit web inspector

share|improve this answer

Inspect Element allows you to inspect whichever HTML element is closest to the area you clicked just like the Firefox extension firebug. If you want to see timings you have to enable resource tracking permanently, it should prompt you for this.

share|improve this answer

Load Time Not sure what Chrome version everyone else's using, 14.0.835.202 Developer Tools has quite a spread of things to choose from. One of the most useful is inspecting an element and a)live editing html or b)live editing CSS for web development. Once you get everything working, you can go edit the real thing and not have to do the edit-flush-reload dance to see layout changes.

Here's the Network section showing page element load times (like YSlow in Firebug).

It has proved to be far faster and better laid out for my use than Firebug in Firefox.

share|improve this answer

protected by Community Oct 8 '11 at 8:05

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.