iiinova — where your digital self keeps evolving

Reposted by Jecelyn Yeen

Barry Pollard @tunetheweb.com · 01/05/2025

Just booked my travel to @jsnation.gitnation.org on 12th June in Amsterdam. @devnook.bsky.social and I will be talking on all the improvements to Chrome DevTools! You can join remote with below invite: gitnation.com/badges/jsnat... Or better yet, come and join in person! Great conf and great city!

gitnation.com

Check out my badge & claim your free JSNation 2025 remote ticket!

Join 10k engineers worldwide at JSNation 2025 and meet 50 top speakers at June 12 - 16, 2025

1164

Jecelyn Yeen @jec.fish · 31/03/2025

[1/3] Today marks my last day at Google & in Germany. I’m heading back to Malaysia! 🇲🇾 It’s been an incredible 5 years working on #ChromeDevTools and browser automation with the best team ever – the amazing Chrome team! 💙 One of the promises I made to myself when joining was to bring...

12892

Reposted by Jecelyn Yeen

Oleh Aleinyk @oaleinyk.bsky.social · 30/03/2025

Discovery of the day: devtools logpoints. Instead of adding console.log directly in the code, you can add a logpoint in devtools (at least in Chrome). The brilliant @jec.fish has a video about this: youtu.be/JyHjoaUhAus. No more forgotten log lines! 🙌🏻

Add a logpoint in devtools to log runtime values without adding console.log() or debugger in code.

052

Jecelyn Yeen @jec.fish · 28/03/2025

Uh oh, glitches? 😬 Our latest What's New in #ChromeDevTools has the answers (and more!). Watch the full update here: lnkd.in/gT9pWkha @matthiasrohmer.bsky.social

1143

Reposted by Jecelyn Yeen

Barry Pollard @tunetheweb.com · 04/03/2025

So many good #webperf improvements in Chrome 134 DevTools: - Calibrated CPU throttling - field date in perf trace - third-party highlighting and dimming - forced reflow insight - DOM size insight - Lighter console.timestamps for Extensibility API Rolling out from today!!!

1238

Jecelyn Yeen @jec.fish · 04/03/2025

🎉 Chrome 134 is here! What's new in #ChromeDevTools 🔐 New: Privacy and security panel 📈 Calibrated CPU throttling for #webperf analysis 🥇 Dim 3rd-party scripts in performance traces ....and more! Update Chrome and try them out! developer.chrome.com/blog/new-in-...

3235

Reposted by Jecelyn Yeen

Barry Pollard @tunetheweb.com · 28/02/2025

Ohhh happy to see the CrUX field LCP subparts data coming to Chrome DevTools. Stop wasting time optimizing your front end code, if your issue is TTFB!

LCP by phase insight in DevTools Performance panel, now with both lab LCP subparts AND field LCP subparts.

2226

Jecelyn Yeen @jec.fish · 28/02/2025

New video! Let’s explore advanced Network panel techniques, including how to find performance bottlenecks, debug popups’ network activities, configure network conditions, and more. youtu.be/kuliHlLk9wQ #DevToolsTips #ChromeDevTools

youtu.be

Advanced Network Analysis with Chrome DevTools #DevToolsTips

YouTube video by Chrome for Developers

0197

Jecelyn Yeen @jec.fish · 10/02/2025

⚡️ Chrome 133 is here! What's new in #ChromeDevTools 🤖 Persistent AI chat history 📈 Enhanced insights on image performance 🧭 Customize performance trace navigation ....and more! Update Chrome and try them out! developer.chrome.com/blog/new-in-...

0112

Reposted by Jecelyn Yeen

Barry Pollard @tunetheweb.com · 31/01/2025

If you're using Speculation Rules there's a small bug in Chrome 133 (just rolling out now) where DevTools + Local Overrides causes prerenders to crash 😢 This only happens with DevTools open and when Local Overrides are enabled so shouldn't affect most of your users—but annoying for us developers!

2104

Jecelyn Yeen @jec.fish · 27/01/2025

