Benedikt Meurer

⚡️ 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 developer.chrome.com/blog/new-in-de…

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: developer.chrome.com/blog/swe-devto…

✨ 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 goo.gle/devtools-ai-as…

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.

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 👉 developer.chrome.com/blog/devtools-…

Seeing "This tab shares resources..." in DevTools? You're in a small group experiment! Learn more: developer.chrome.com/blog/process-s… #ChromeDevTools #webdev

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

😍 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 👉 developer.chrome.com/blog/devtools-…

⚡️ 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. 👉 developer.chrome.com/blog/new-in-de…

DevTools JS debugging improvement - Preview WeakRef object easier in the Console! #webdevelopment #javascript #debugging #ChromeDevTools

@wesbos Could you open an issue on crbug.com for this? Ideally with context and a repro. cc @jecfish

I feel like this part of dev tools needs a re-design. CSS variables and utility classes have made it too hard to see whats being applied to an element. I want to see: 1. The property 2. The selector that added it 3. The computed variable value alongside the variable (blue, 10px, 4deg, etc..) 4. file:line of authorship

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

@bernstein7z @addyosmani @materialdesign Filed a bug, help us by adding in more details there: crbug.com/330678210

🔈@ChromeDevTools now matches your Chrome theme! We just added dynamic theming, supporting @materialdesign 3. Available in Chrome 123+

📣 It’s fixed! Update Chrome now and you can access #ChromeDevTools as usual. ✅ crbug.com/330112831

🚨 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: crbug.com/330112831.

🤩 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 👉 developer.chrome.com/blog/network-p…

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

I’m giving out Steam keys to major contributors of the below technologies. Let me know if you’d like to play Athena Crisis.

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.

@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).

@kuvos @tmikov A couple of years ago I talked to @bmeurer who worked on the v8 optimizing compiler back then and I think he said it’s possible but not implemented yet. Not sure if it has been implemented now. I’d guess it would be easier to implement in cases when the function gets inlined.

The perf impact of this is curious. Arguments are very cheap in JS, unlike objects. Using the wrong order will kill the hidden class. A lot of optimizations need to happen to eliminate the object allocation and the property access cost. The function better be hot and inlineable.

Michael Hablich - Web debugging tools in particular Chrome DevTools twitter.com/i/broadcasts/1…

Testing 123~ you can debug your original variables with #ChromeDevTools. 👉🏽github.com/ChromeDevTools… #webdevelopment #debugging #javascript