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.

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.

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.

Other Commands

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

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 through comments below, or on Twitter at @pelu_carol.

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.