DEV Community

Cover image for Most used DevTools shortcuts
Hamid Shoja
Hamid Shoja

Posted on

Most used DevTools shortcuts

#webdev #javascript #devtools #frontend

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
Enter fullscreen mode Exit fullscreen mode

3. $$

it equals to

document.querySelectorAll
Enter fullscreen mode Exit fullscreen mode

4. $x

it equals to

document.querySelector with xPath
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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

DevTools - YouTube

favicon youtube.com

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

Best

Top comments (2)

Collapse
 
2kabhishek profile image
Abhishek Keshri •

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

Collapse
 
hash01 profile image
Hamid Shoja •

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