What's new in DevTools: Debugging, testing and CSS (Chrome 110-112)

Опубликовано 13 апреля 2023, 21:00

Let’s explore some recent debugging, testing and CSS improvements in DevTools (Chrome 110 - 112)!
110 → goo.gle/3Uy9Slm
111 → goo.gle/3GJrBki
112 → goo.gle/3KVoYOO

Chapters:
0:00 Intro
0:20 JavaScript debugging improvements
0:34 Logpoint marking
1:10 Breakpoint UX redesign
1:34 Ignoring the irrelevant files in the stacktrace
2:17 Testing improvements
2:33 Export as Puppeteer script with Lighthouse
2:51 Code view & highlights
3:05 Keyboard shortcuts
3:20 Pierce selectors
3:27 Customize selector types
3:45 CSS improvements
3:56 CSS documentation
4:07 HD color picker
4:35 CSS nesting
5:11 Bonus Tip
5:20 Navigate Performance timeline with WASD
5:32 Page reload from blank

Questions? Tweet to us:
Jecelyn Yeen → goo.gle/jecfish
Chrome DevTools → goo.gle/chromedevtools

Coffee demo → goo.gle/3mzWTmE
High definition color CSS guide → goo.gle/css-color-guide
CSS nesting → goo.gle/3MZkkAX

What’s New in DevTools → goo.gle/NewInDevTools
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs

#ChromeDeveloper​ #WebDev #DevTools