Jecelyn Yeen's Avatar

Jecelyn Yeen

@jec.fish

Principal Software Engineer. Ex-Googler. πŸ‘©β€πŸ’»πŸ‡²πŸ‡ΎπŸ€Ώ

2,059
Followers
83
Following
33
Posts
02.06.2023
Joined
Posts Following

Latest posts by Jecelyn Yeen @jec.fish

Preview
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

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!

01.05.2025 11:43 πŸ‘ 16 πŸ” 4 πŸ’¬ 1 πŸ“Œ 0

Not that I can immediately recall. The link you have definitely is a right place to fill feature requests!

14.04.2025 23:02 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
😏Try debug the YouTube search dropdown then you know how this setting can help!
😏Try debug the YouTube search dropdown then you know how this setting can help! YouTube video by Jecelyn Yeen 🐟

There’s a shortcut for that! It’s under the :hov menu in the Styles tab.

youtu.be/LS4_RZv-vYw?...

12.04.2025 14:13 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

What you did matters, many of us learn from you and your awesome demos, we web devs also benefit from your works on CSS specs.

You are awesome, Adam. Sending loves. πŸ₯Ή

Google sucks. 😑

11.04.2025 22:28 πŸ‘ 5 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Post image

[3/3] ... is all about family.

Thank you, Google, for the memories and experiences. Also the cute farewell pillow πŸ˜†.

So long, and thanks for all the fish! On to the next adventure after a well-deserved break. 🀩

31.03.2025 11:14 πŸ‘ 34 πŸ” 0 πŸ’¬ 7 πŸ“Œ 0

[2/3] ...bring to life features I’ve always wanted. I’m particularly proud of the work I did on HTTP response mocking/overriding and improving the overall mocking workflow.

This decision to move back wasn’t an easy one. While coming to Germany was a career move, returning to Malaysia is... πŸ™‚

31.03.2025 11:14 πŸ‘ 14 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Video thumbnail

[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...

31.03.2025 11:14 πŸ‘ 90 πŸ” 2 πŸ’¬ 12 πŸ“Œ 0
Add a logpoint in devtools to log runtime values without adding console.log() or debugger in code.

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

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! πŸ™ŒπŸ»

30.03.2025 12:05 πŸ‘ 6 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0
Video thumbnail

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

28.03.2025 07:58 πŸ‘ 15 πŸ” 3 πŸ’¬ 1 πŸ“Œ 1

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!!!

04.03.2025 09:57 πŸ‘ 23 πŸ” 8 πŸ’¬ 1 πŸ“Œ 0
Post image

πŸŽ‰ 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-...

04.03.2025 09:15 πŸ‘ 24 πŸ” 5 πŸ’¬ 3 πŸ“Œ 2
LCP by phase insight in DevTools Performance panel, now with both lab LCP subparts AND field LCP subparts.

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

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!

28.02.2025 14:47 πŸ‘ 22 πŸ” 6 πŸ’¬ 2 πŸ“Œ 0
Advanced Network Analysis with Chrome DevTools #DevToolsTips
Advanced Network Analysis with Chrome DevTools #DevToolsTips YouTube video by Chrome for Developers

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

28.02.2025 07:25 πŸ‘ 19 πŸ” 7 πŸ’¬ 0 πŸ“Œ 1
Post image

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

10.02.2025 06:30 πŸ‘ 11 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0

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!

31.01.2025 14:01 πŸ‘ 10 πŸ” 4 πŸ’¬ 2 πŸ“Œ 0
Post image

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

27.01.2025 10:09 πŸ‘ 11 πŸ” 3 πŸ’¬ 0 πŸ“Œ 0
Video thumbnail

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.

18.12.2024 07:44 πŸ‘ 11 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0

Let's gooooo~ πŸ¦ΈπŸ½β€β™‚οΈ

17.12.2024 07:42 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
What’s new in DevTools: Chrome 130-132
What’s new in DevTools: Chrome 130-132 YouTube video by Chrome for Developers

The new AI features for debugging issues are super nice!

As are @jec.fish's great acting skills πŸ˜…
www.youtube.com/watch?v=kzDU...

16.12.2024 11:25 πŸ‘ 7 πŸ” 2 πŸ’¬ 1 πŸ“Œ 0
What’s new in DevTools: Chrome 130-132
What’s new in DevTools: Chrome 130-132 YouTube video by Chrome for Developers

I can hear @matthiasrohmer.bsky.social whispering: No, check out those AI ones πŸ˜†

6:09 in the video: youtu.be/kzDUe-f4gac?...

13.12.2024 11:37 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Video thumbnail

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

13.12.2024 07:30 πŸ‘ 8 πŸ” 0 πŸ’¬ 0 πŸ“Œ 1
Source map format specification

Ecma just approved the 1st edition of the new "Source map format" standard, ECMA-426! πŸŽ‰

tc39.es/ecma426/2024/

11.12.2024 19:01 πŸ‘ 160 πŸ” 47 πŸ’¬ 2 πŸ“Œ 5
Screenshot showing the Chrome DevTools Performance tab with RSC integration.

Screenshot showing the Chrome DevTools Performance tab with RSC integration.

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

12.12.2024 04:25 πŸ‘ 190 πŸ” 23 πŸ’¬ 3 πŸ“Œ 2
Preview
Spot Non-Composited Animations in Chrome DevTools The animations track of a performance trace can now tell you why an animation was not composited.

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

10.12.2024 12:34 πŸ‘ 24 πŸ” 6 πŸ’¬ 0 πŸ“Œ 2
Preview
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.

TIL Object.assign makes DOM creation more compact:

document.body.appendChild(
Object.assign(
document.createElement('div'),
{ className: 'foo', textContent: 'Hi' }
)
);

Learn more:

10.12.2024 08:15 πŸ‘ 47 πŸ” 9 πŸ’¬ 1 πŸ“Œ 1
Video thumbnail

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

10.12.2024 07:30 πŸ‘ 4 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0
Post image

πŸ₯± 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

10.12.2024 01:47 πŸ‘ 3 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0

Haha +2 more!

BRM - Bouncy Rendering Madness
How bouncy is your animations?

PKL - Page Kidding Latency
So much delays, are you kidding!?

06.12.2024 13:56 πŸ‘ 0 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0
Video thumbnail

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

06.12.2024 07:47 πŸ‘ 28 πŸ” 8 πŸ’¬ 1 πŸ“Œ 0
Preview
Better Code Rendering Through Virtualization How we rebuilt Codecov's code renderer from the ground up to be faster and more efficient, utilizing virtualization.

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

05.12.2024 17:29 πŸ‘ 27 πŸ” 4 πŸ’¬ 3 πŸ“Œ 1