Chrome 95 - What’s New in DevTools

Key Takeaways

[Music] tajia hao i'm jessalyn let's dive into what's new in devtools in chrome 95. first up dev2 added an easier yet flexible way to update length in css in the styles pane look for any css property with length hover the mouse over the unit type and notice the unit type is underlined click on it and select a unit type from the drop down now hover the mouse over the unit value and your mouse pointer is changed to a horizontal cursor you can drag horizontally to modify the value to adjust the value by 10 hold the shift key when dragging you can still edit the unit value as text just click on the value and start editing you can now hide specific issues in the issues tab to focus only on those issues that matter to you in the issues tab hover on an issue you would like to hide click on more options and select high issues like this all hidden issues will be added under the hidden issues pane expand the pane you can unhide all hidden issues at once or a selected one devtools has a few ux improvements on the display of properties for example the snippet below creates a url object link with two own properties user and access and updates the value of an inherited property search try logging link in the console own properties are now bold and sorted first these changes make it easier to spot custom properties especially for web apis with many inherited properties apart from these changes the properties in the properties pane are also flattened now for a better dom properties debugging experience especially for web components next you can now report a translation issue via devtools since the last release you can set your preferred language in the settings if you find any issues with the translations help us improve it by reporting a translation issue while more options help report a translation issue apart from that you can now click to read the devtools release notes in six languages other than english including russian chinese spanish japanese portuguese and korean for example now i'm using devtools in japanese in the what's new tab click on more information then you can read what's new in devtools in japanese here is a bonus tip you can track changes that you make locally in depth tools with the changes tab for example let's make some style changes in the styles pane there are times you might forget what changes you have made so far open the changes tab here you can track all your locker changes alright there are more new features in chrome devtools 95 as usual go to the video description for the link to my blog post and other information thanks for watching see you in 4 weeks for chrome 96. [Music] you