45 Minute Video on the Chrome Developer Tools

Web Inspector Shortcuts

Here are some useful shortcut keys for Web Inspector. For instance: CTRL+SHIFT+I starts the "Developer Tools" in Google Chrome.

http://trac.webkit.org/wiki/WebInspector

Shortcut Keys

Safari

	Mac	Windows / Linux
Show Web Inspector	⌥⌘I	Ctrl-Alt-I
Show Error Console	⌥⌘C	Ctrl-Alt-C
Start Profiling Javascript	⌥⇧⌘P	Ctrl-Alt-P

Chrome & Chromium

	Mac	Windows / Linux
Show Web Inspector	⌥⌘I	Ctrl-Shift-I
Show Error Console	⌥⌘J	Ctrl-Shift-J

Web Inspector

	Mac	Windows / Linux
Next Panel	⌘]	Ctrl-]
Previous Panel	⌘[	Ctrl-[
Toggle Console	Esc	Esc
Focus Search Box	⌘F	Ctrl-F
Find Next	⌘G	Ctrl-G
Find Previous	⇧⌘G	Ctrl-Shift-G

Console

	Mac	Windows / Linux
Next Suggestion	Tab	Tab
Previous Suggestion	⇧Tab	Shift-Tab
Accept Suggestion	Right	Right
Previous Command / Line	Up	Up
Next Command / Line	Down	Down
Previous Command	⌃P
Next Command	⌃N
Clear History	⌘K or ⌃L	Ctrl-L
Execute	Return	Enter

Elements Panel

	Mac	Windows / Linux
Navigate	Up/Down	Up/Down
Expand/Collapse Node	Right/Left	Right/Left
Expand Node	Double-Click on tag	Double-Click on tag
Edit Attribute	Return or Double-Click on attribute	Enter or Double-Click on attribute

Styles Pane

	Mac	Windows / Linux
Edit Rule	Double-Click	Double-Click
Edit Next/Previous Property	Tab/⇧Tab	Tab/Shift-Tab
Insert New Property	Double-Click on whitespace	Double-Click on whitespace
Increment/Decrement Value	Up/Down	Up/Down
Increment/Decrement Value by 10	⇧Up/⇧Down	Shift-Up/Shift-Down
Increment/Decrement Value by 10	PageUp/PageDown	PageUp/PageDown
Increment/Decrement Value by 100	⇧PageUp/⇧PageDown	Shift-PageUp/Shift-PageDown
Increment/Decrement Value by 0.1	⌥Up/⌥Down	Alt-Up/Alt-Down

Debugger

	Mac	Windows / Linux
Select Next Call Frame	⌃.	Ctrl-.
Select Previous Call Frame	⌃,	Ctrl-,
Continue	F8 or ⌘/	F8 or Ctrl-/
Step Over	F10 or ⌘'	F10 or Ctrl-'
Step Into	F11 or ⌘;	F11 or Ctrl-;
Step Out	⇧F11 or ⇧⌘;	Shift-F11 or Ctrl-Shift-;
Evaluate Selection	⇧⌘E	Ctrl-Shift-E
Toggle Breakpoint Condition	Click on line number	Click on line number
Edit Breakpoint Condition	Right-Click on line number	Right-Click on line number