Most used DevTools shortcuts

Using shortcuts makes you faster and a productive developer

Here are some shortcuts I found them useful.

1. Command+Option+I

it opens the last opened panel

2. h

it hides the currently-selected element

3. Command+EE

it clears the network logs

4. ESC

It pulls up the console on any tab

Some Shortcuts in Console

2. $

it equals to

document.querySelector

3. $$

it equals to

document.querySelectorAll

4. $x

it equals to

document.querySelector with xPath

5.$0, $1, ...

$0 It exactly returns the element in the elements' inspector that you selected. (current element)

$1 it returns the previous element
$2 it returns the two previous element

6. Command + K

it equals to

clear()

Here also a video playlist of devtools tips will be updated gradually:

DevTools - YouTube

youtube.com

let me know which else do you use regularly, share them in the comments

Best

Comments

[Abhishek Keshri]

do you have links to any in depth resources? browser devtools is still mysterious to me

[Hash]

I recommend reading developer.chrome.com/docs/devtools/ and its YouTube channel is very updated and well worth watching.