Benedikt Meurer

🧑‍💻 @chromedevtools

[Chrome DevTools @ChromeDevTools]

⚡️ Chrome 131 is rolling out! What's new in DevTools

✨ AI Assistance - Debug CSS with Gemini
📍 Annotate & share performance
🏃🏼‍♂️ Spot layout shifts easier

....and more! Update your browser and try them out! Learn more
https://t.co/rdrldzKkoK

[Chrome DevTools @ChromeDevTools]

Ever spent ages trying to figure out which element is actually scrolling on a page? #ChromeDevTools added a new scroll badge to help you spot them easier!

Ionut & @jecfish will walk us through the technical implementation behind the scenes.

Read: https://t.co/lr1TF29um2

[Chrome DevTools @ChromeDevTools]

✨ More Gemini is coming to DevTools! ✨ Try the new experimental AI assistance panel in Chrome Canary 131 and later to get help understanding layouts and debugging your CSS. Learn more at https://t.co/TWJ01bJKkY

[Addy Osmani @addyosmani]

Introducing AI Assistance in @ChromeDevTools! 🤯🚀

Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini.

The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it.

Some key features:

1. Conversational prompts: Get tailored suggestions and code snippets.
2. Contextual understanding: AI understands the code you're working on.
3. Step-by-step guidance: Get help with everything from styling to debugging.

Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.

[Chrome DevTools @ChromeDevTools]

Debugging async JavaScript exceptions can be tricky! 😖 Learn how #ChromeDevTools predicts if an exception will be caught – and how we make it more accurate! ✨ #engineering #JavaScript #Debugging

👉 https://t.co/OKsSwdvZpq

[Chrome DevTools @ChromeDevTools]

Seeing "This tab shares resources..." in DevTools? You're in a small group experiment! Learn more: https://t.co/OLyCs32SSs

#ChromeDevTools #webdev

[Chrome DevTools @ChromeDevTools]

Coming soon in #ChromeDevTools. We moved various checkboxes into a single dropdown for cleaner UI.
Try it out in the latest Chrome Canary!

[Chrome DevTools @ChromeDevTools]

😍 Woohoo, the Styles tab got an upgrade! In this article, Philip and @ergunsh walk us through how they transform the CSS parsing process from regex matching systems to a more robust parser. #ChromeDevTools

👉 https://t.co/IThdnyjlZq

[Chrome DevTools @ChromeDevTools]

⚡️ What's New in DevTools (Chrome 124)

🧻 New autofill panel
🕞 Throttle WebRTC
🧮 Enhanced scroll-driven animations inspection

... and more! Update your Chrome and give them a try.

👉 https://t.co/GVfnMGOJsp

[Jecelyn Yeen 🐟 @jecfish]

DevTools JS debugging improvement - Preview WeakRef object easier in the Console!

#webdevelopment #javascript #debugging #ChromeDevTools

[Benedikt Meurer @bmeurer]

@wesbos Could you open an issue on https://t.co/GwuJNVvYkM for this? Ideally with context and a repro.

cc @jecfish

[Benedikt Meurer @bmeurer]

@ChromeDevTools @bernstein7z @addyosmani @materialdesign Fix in flight.

[Chrome DevTools @ChromeDevTools]

���� It’s fixed! Update Chrome now and you can access #ChromeDevTools as usual.
✅ https://t.co/lzl9lbN7EM

[Chrome DevTools @ChromeDevTools]

🚨 We’ve identified a bug in Chrome 123 that might prevent you from opening DevTools.

In the meantime, you can still launch DevTools in Incognito mode, with a new user profile or with Chrome Canary.

A new update is coming. Follow the progress here: https://t.co/lzl9lbN7EM.

[Chrome DevTools @ChromeDevTools]

🤩 A nice summary of some recent improvements in Network panel #ChromeDevTools!

🙈 Hide Chrome extension requests
📜 Better HTTP response status texts
⚠️ Enhanced error visibility
🦋 Pretty-printing JSON subtypes

👉 https://t.co/SzBqXpBBJ4

[Benedikt Meurer @bmeurer]

@cnakazawa No Chrome, no DevTools in that list 😭😧

[Bramus @bramus]

In @ChromeDevTools we’re reworking how to display CSS Nesting.

Based on your feedback we now indent the code and show the curly braces.

Update to Chrome 124.0.6341.0 to test it out.

It still has got some rough edges, which should get ironed out during the next few days.

[Benedikt Meurer @bmeurer]

@Jhnnns @kuvos @tmikov With inlining the optimizing compiler can use escape analysis to eliminate the allocations in these cases. Without inlining, the allocations cannot be eliminated in practice (in theory you can build machinery for this, but the ROI would be marginal).

[JavaScript Jabber @JSJabber]

Michael Hablich - Web debugging tools in particular Chrome DevTools https://t.co/hOFWYr8uJF

[Jecelyn Yeen 🐟 @jecfish]

Testing 123~ you can debug your original variables with #ChromeDevTools.
👉🏽https://t.co/2QrFEQ4h3K
#webdevelopment #debugging #javascript