9 Hidden Features of Chrome DevTools

Crazy features that most people don’t know about.

Photo by Diana Polekhina on Unsplash

Web developers love nothing more than finding amazing extensions that accelerate the development process.

One such tool is Chrome DevTools, which offers a lot of features and it is the go-to tool for frontend developers, of all levels.

DevTools has a wide array of features and options, and Google has done a fantastic job documenting this tool.

However, despite the comprehensive documentation, there is still a list of helpful tools and features that most developers don’t know about.

From emulating mobile devices to finding useless JavaScript code, we’ll be covering 9 secret features the DevTools has to offer in this blog.

#1. Controlling Network Speed

Your website will be accessed by people from around the globe using devices of different sizes and platforms.

You can build websites that are responsive using media queries, but what about network speed?

Not every one of your visitors will have the same network speed, hence you need to check how your site behaves with different network speeds.

Luckily, DevTools has the option to switch between 3 network presets:

1. Fast 3G

2. Slow 3G

3. Offline

Source: Author

You also get the ability to add a custom profile.

You can find this feature under the Network tab, by clicking on the “No throttling” dropdown menu.

#2. Multi Cursor

Multi-cursor. Source: Author.

DevTools has an excellent code editor inbuilt.

If you’re someone who edits CSS or any code using this tool, you will absolutely love the multi-cursor support.

It’s very easy to set up as well. All you need to do is press and hold Ctrl( Command on Mac) and click on lines where you want multiple cursors.

You can also undo your selections by pressing and holding Ctrl(Command on Mac) + U.

Moreover, you can also press Alt and drag to get multiple cursors. You can see the implementation here.

#3. Dark Mode

For me, dark mode increases visibility & reduces eye strain. There are many upsides to using dark mode, as well as downsides.

Various articles cover this topic.

Source: Reddit

I use the dark mode wherever possible, from the Twitter app to my calculator app.

DevTools is no exception.

To enable the dark mode, open the Settings by clicking the three vertical dots present in the right corner of the screen.

Then go to *Preferences > **Appearance > Theme and finally select Dark*.

#4. Command Menu

Source: Author

You can quickly open a Command Menu by pressing Ctrl(CMD on Mac)+Shift+P when DevTools is opened.

It provides a fast way to navigate the DevTools and over time, you become familiar with it.

This feature is handy if you are familiar with VS Code’s Command Palette.

You can delete the > and replace it with ? to see all the features offered by this menu.

#5. Detecting Unused Code

Source: Author

Modern JavaScript apps are becoming increasingly complicated and rely on a ton of third-party libraries.

There’s always some code that’s not used and is rendered redundant.

DevTools helps you locate such redundant code that may unnecessarily be hampering your site speed.

To do so, click the three vertical dots on the top-right corner of DevTools. Then click More Tools and select Coverage.

All you need to now is reload the page and the newly popped up panel will display the unused JavaScript code.

You can see the total bytes as well as the unused bytes along with the visual usage bar.

#6. Auto-Start

If your primary browser is some other browser that doesn’t offer such tools, and you only use Chrome for the Devtools, then this feature can be incredibly useful to you.

Source: Author

There is a global option under DevTools settings to auto-open DevTools for popups.

However, the better way of doing this is by starting DevTools not just on popups but with the Chrome browser itself.

You can do so by adding the following line as a property on Google Chrome.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs

And for Mac users,

--auto-open-devtools-for-tabs

You can refer to the answers here to learn more options to enable DevTools.

#7. Color Picker

Color Picker. Source: Author

Color Picker is a great way to select the exact color you need and be able to easily add it to the CSS of your site.

DevTools offers a color picker and accessing it is a very straightforward process.

Go to the Elements tab and from there select the Styles panel to see the CSS.

Simply click on the color square (not the value) and the color picker will show up.

The color picker has the ability to easily convert between color modes, like from HEX to RGBA.

#8. Mobile Emulator

Source: Author

Over 60% of all online searches are performed by mobile devices, making responsive web design a critical part of web development.

Fortunately, DevTools offers a mobile emulator, which has predefined height and width which match that of some popular mobile devices like iPhone, Pixel, Surface, and iPad.

Open DevTools and click the Toggle Device Toolbar as shown in the media above.

You can also choose between mid-tier or low-tier mobile from the “No Throttling” drop-down menu.

Additionally, dragging the handles to resize the viewport is another handy option to get the exact dimensions you need.

#9. Breakpoints

Source: Author

Ever wondered how many media queries sites like YouTube have? You can easily check it by enabling the option to see media queries.

Just click the 3 vertical dots as shown in the media above and enable media queries visibility.

You will see a new panel showing various media query breakpoints which you can click to apply.

Besides this, you can also set breakpoints in your JavaScript code quite easily.

One way to do this is by writing debugger in your code, which will pause the execution when debuggeris reached.

console.log('a');
console.log('b');
debugger;
console.log('c');

The other way is to go to the Sources tab and then head over to the code file and find the line where you want to pause the execution.

Then you have to click the line number on the left side of your code, which will make a blue icon appear on that line number. That’s it.

DevTools will pause before this line of code is executed.

Final thoughts

DevTool is a set of tools inbuilt in Google Chrome, that eases the frontend development process.

It provides some of the most common tools that every web developer needs from time to time.

However, it is an extremely comprehensive tool and offers a variety of features that most developers know they need but they don’t know that DevTools offers it by default.

DevTools has helped me tremendously in building a blogging platform in React, although I had to later convert it to Next.

I have discussed the reasons which made me switch from React to Next in my recent blog.

Hope you enjoyed reading this blog.

More content at plainenglish.io