Top 4 important features of dev tools

As a web, developer, we all are quite familiar with developer tools and if you are a fan of google chrome you might have used a chrome dev tool for debugging or some other stuff.

Today I am going to cover some of the witty areas of developer tools and how you can use to check your site behaviors.

Let’s get started, open google chrome, open developer tools, you can see a three dot on the right side of your dev tool.
Open it and hover on More tools option

You can see in the image above we have multiple numbers of options or tools starting from Animations to Whats New.

We will only cover
Animations
Changes
Coverage
Network Conditions

Let’s begin with

1. Animations

Click on the animation menu, it will open a window inside your dev tool shown below

Animation tool (default behavior)

Animation tools will listen to all or any animations on your web page.
It generates frames of animations.
You can control or set the speed of animation on the live web page by making use of set speed option, default it is set to 100%
See the attached image for more details

Animations (with frames)

You can click on any frame and can inspect the changes to understand how the animation worked and impact on the UI element, example screenshot below

Click on the frame

It records an animation with the screenshot and you can replay as many times as you want.

2. Changes

This tool will listen to any changes you make locally in your developer tool.

Changes

Let’s find out how?
In developer tool, press Ctrl+Shift+O or Cmd+Shift+O and you can open the file you wish to change locally.

Type to search a file

Let’s say we have opened some xyz.js file:

Opened file with no change

You can see No changes shown under the changes section as we have not changed anything.

Now let's add some code and check if our local changes are getting recorded or not.
We made a change on line number 52

Changes highlighted as green

This can help to track changes you made in one or multiple files, on the left-hand side you will see the file names that you changed locally.

3. Coverage

This is one of the important tools can help you to improve your site performance too.
It helps to check the code coverage on your webpage and tells you which is the unused javascript and CSS code shipped.
Click on coverage menu:

Coverage (default behavior)

Click the reloadbutton and you can check code coverage when page loads, one of the example, I have shared:

Unused code

You can see in the image red border represent the unused code that is shipped on page load.
This can help you to increase the performance of your site by removing the unused code.

4. Network conditions

This option can help you to change the network environment locally, you can perform different tests based on network conditions.
Let understand how

Network condition (default behavior)

Here we have 3 options as you can see in the image

Caching,
Network throttling and
User-agent

a) Caching
Here caching means browser caching, by default browser is enabled with caching but if you want to check how your site will perform for the first-time users you can click on the checkbox Disable cache
This will disable the cache and your files will be served from the network rather than browser cache

Cach vs Non-Cache

You can see in the image when caching is turned on files are served from disk-cache .

b) Network throttling

This option can help you to check site performance when you have poor networks.

Network environment (default behavior)

By default, this will work as per your system or area network be it 4G|3G etc
Network throttling have multiple options available in network throttling like Fast 3G, Slow 3G, Offline etc (as you can see in the image).

You can change the network settings as 3G to test how your site, assets load and perform different tests based on the environment.

Also, we have one more option Add , you can create a custom network environment as shown below

Add custom network

Here you can set download, upload and latency as per your test suite.

c) User Agent

This option helps you to test your site based on the user device, by the default user agent will be set automatically based on the system you are using.
If you want to see how your site performs on the different browser you can select the user-agent from the options available.

Example screenshot:

If you see any of the user-agent is missing, you can add customuser-agent of your own and can perform tests for your site.

Also, this tool can help you to check how your site will perform when any of the search engine bots will crawl your site.

If you can see the list under User-agent there is Googlebot an option available, you can select the same, reload your webpage and test your HTML which can be crawled by googlebot

Googlebot user-agent

These hidden options under more tools are very helpful in our day to day web development, hope this article will help you to debug more on dev tools and check your web app behaviors.

I hope you enjoyed reading this article.

Thank you.

P.S. 👋 Hi, I’m Aatif! If you liked this, follow me on twitter and share the story with your developer friends.