Chrome 94 DevTools New Features That Every Developer Should Know

Chrome DevTool 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

 

Chrome  94 DevTools New Features That Every Developer Should Know 

 

Demo :

    

Chrome DevTool New Features That Every Developer Should Know


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

Demo :

 

 

Chrome DevTool New Features That Every Developer Should Know

 

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.

 

Chrome DevTool New Features That Every Developer Should Know

Demo :

 
Chrome DevTool New Features That Every Developer Should Know

 

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

 

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

 

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
 

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


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

2 Comments

  1. Wynn vs. Encore Casino: A Look at Both Houses - Mapy
    Both Houses, including Wynn and 전주 출장안마 Encore, offer 파주 출장마사지 a flat screen TV and free car service. The main difference is 여주 출장안마 they 파주 출장마사지 do not charge extra fees. 경주 출장샵

    ReplyDelete
Previous Post Next Post