Changelog 33: Promoting the 🦄

We updated Print Statement fixes so you can add a 🦄 with a single click. We also highlighted how to debug issues in Hydrogen, Shopify’s new react-based framework for building custom storefronts.
profile photo
Jason Laster
We’re updating Print Statement Prefixes so that you can add a 🦄 with a single click! (video)
Print Statement Prefixes help with two common use cases
  • 🟣 🟡 🟠 help you pattern match a wall of console logs
  • 🦄 help you find a needle in a haystack of console logs
We’d love to hear what you think. What are your favorite print statement debugging tricks?


Here’s a deep dive of some of the interaction details that went into the 🦄.

Fast and Correct

On the frontend, we are wrapping up Soft Focus (write up). We are also exploring larger architectural changes (discussionrtk query)
On the backend, we’re now parsing JS files with V8 which is 100X faster than Babel. (pretty printing)

Additional Updates

Network Monitor It is now possible to comment on network requests and response bodies (video)
Image without caption
Unicorn Picker It is now possible to add a prefix directly to a Console log.
Image without caption

Replay Story

We thought it would be fun to highlight Hydrogen, Shopify’s new framework for building custom storefronts.
This video shows how the Gallery component rendered ten times. Here’s the original replay, if you have a couple of minutes, we’d love to hear what was causing the ten renders.
Image without caption
Related posts
post image
Today we’re excited to share the new time travel aware Full Text Search. The next time you search, you’ll notice that we’ve dimmed out the results which were not executed.
post image
Today we’re excited to share our new Elements Panel. The next time you open a replay and inspect an element you’ll feel the difference.
post image
We’re excited to share an experimental version of Redux DevTools today. If you open a Chrome replay, you’ll see the Redux tab in the bottom right.
Powered by Notaku