Menu
In the Chrome developer panel, this tool...
lets you select elements and go directly to them in the DOM view, and see their CSS attributes.
Safari has the same tool.
Is there a keyboard shortcut to activate that tool (once you have the panel open)?
310
Press Command + Option + J (Mac) or Control + Shift + J (Windows, Linux, ChromeOS) to jump straight into the Console panel. See Get Started With The Console.
How to Inspect Elements. To inspect elements you have to right-click any part of a webpage and click Inspect > Inspect Element. Alternatively, you can press Command+Option+i on your Mac or F12 on your PC to do the same.
Once there, pressing F2 will open the “edit as HTML” feature. Opens the “Find Bar” in Chrome, which lets you search for text on the current webpage. Ctrl+F also performs the same function. Ctrl+F4 closes the tab that you are currently viewing.
To open / switch from inspect element mode and browser window, you can do:
On Mac - ⌘ + Shift + C
On Windows / Linux - Ctrl + Shift + C OR F12
For more useful keyboard shortcuts, refer to the developer tools documentation.
94
The shortcut is Ctrl+Shift+C (source).
You can also right click any element in a web page and click Inspect element.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
