Chrome 97 - What’s New in DevTools

Key Takeaways

[Music] see i'm previous i'm jessalyn let's dive into what's new in dev tools in chrome 97. first up an exciting preview feature the new recorder panel allows you to record replay and measure your user flows open the panel via more options more tools recorder let's start a new recording by giving it a name well i'm going to use emojis here i like espresso so i'll add it to the card flat white is nice too let's add that as well take a look at the recorder panel now all our steps are recorded real time now go to the card to view your order let's add one more espresso here and stop the recording let's click on the replay button to verify the recording nice imagine you can record and replay your critical user journeys just like that every time after product release not only that you can edit the steps export the user flow to puppeteer script and measure the user flow in the performance panel go to google.girl dev2 recorder to learn more with the step-by-step tutorial next more modern devices are now added in the device list toggle the device toolbar click on the device list newer devices like the iphone 12 and pixel 5 are now added to the list next the edit as html now supports auto complete and syntax highlights in the elements panel right click on an element and select edits.html try adding a tag or an attribute the author completes provides you suggestions on what you are looking for next an experimental feature you can now sync dev2 settings across devices no need to redefine the settings again and again to enable that make sure your chrome profiling is on then open the dev tool settings and scroll down you can view the dev 2 sync status here the devtools sync is enabled by default when you turn on chrome profile sync you can click to disable that most of the settings are synced except for the workspace experiments devices tabs and a few other general settings here is a bonus tip you can fix the panel layout if you find the auto rearrangement doesn't suit your needs for example the styles pane in the elements panel will be moved to the bottom when the screen size is too small you can disable that via settings panel layout set it to vertical try to resize the panel now the styles pane position is fixed alright there are more new features in chrome devtools 97 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 98 bye [Music]