Whats New In DevTools: Debugging, testing and CSS (Chrome 110 - 112)

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=CrSmjooOEiE


Duration: 6:12
16,359 views
697

Let’s explore some recent debugging, testing and CSS improvements in DevTools (Chrome 110 - 112)!
110 → https://goo.gle/3Uy9Slm
111 → https://goo.gle/3GJrBki
112 → https://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 → https://goo.gle/jecfish
Chrome DevTools → https://goo.gle/chromedevtools

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

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

#ChromeDeveloper​ #WebDev #DevTools



Other Videos By Chrome for Developers


2023-05-10How to optimize web responsiveness with Interaction to Next Paint
2023-05-10Building communications and contact center apps for the Web
2023-05-10How to develop kiosk apps for ChromeOS
2023-05-10Getting started with Attribution Reporting
2023-05-10What's new in Web on Android - updates to WebView, Custom Tabs, and more
2023-05-10How to build and integrate education apps with Google
2023-05-10What’s new in ChromeOS | Google I/O 2023
2023-05-03New in Chrome 113: WebGPU is here, First-Party Sets are rolling out, and more!
2023-04-27Using source maps in DevTools
2023-04-20View Transitions API rocks
2023-04-13Whats New In DevTools: Debugging, testing and CSS (Chrome 110 - 112)
2023-04-12Thinking on ways to solve 3D sci-fi text
2023-04-04New in Chrome 112: CSS nesting rules, no-op fetch handlers skipped, and more!
2023-03-30What are source maps?
2023-03-29Switch groups #Shorts
2023-03-17Privacy Sandbox: A view into industry's feedback
2023-03-09Thinking on ways to solve SWITCH GROUPS
2023-03-08New in Chrome 111: View transitions API, CSS color level 4 and more!
2023-03-03Privacy Sandbox: Preserving trust & usability with new APIs for a private web
2023-02-27Privacy Sandbox: Current stages of ads, measurement and content APIs
2023-02-24Prepare for Chrome's user-agent reduction


Tags:
Chrome
Developers
Google
Web
chrome 110
new in chrome 110
chrome 111
new in chrome 111
chrome 112
new in chrome 112
what’s new in devtools
new to devtools
web vitals
new in devtools
devtools
dev tools
google developers
google chrome developers
chrome developers
chrome latest
google chrome latest
chrome updates
google chrome updates
chrome news
google chrome news
new in chrome
Google Chrome Developers
Google Developers
Jecelyn Yeen