Jecelyn Yeen
@jec.fish
Principal Software Engineer. Ex-Googler. 👩💻🇲🇾🤿
Reposted by Jecelyn Yeen
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!
You can join remote with below invite:
gitnation.com/badges/jsnat...
Or better yet, come and join in person! Great conf and great city!
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
gitnation.com
May 1, 2025 at 11:43 AM
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!
You can join remote with below invite:
gitnation.com/badges/jsnat...
Or better yet, come and join in person! Great conf and great city!
[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...
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...
March 31, 2025 at 11:14 AM
[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...
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...
Reposted by Jecelyn Yeen
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! 🙌🏻
March 30, 2025 at 12:05 PM
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! 🙌🏻
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
March 28, 2025 at 7:59 AM
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
Reposted by Jecelyn Yeen
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!!!
- 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!!!
🎉 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-...
🔐 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-...
March 4, 2025 at 9:57 AM
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!!!
- 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!!!
🎉 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-...
🔐 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-...
March 4, 2025 at 9:15 AM
🎉 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-...
🔐 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-...
Reposted by Jecelyn Yeen
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!
Stop wasting time optimizing your front end code, if your issue is TTFB!
February 28, 2025 at 2:47 PM
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!
Stop wasting time optimizing your front end code, if your issue is TTFB!
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
#DevToolsTips #ChromeDevTools
Advanced Network Analysis with Chrome DevTools #DevToolsTips
YouTube video by Chrome for Developers
youtu.be
February 28, 2025 at 7:25 AM
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
#DevToolsTips #ChromeDevTools
⚡️ 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-...
🤖 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-...
February 10, 2025 at 6:30 AM
⚡️ 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-...
🤖 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-...
Reposted by Jecelyn Yeen
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!
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!
January 31, 2025 at 2:01 PM
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!
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!
⚡️ 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-...
🤖 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-...
January 27, 2025 at 10:09 AM
⚡️ 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-...
🤖 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-...
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.
We added a setting to let you customize that via Settings > Preferences > Match Chrome color scheme.
December 18, 2024 at 7:44 AM
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.
We added a setting to let you customize that via Settings > Preferences > Match Chrome color scheme.
Reposted by Jecelyn Yeen
The new AI features for debugging issues are super nice!
As are @jec.fish's great acting skills 😅
www.youtube.com/watch?v=kzDU...
As are @jec.fish's great acting skills 😅
www.youtube.com/watch?v=kzDU...
What’s new in DevTools: Chrome 130-132
YouTube video by Chrome for Developers
www.youtube.com
December 16, 2024 at 11:25 AM
The new AI features for debugging issues are super nice!
As are @jec.fish's great acting skills 😅
www.youtube.com/watch?v=kzDU...
As are @jec.fish's great acting skills 😅
www.youtube.com/watch?v=kzDU...
One last "What's New in DevTools" of the year! 🎉
More improvements on Network, Performance and CSS debugging! Let's go~~ https://buff.ly/3VDS8a1
@oliverdunk.com @matthiasrohmer.bsky.social #ChromeDevTools #webdev #debugging
More improvements on Network, Performance and CSS debugging! Let's go~~ https://buff.ly/3VDS8a1
@oliverdunk.com @matthiasrohmer.bsky.social #ChromeDevTools #webdev #debugging
December 13, 2024 at 7:30 AM
One last "What's New in DevTools" of the year! 🎉
More improvements on Network, Performance and CSS debugging! Let's go~~ https://buff.ly/3VDS8a1
@oliverdunk.com @matthiasrohmer.bsky.social #ChromeDevTools #webdev #debugging
More improvements on Network, Performance and CSS debugging! Let's go~~ https://buff.ly/3VDS8a1
@oliverdunk.com @matthiasrohmer.bsky.social #ChromeDevTools #webdev #debugging
Reposted by Jecelyn Yeen
Ecma just approved the 1st edition of the new "Source map format" standard, ECMA-426! 🎉
tc39.es/ecma426/2024/
tc39.es/ecma426/2024/
Source map format specification
tc39.es
December 11, 2024 at 7:01 PM
Ecma just approved the 1st edition of the new "Source map format" standard, ECMA-426! 🎉
tc39.es/ecma426/2024/
tc39.es/ecma426/2024/
Reposted by Jecelyn Yeen
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
This works in any RSC environment. In fact, this screenshot is running RSC for Parcel. h/t @devongovett.bsky.social
December 12, 2024 at 4:25 AM
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
This works in any RSC environment. In fact, this screenshot is running RSC for Parcel. h/t @devongovett.bsky.social
Reposted by Jecelyn Yeen
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...
> 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...
Spot Non-Composited Animations in Chrome DevTools
The animations track of a performance trace can now tell you why an animation was not composited.
www.bram.us
December 10, 2024 at 12:34 PM
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...
> 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...
Reposted by Jecelyn Yeen
TIL Object.assign makes DOM creation more compact:
document.body.appendChild(
Object.assign(
document.createElement('div'),
{ className: 'foo', textContent: 'Hi' }
)
);
Learn more:
document.body.appendChild(
Object.assign(
document.createElement('div'),
{ className: 'foo', textContent: 'Hi' }
)
);
Learn more:
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.
developer.mozilla.org
December 10, 2024 at 8:16 AM
TIL Object.assign makes DOM creation more compact:
document.body.appendChild(
Object.assign(
document.createElement('div'),
{ className: 'foo', textContent: 'Hi' }
)
);
Learn more:
document.body.appendChild(
Object.assign(
document.createElement('div'),
{ className: 'foo', textContent: 'Hi' }
)
);
Learn more:
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: https://buff.ly/49lv7hM
CrUX: https://buff.ly/3BcmKsq
Analyze perf: https://buff.ly/49lv7hM
CrUX: https://buff.ly/3BcmKsq
December 10, 2024 at 7:30 AM
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: https://buff.ly/49lv7hM
CrUX: https://buff.ly/3BcmKsq
Analyze perf: https://buff.ly/49lv7hM
CrUX: https://buff.ly/3BcmKsq
🥱 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
@matthiasrohmer.bsky.social #DevToolsAI #CSS #webdev #debugging
December 10, 2024 at 1:47 AM
🥱 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
@matthiasrohmer.bsky.social #DevToolsAI #CSS #webdev #debugging
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
@tunetheweb.com #DevToolsTips #webperf
December 6, 2024 at 7:47 AM
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
@tunetheweb.com #DevToolsTips #webperf
Reposted by Jecelyn Yeen
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/blog/better-...
Better Code Rendering Through Virtualization
How we rebuilt Codecov's code renderer from the ground up to be faster and more efficient, utilizing virtualization.
sentry.engineering
December 5, 2024 at 5:29 PM
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/blog/better-...
🐌 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
December 3, 2024 at 10:21 AM
🐌 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
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
#codinglife #CSS #DevToolsAI @matthiasrohmer.bsky.social
December 2, 2024 at 5:00 PM
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
#codinglife #CSS #DevToolsAI @matthiasrohmer.bsky.social
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/M5oe010pYbA?...
It's so good to be able to post links directly on bluesky! @tunetheweb.com #chromedevtools #webperf #debugging
Monitor live Core Web Vitals in Chrome DevTools #DevToolsTips
YouTube video by Chrome for Developers
youtu.be
November 29, 2024 at 9:40 AM
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/M5oe010pYbA?...
It's so good to be able to post links directly on bluesky! @tunetheweb.com #chromedevtools #webperf #debugging