⚡️ Chrome 132 is here! What's new in #ChromeDevTools 🤖 AI Assistance - Debug network, sources & performance with Gemini 📈 Performance - View interaction phrases in live metrics 💾 Manage Chrome extension storage ....and more! Update Chrome and try them out developer.chrome.com/blog/new-in-...

0113

Jecelyn Yeen @jec.fish · 18/12/2024

Good news for those of you who prefer to keep classic #ChromeDevTools color scheme. We added a setting to let you customize that via Settings > Preferences > Match Chrome color scheme.

0112

Reposted by Jecelyn Yeen

Jordan Newland @jenewland1999.bsky.social · 16/12/2024

The new AI features for debugging issues are super nice! As are @jec.fish's great acting skills 😅 www.youtube.com/watch?v=kzDU...

youtube.com

What’s new in DevTools: Chrome 130-132

YouTube video by Chrome for Developers

172

Jecelyn Yeen @jec.fish · 13/12/2024

One last "What's New in DevTools" of the year! 🎉 More improvements on Network, Performance and CSS debugging! Let's go~~ buff.ly/3VDS8a1 @oliverdunk.com @matthiasrohmer.bsky.social #ChromeDevTools #webdev #debugging

080

Reposted by Jecelyn Yeen

Nicolò Ribaudo @nicr.dev · 11/12/2024

Ecma just approved the 1st edition of the new "Source map format" standard, ECMA-426! 🎉 tc39.es/ecma426/2024/

tc39.es

Source map format specification

216047

Reposted by Jecelyn Yeen

Sebastian Markbåge @sebmarkbage.calyptus.eu · 12/12/2024

I'm working on built-in profiling of both Client and Server Components in Chrome DevTools Performance tab. Thanks to the new performance.measure() extensions. h/t Andrés Olivares This works in any RSC environment. In fact, this screenshot is running RSC for Parcel. h/t @devongovett.bsky.social

Screenshot showing the Chrome DevTools Performance tab with RSC integration.

318923

Reposted by Jecelyn Yeen

Bramus @bram.us · 10/12/2024

Spot Non-Composited Animations in Chrome DevTools > The animations track of a performance trace can now tell you if and why an animation was not composited. www.bram.us/2024/12/10/s...

bram.us

Spot Non-Composited Animations in Chrome DevTools

The animations track of a performance trace can now tell you why an animation was not composited.

0246

Reposted by Jecelyn Yeen

Patrick Brosset @patrickbrosset.com · 10/12/2024

TIL Object.assign makes DOM creation more compact: document.body.appendChild( Object.assign( document.createElement('div'), { className: 'foo', textContent: 'Hi' } ) ); Learn more:

developer.mozilla.org

Object.assign() - JavaScript | MDN

The Object.assign() static method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

1469

Jecelyn Yeen @jec.fish · 10/12/2024

Want to know if your redesign actually improved user experience? See real-world performance data with Chrome UX Report! Compare your production (old) and new designs to measure the impact. @tunetheweb.com #webperf #ChromeDevTools Analyze perf: buff.ly/49lv7hM CrUX: buff.ly/3BcmKsq

042

Jecelyn Yeen @jec.fish · 10/12/2024

🥱 What to do when your teammate's asleep but the code's gotta be fixed? Watch to find out: youtube.com/shorts/asJGt... @matthiasrohmer.bsky.social #DevToolsAI #CSS #webdev #debugging

031

Jecelyn Yeen @jec.fish · 06/12/2024

Performance you say? Join Captain Speedy to learn how to pinpoint & fix performance issues with cool insights in #ChromeDevTools. Let’s dive in! 📺 youtu.be/7A70hBrPL4I @tunetheweb.com #DevToolsTips #webperf

1288

Reposted by Jecelyn Yeen

Jake Bailey @jakebailey.dev · 05/12/2024

