Skip to content

Navigate DevTools Faster Using Commands

Navigate Browser's DevTools faster using Commands

If you work extensively with DevTools and want to increase your efficiency, I have good news!

In this guide, we will look at how to navigate faster through the browser’s DevTools using Commands.

To keep it short and sweet, we’re going over some Commands that I believe you can use daily.

Show all whitespace characters

Let’s start by opening DevTools using the F12 key.

Then press CTRL + P to open a file.

Open a file with browser's DevTools

Choose any HTML, CSS, or JavaScript file you’d like.

Then press CTRL + SHIFT + P to open the Command Menu, type in whitespace, and select Show all whitespace characters.

Browser's DevTools Show all whitespace characters Command

Go to line

Imagine you’re working with a big file, with lots of lines of code and you’d want to go to a specific line.

Scrolling would be too tedious, so a better way is to go straight to the line.

You can do that by pressing CTRL + G and typing in the number of the line.


🎥 Need a video demonstration? Check this out:

Go to Symbol

Similar to Go to line, there is the Go to Symbol Command.

Press CTRL + O then type in the @ sign.

A list with all of the symbols present in the file is displayed.

Browser's DevTools Go to Symbol Command

Other Commands

To list the other available Commands, press CTRL + P and type in ? (question mark).

Browser's DevTools List All Available Commands


That’s it for this guide!

Let me know in the comments below what Commands you found to be the most useful and if you find any new useful ones.

Happy coding 😊

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.