Chrome 101 - What’s New in DevTools

Chapters:
0:00 - Intro
0:12 - Import/Export recorded user flow as a JSON file
1:13 - Export user flow as a @puppeteer/replay script
2:00 - Using @puppeteer/replay as a CLI tools
2:31 - View cascade layers in the Styles pane
4:21 - Support for the hwb() color function
5:06 - Bonus tip: Use the cmd/ctrl key to filter multiple network requests

Links:

#ChromeDeveloper​ #WebDev #DevTools

[SebastianZartner]

I am proud that hwb() made it into Chrome and the DevTools as I added this feature to the Firefox DevTools and created the feature request to add it to Chrome, too.

[nyrtzi]

Oh, I had completely missed the layers feature being a thing. Good to hear of it.

[Maiq-The_Liar]

Import for recorder is awesome feature! Thank you!

[Basik]

Awesome video as always! Love the bonus tips also :)

[SamuelKupferschmid]

I really like the development of recorder👍

[Hyuts]

Appreciate you as always! I was a bit confused on how to get the puppeteer script working and this helped.

[dragon]

Awesome the replay, does it work with playwright?

[avm]

Oh wow, the bonus tip will be really helpful! Thanks a lot for the update :)

[금동대향로-gy]

Is there a way to use replay feature on website using styled component? Styled component dynamically creates class name so I can't use the feature that I work on.

[williamg]

Hi, I'm working with an input of type "file" to upload multiple image, I can preview images directly, but It seems impossible to remove an image from the input file, any idea how to remove file from my input ?

[KoenVerheyen]

4:57 How do you get the copy button on the right hand side of the pane to copy the value?

[breakingthethwall]

You all do a good job on your videos. I think since no one else is doing it you all should be the first to make video's showing new flags or features get added every month that can improve browser performance for just average users! Google doesn't exctly spell it out for users an i know not all flags are developer. some turn on features an some can even be used to turn the things on chrome's chrome://gpu page on!

[ramkumar]

Can we get fuzzy autocomplete for css properties in devtools like we have in vscode?

[jecelynyeen]

Min-ga’-laba (မင်္ဂလာပါ) is the Myanmar (Burmese) way of greeting!

[clementrodrigue]

👀 Very difficult to understand with that accent.
Thanks for providing subtitles. 😀

[seth-rah]

I'll comment this on every new video, seeing as the request was closed before
Give 👏 Us 👏 Console 👏 History 👏 Reverse 👏 Search

[Manish-fmiv]

Another layer of complexity for CSS, lets see what havoc this causes in 10 years time.

[Thanadit]

like your t-shirt look like Angular or something ?

[iprito]

The last one was like 3 or 4 month already

[codernerd]

This id the first video of the new 100 😁