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.
Originally published at https://www.attractiveaurora.com on September 29, 2021.
