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
We will only cover
Let’s begin with
Click on the animation menu, it will open a window inside your dev tool shown below
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
See the attached image for more details
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
It records an animation with the screenshot and you can replay as many times as you want.
This tool will listen to any changes you make locally in your developer tool.
Let’s find out how?
In developer tool, press
Cmd+Shift+O and you can open the file you wish to change locally.
Let’s say we have opened some
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
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.
This is one of the important tools can help you to improve your site performance too.
Click on coverage menu:
reloadbutton and you can check code coverage when page loads, one of the example, I have shared:
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
Here we have 3 options as you can see in the image
Network throttling and
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
This will disable the cache and your files will be served from the network rather than browser cache
You can see in the image when caching is turned on files are served from
b) Network throttling
This option can help you to check site performance when you have poor networks.
By default, this will work as per your system or area network be it
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
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.
If you see any of the
user-agent is missing, you can add custom
user-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
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.
P.S. 👋 Hi, I’m Aatif! If you liked this, follow me on twitter and share the story with your developer friends.