Jan 14
Exciting New features from Chrome v.97
Chrome published four new features a few weeks ago. And now I want to summary them because I find they are really useful especially if you like to tamper dev tools of browser. Let’s start with the number 1 new feature.
1. Recorder:
You can now record, replay, and audit user flows with the Recorder Panel. To understand clearly let’s record and replay the checkout process. (Checkout means a common user flow among shopping websites.)
Firstly Open the recorder panel: ( Chrome(v.97) > Right click the mouse > Inspect(Open developer tools) > Customize and control DevTools (3 dots icon in a col and it’s on the top right) > More tools > Recorder. )
After all, you should see this screen:
[ “A note:
If you want to try the replay feature please don’t try it on the elements because the replay button works by reloading the page, for example: If you go to amazon and you start to record by doing something on the page and after stopping the recording you can check it doesn’t work. Because when you record your flow, amazon creates a new element at that time. So if you try to replay, the recorder can't access the same element because amazon creates new elements all every reloads.
“]
Firstly I recorded my actions on the GitHub website and it is amazing you can check events, details, and results also If you click “Measure performance” you will be impressed more. You can read and see more things by this link
2. Refresh device list in Device Mode:
Enabling the Device Toolbar, more modern devices are now added to the device list. Select a device to simulate its dimensions.
3. Autocomplete with Edit as HTML:
The Edit as HTML UI now supports autocomplete and syntax highlights.
4. [Experimental] Syncing DevTools settings across devices:
Your DevTools settings are now synced across devices by default when you turn on Chrome profile sync. You can change the DevTools sync settings via Settings > Sync > Enable settings sync.
#Bonus, for more technical topics;(Web Transport, Script type feature detection, New array prototypes, Emulate Chrome 100 in the UA string, and more) I suggest you visit here.
