Developer tools are essential to software development. We need them to develop, test, and debug our work. As a Web application developer, the odds are high that you will use Chrome DevTools.

This article will show you some of the hidden features of Chrome DevTools to help you increase productivity, some of which you may or may not already know.

You’ll see the following:

  1. Test Web application performance on low-end devices
  2. Capture screen shots of different device sizes
  3. Changing the user agent
  4. Test your Light and Dark themes
  5. Test your Web application for the visually impaired
  6. Filter network requests by media resources
  7. Get the DOM node reference in the console

Let’s go ~ ~

Test Web application performance on low-end devices

Generally speaking, we developers work on high-end devices with high-speed Internet connections. Unfortunately, our users don’t always have access to high-end devices and high-speed Internet connections.

With the rise of mobile devices, we should all become more aware of this situation. Not everyone has an overpriced phone or always has 4G access.

Do you know how to easily simulate low-end devices and slow network connections?

You can easily control CPU power and network speed in Chrome DevTools. This way, you can test the performance of your Web application and optimize against it. Here’s what you can do:

  1. Open Chrome DevTools and pressCMD/CTRL + SHIFT + POpen the command menu.
  2. The inputShow PerformanceThen press Enter to open the performance panel.

Click the gear icon on the right to turn on capture Settings. Now you can choose different limiting options for network and CPU.

There is also a simpler option to emulate predefined device profiles.

Press CMD/CTRL + SHIFT + M to toggle the device’s toolbar. You can choose between mid-range and low-end phones. These options will set network and CPU throttling relative to each other.

Capture screen shots of different device sizes

You’ve created a nice-looking web application and want to capture screen shots. Fortunately, With Chrome DevTools support, you can easily capture a normal, full-size, or regional screen shot for your Web application.

Open Chrome DevTools, press CMD/CTRL + SHIFT + P to open the command menu, enter a screenshot view of all screenshots and select one of them to capture screenshots.

There is also an easier way to capture normal and full-size screenshots.

Press CMD/CTRL + SHIFT + M to switch to the toolbar of the device. On the toolbar, you can choose between capturing a screen shot and capturing a full-size screen shot.

These options capture a screen shot of the selected emulated device view.

Changing the user agent

As a Web application developer, you need to write applications that can run on multiple platforms. As if that’s not enough, you also need to consider different browsers on different platforms.

You may need to make conditional changes to a particular browser’s style sheet, and thanks to Chrome DevTools, you can easily change the user agent on the fly and test all of this. Here’s what you can do:

  1. Open Chrome DevTools and pressCMD/CTRL + SHIFT + POpen the command menu.
  2. The inputShow Network conditionsPress Enter to open the Network conditions panel and deselect itUser agentOn the rightSelect automaticallyCheck box.

You can now choose from a list of predefined user agents.

Test your Light and Dark themes

The preferreds-color-scheme CSS property helps you detect whether a user has requested a lighter or darker theme. Using this property, you can easily switch between dark and light themes without any user interaction.

To test this behavior, you don’t need to change your system Settings, which Chrome DevTools makes easy. Here’s what you can do:

  1. Open Chrome DevTools and pressCMD/CTRL + SHIFT + POpen the command line menu
  2. The inputShow RenderingPress Enter to open the Render panel.

You can use the Emulate CSS media feature PREFERred-color-scheme :light and preferred-color-scheme:dark To choose between.

Test your Web application for the visually impaired

As Web application developers, we have a responsibility to ensure that our programs are accessible. If we didn’t have visual impairment, it would be hard to understand what it looks like and test our programs against it. Fortunately, Chrome DevTools also provides a solution.

Using visual defect simulation, you can test your Web application for people who have blurred vision, proto-color blindness, post-color blindness, tri-color blindness, and color blindness.

Open Chrome DevTools, press CMD/CTRL + SHIFT + P to open the command line menu, type Show Rendering and press Enter to open the Render panel.

You can choose between Blurredvision, Protanopia, Deuteranopia, Tritanopia, and Achromatopsia using the Emulate Vision Deficiencies option.

Filter network requests by media resources

Did you know that you can use attributes to filter network requests based on many different criteria?

Chrome DevTools provides many options to filter web requests. For example, you can use the large-than:1k attribute to filter requests larger than 1KB.

Open Chrome DevTools, press CMD/CTRL + SHIFT + P to open the command line, type Show Network, and press Enter to open the Network panel. Write larger-than: 1K to the filter input, then press Enter.

Get the DOM node reference in the console

Have you ever wanted to get a DOM node reference in the console for some testing? You can do this using JavaScript. You can use methods such as document.getelementByID and assign nodes to variables.

But some nodes may not have an ID or even a Class. Rather than tangle with selectors, come up with an easier way. In this case, you can take advantage of Chrome DevTools.

Chrome DevTools has a feature called Store as Global Variable. You can easily get any node in the console, you can use it like this:

  1. Right-click on any node you want to obtain on the screen and select from the menucheckTo open Chrome DevTools and select elements.
  2. Right-click the node in the Elements panel and selectStore as global variableAfter that, it will be available in global variables in the console.

conclusion

Chrome DevTools is powerful. There are many other features you may not know about. See the resources section below for more information.

Resources:

  • Developers.google.com/web/tools/c…
  • Twitter.com/ChromeDevTo…
  • www.youtube.com/channel/UCn…

If you have inspiration and help, you can click a concern, collection, also can leave a message to discuss, this is the biggest encouragement to the author.

About the author: Web front-end engineer, full stack development engineer, continuous learner.