Interesting blog post by @nsdeschenes.ca about how @codecov.bsky.social made their site not crash on checker.ts (the TypeScript compiler's absurd 50k line file) along with other improvements. sentry.engineering/blog/better-...

sentry.engineering

Better Code Rendering Through Virtualization

How we rebuilt Codecov's code renderer from the ground up to be faster and more efficient, utilizing virtualization.

3264

Jecelyn Yeen @jec.fish · 03/12/2024

🐌 Is your LCP dragging down your page speed? Learn how to use Chrome DevTools to find it! New video in 2 days with a full fixing guide. @tunetheweb.com #webperf #ChromeDevTools

061

Jecelyn Yeen @jec.fish · 02/12/2024

Mayday! Mayday! We need a CSS hero to save our flight! 🛩️ (Spoiler: it involves a lot of frustrated yelling 😂) Watch and find out: youtube.com/shorts/E_3wm... #codinglife #CSS #DevToolsAI @matthiasrohmer.bsky.social

0103

Jecelyn Yeen @jec.fish · 29/11/2024

How to monitor performance metrics live as you interact with the site? The Performance panel is your go-to place. 📺 youtu.be/M5oe010pYbA?... It's so good to be able to post links directly on bluesky! @tunetheweb.com #chromedevtools #webperf #debugging

youtu.be

Monitor live Core Web Vitals in Chrome DevTools #DevToolsTips

YouTube video by Chrome for Developers

081

Reposted by Jecelyn Yeen

Sacha Greif @sachagreif.com · 29/11/2024

Can we just hire someone to rethink browser devtools from scratch already? It's ridiculous that so much of their features are hidden away in nested menus that most developers will never even see.

4603

Jecelyn Yeen @jec.fish · 28/11/2024

🤨 How to filter & copy only listed CSS & JS URLs in Network panel? Hold the Cmd/Ctrl key and …. #ChromeDevTools

092

Jecelyn Yeen @jec.fish · 25/11/2024

New YouTube Short! 🔥 @matthiasrohmer.bsky.social and I are up to something... 👀 Watch it now: youtube.com/shorts/LqBgs... Here are some photos showing the behind the scenes! #DevToolsAI #ChromeDevTools #CSS #webdev

0102

Jecelyn Yeen @jec.fish · 21/11/2024

Well, it works (fast) on your machine, not mine @tunetheweb.com! Watch our latest video to learn how to monitor Core Web Vitals with #ChromeDevTools. 📺 youtu.be/M5oe010pYbA?...

051

Jecelyn Yeen @jec.fish · 19/11/2024

2 neat features to improve network debugging in the Performance panel. #ChromeDevTools 💈 Hover to view critical network information upfront 🕵‍♀️ Click Cmd + F to search Less context switching, better focus. @tunetheweb.com

0142

Reposted by Jecelyn Yeen

Rob Palmer @robpalmer.bsky.social · 17/11/2024

This is a huge improvement to heap inspection inside Chrome DevTools 👍 Seth Brenith at Microsoft gave many anonymous object literals top-level names (using their properties) to stop them getting unhelpfully categorized under "Object". Pics show before & after. developer.chrome.com/blog/new-in-...

Heap snapshot in Chrome Devtools with all objects in one row

Heap snapshot in Chrome Devtools with all objects in separate rows

6556

Jecelyn Yeen @jec.fish · 14/11/2024

🚀 It's out! Debug & fix CSS with the new AI Assistance panel in #ChromeDevTools. Here is an example of how we can ask AI to fix our CSS animations - making the eyes blink ⭐️ Update your Chrome today and pair program with #GoogleGemini! Demo: jec.fish/demo/make-it...

170

Jecelyn Yeen @jec.fish · 13/11/2024

⚡️ 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-...

050

Jecelyn Yeen @jec.fish · 05/11/2024

👋 Servus, Munich devs! See you at the upcoming Frontend Munich meetup on Nov 13th! Our engineers - Nikolay Vitkov and Kateryna Prokopenko will be sharing some recent #ChromeDevTools updates on design systems and AI. Come learn & connect! RSVP: www.meetup.com/munich-front... #webdev #AI

040

Jecelyn Yeen @jec.fish · 05/11/2024

Debug CSS scroll snaps events with these two new event listener breakpoints in #ChromeDevTools. Learn more from @nerdy.dev : developer.chrome.com/blog/scroll-...

3438