Tell me more ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.
up vote 14 down vote favorite
5

Google Chrome has a Firebug-like feature where you click on a page element and choose "Inspect Element".

I am always jumping into the Resources view to look at HTTP requests.

Is there a keyboard shortcut to open this tool?

share|improve this question
Official docs & more useful shortcuts: Chrome Developer Tools: Keyboard Shortcuts – Michal Mau Apr 14 '11 at 12:16
Here are useful informations; code.google.com/chrome/devtools/docs/overview.html – Furkan Ekinci Feb 1 '12 at 13:04
Also, F12 brings up the Inspect Element pane in Chrome on Ubuntu – dylan murphy Nov 15 '12 at 13:31

3 Answers

up vote 18 down vote accepted

I just discovered that Ctrl + Shift + I and Ctrl + Shift + C works. Just like Firebug.

On OS X, that's Command + Option + I or Command + Shift + C.

share|improve this answer
1  
Thanks horizens - just what I was looking for. Agreed, the Inspector has gotten so good I no longer have a need for Firebug. Buh-bye, FF. – shacker Nov 30 '10 at 0:56
Changed my answer... having the same shortcut as Firefox is great. – frankadelic Jan 26 '11 at 20:32
Cmd/Ctrl + Shift + C is pretty useful too, since it allows you to select a specific element to inspect without navigating through the context menu. See also developers.google.com/chrome-developer-tools/docs/shortcuts – Jo Liss May 14 '12 at 15:30
does anyone know how to change this keyboard shortcut? In Firebug, you can configure the shortcut. It Chrome, it seems to be hard-set. for a reason why, I use the dvorak keyboard layout and the C key is far away from my left hand. – Michael Butler Dec 14 '12 at 21:12
up vote 3 down vote

Ctrl + Shift + I opens the developer tools, to the last section you were in. If you were last in the Resources section then you will see the Resources.

I don't think there is a keyboard short cut specifically for Inspect Element, as this depends on context (ie. the location of the mouse)?

share|improve this answer
Frankadelic really wants to open the Developer Tools to access the Resources panel, not the Elements panel, so Ctrl+Shift+I is a good shortcut to use: it opens the Developer Tools the same way you left them. (Chrome's context menus have very few options, so right-click, Inspect element is common way people suggest getting to any of the Developer Tools via mouse.) – Bavi_H Aug 14 '10 at 0:34
Bavi_H, that's correct. – frankadelic Aug 14 '10 at 16:03
up vote 5 down vote

actually holding N and right-clicking somewhere on the page opens the inspect window and takes you to the piece of code where you clicked on in tnnnnnnnnhe page. i just found this out.

share|improve this answer
Your typo is unintentionally hilarious :) – frankadelic Feb 22 '11 at 23:22
thanks for the tip man :) – SalmanPK Dec 3 '11 at 2:18
+1 for a specific point on the page (even if the OP only wanted the general window). This is nice for hover issues, leaving the mouse right where it is, without having to move the mouse down the popup menu. – goodeye Jan 11 '12 at 3:41
1  
@goodeye note: you also simulate hover by clicking the toggle element state (dotted-box-with-arrow) icon, it's on the right of the 'styles' accordian-menu if you can't find it google images for "toggle element state" – Myster Jun 19 '12 at 23:02

protected by Community♦ Jun 24 '12 at 9:34

This question is protected to prevent "thanks!", "me too!", or spam answers by new users. To answer it, you must have earned at least 10 reputation on this site.

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