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.

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

 

 

 

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

 

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.

 

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 :

 

 

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 :

 

 

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 :

 

 

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 :

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.

 

You may like this : 

 

         Find Unused JavaScript & CSS Code Using Chrome Dev Tool

         CSS Units That Every Developer Should Know

         Form Validation Styling Using Selector in CSS 3

         Advance CSS Selector Become Expert in CSS3

         Most Useful & Advance CSS3 Pseudo Classes

         CSS Pseudo Elements

         CSS Selectors That Every Developer Must Know