4 awesome features of chrome Dev Tools

As a developer, we are using chrome dev tool a lot. There are many many great features in chrome dev tools and many of them are under utilized. Most of the developers just end up using only a few features of it. Today I am going to show you a few features that will help you in your development and dev flow.

1. Capture the Screenshot

There are many times when you need to take the screenshot of the browser. However, we end up using some extensions or using the keyboard commands. But chrome gives you the option to capture the screenshot from the devtools panel only. It has options :

CMD/CTRL + P (command panels will open). Type capture and the above option will come. Once the screenshot is ready it will be downloaded automatically.

If you are using the responsive option in chrome then the captured screenshot will come straightly on clicking on 3 dots.

2. Audits

Audits are important to know how your site is performing. If you just need a high-level audit of your site focusing on specific areas such as - SEO, Performance, Accessibility etc then this is the feature you will love. With the report, it also gives you the way to fix them. The audit also gives you the option to set the network too.

3. Accessibility 

Accessibility is an important part of every website and web app. Chromedevtool gives you the option of the accessibility tab where it gives you all details of the code you are implementing.

4. More Tools 

This is the very interesting and hidden gem of chrome devtool. You will get a lot of options under these options from console, sensors, screenshots, coverage and many more. Go and check these out and start using in your development flow.

Bonus: There is always "What's New" in chrome keep checking that as well as do follow @chromedevtools for more tips

Do let me know if you know any interesting feature of chrome dev tool in the comment section.

Happy Learning!!