What’s new in DevTools 139-141 // TRAIN BRAIN

What’s new in DevTools 139-141

Let’s dive in~ Explore the latest DevTools features in Chrome 139-141 with Matthias!
Chapters:
0:00 - Introduction
0:35 - Network Panel
1:34 - Baseline & CSS
2:52 - AI innovations
Resources:
Multi-page view transitions are here → https://goo.gle/io25-view-transitions
Network conditions panel → https://goo.gle/46DHm8z
Style panel → https://goo.gle/4nj0uQn
Baseline → https://goo.gle/3I9Uc6n
What’s New blog posts:
141 → https://goo.gle/48bFl5Q
140 → https://goo.gle/4gTTLdd
139 → https://goo.gle/4gUt206
Watch more What's New in DevTools → https://goo.gle/NewInDevTools
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#ChromeForDevelopers #Chrome
Speaker: Matthias Rohmer
Products Mentioned: Chrome, Chrome DevTools, CSS

Chrome for Developers

Making the web more awesome....

Slow server problems? Try this #DevToolsAI

Baseline is now in DevTools

Debug FCP #DevToolsAI

Debug TFFB #DevToolsAI

What is CrUX #DevToolsAI

Discover Web AI: Client side Agents, Gen AI, and machine learning in the browser

Debug INP #DevToolsAI

Debug CLS #DevToolsAI

What’s new in DevTools 139-141

Debug LCP #DevToolsAI

CG, WG, W3C, Lively—Wasm standardization with Thomas Lively - WasmAssembly

Meet the team behind Chrome for Developers

Introducing Built-in Language APIs

Built-in AI APIs overview

Benefits of client-side AI

Baseline: The simple way to check browser compatibility

What does cookie blocking mean for your site?

What are third-party cookies?

Pixel Pirate: Interactive DevTools demo

What are cookies?

Pixel Pirate #DevToolTips

Dart, Flutter, and WasmGC with Ömer Ağacan and Martin Kustermann

Go behind the scenes of your website’s CSS

Develop identity solutions without third-party cookies

Privacy pro in prep mode: Catch Natalia at #GoogleIO

How to format console logs with CSS and ANSI #DevToolsTips

Meet Sam: Software Engineer, Vibes Coder, and #GoogleIO Ready!

Experimental extensions menu

Enabling in-browser scientific computing with Wasm: David Kircos of Quadratic

Play Whack-a-Mole in your web browser with Chrome Extensions

How to style console logs: Color and more! #DevToolsTips

Develop payments solutions without third-party cookies

AI/ML for Chrome and ChromeOS

Chrome Web Store for enterprise

How CloudMosa Streams Wasm on Feature Phones

Whack-a-Mole in your browser - Is it possible!?

Add irrelevant scripts to the ignore list in Performance

Navigation management in PWAs: Techniques and best practices

What is wasi-gfx?

What’s new in DevTools: Chrome 133-135

Chrome's new extensions menu explained

Control vertical spacing with CSS text-box

Wasm on feature phones with Cloud Phone's Thomas Barrasso

State-preserving move in DOM

New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!

How to capture network activities of a pop up #DevToolsTips

Advanced Network Analysis with Chrome DevTools #DevToolsTips

Customize your browser with Chrome Extensions

WebGPU and wasi-gfx with renderlet - WasmAssembly

WebAssembly’s security properties #WebAssembly

How to build your own Chrome extension and customize your web experience

Protecting apps with Arcjet through WebAssembly

Decode performance charts with AI Assistance

Keep your HTML styles intact with the Clipboard API unsanitized option

Master prompt engineering for better AI results

Understand performance with AI assistance #DevToolsAI

Diagnose Slow Interactions with the Long Animation Frames API (LoAF)

Roll back Chrome Extension updates instantly

Stay in fullscreen mode with Keyboard Lock API

Cross-document view transitions

Optimize your site's interaction speed with Interaction to Next Paint (INP)

One click debugging in Console Insights

Understand network requests with AI assistance #DevToolsAI

What is the Shared Storage API?

Caching AI models in the browser

Speculation Rules API

Cross-document view transitions #CSSwrapped

Declarative net request API

Web Driver Bidi enables more efficient and capable cross browser test automation.

Find scrollable elements quickly with DevTools

Light dark CSS color function #CSSwrapped

Get started with Scroll-Driven Animations

WebDriver BiDi is production-ready

CSS debugging with AI assistance panel in DevTools

Monitor live performance metrics in DevTools

scheduler.yield API

Boost your workflow with File System Observer

CSSNestedDeclarations

Simpler sign-ins, stronger security with passkeys

Re-imagine the web with CSS anchor positioning