Chrome 94 DevTools New Features That Every Developer Should Know

Chrome is one of the best web browsers for the developer to developing and debug your web page. It contains lots of developer tools features.

Let’s see what is new dev tools feature is in chrome 94.

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know

New Features :

  • Page Ruler
  • Preferred Language
  • Nest Hub devices
  • CSS container queries batch
  • invert the network filter
  • Display raw Set-Cookie headers
  • Change the color format in the Computed panel

1)Page Ruler

Before Chrome Version 94, we used a page ruler extension to create a pixel-perfect user interface (UI) is time to remove the page ruler extension from your chrome browser.

Now Chrome dev tool allows enabling page ruler in the setting panel.

Page Ruler helps to create a pixel-perfect User Interface (UI)

Enable Feature :

Settings -> Preference -> Elements -> Show rulers

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
Ruler Setting Enable

Demo :

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
Chrome Ruler Demo

2)Preferred Language

Before Chrome Version 94, the dev tool language is English.

Chrome 94 allows the user to choose a preferred language for their dev tool panel.

Chrome 94 dev tools panel supports 50+ languages.

Enable Feature :

Settings -> Preference -> Appearance -> Language

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
Preferred Language Setting

Demo :

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
Preferred Language Demo

3)Nest Hub Device

Nest Hub Device is used to simulate your web page with the Next Hub and Next Hub Max device frame.

Enable Feature :

Open Dev Tool -> Select Responsive Mode -> Click Top Right 3 Dot -> Show device frame.

Nest Hub Device Setting

Demo :

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
Nest Hub Device Demo

4)CSS Container Queries Badge

Container Queries Badge is added next to the elements.

Container Queries Badge will append a badge to the elements when it meets @container rules.

If you click the badge I will show an overview of all child elements nested to the container.

Demo :

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
CSS Container Queries Demo

5)Invert Network Filter

Invert network filter is one of the best features in this version.

It will invert network requests in the network panel.

For example, if you enter “status-code: 404”, it will show all requests not having “status-code: 404”.

Demo :

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
Network Invert Demo

6)Display Raw Set-Cookie Headers

Before Chrome Version 94, It will not show the malformed and uncorrected cookies in the network panel.

Now Chrome 94, we can view the malformed or uncorrected cookies in the request header.

Type response-header-set-cookie in your network panel filter. It will filter the request by key and link the request internally to the issue tab. It will show the malformed and uncorrected header request in the issue tab.

Demo :

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
Display raw set cookies Demo

7)Change Color Format in Compute Panel

Before Chrome Version 94, we can’t change the color format in compute panel. now chrome 94, you can change the color format of any element in the compute panel by using Shift + Click.

Demo :

Chrome DevTool New Features That Every Developer Should Know
Chrome DevTool New Features That Every Developer Should Know
Change Color Format in Compute Panel Demo

I think this information is helpful to you.

Thanks for reading — Don’t Forgot To Share & Comment

Any suggestion or queries please comment, our team will response asps.

Originally published at https://www.attractiveaurora.com on September 29, 2021.

We share the information of Programing, Web Designing and Development , Health care tips, General knowledge facts, Cooking recipes,Beauty and more.