Changelog 18: Source Map Visualization 🔍

We shipped Source Map Visualizations (thanks Evan Wallace). We shared a case study of using replay to fix an issue in Excalidraw.
profile photo
Jason Laster
Image without caption
We’re shipping Source Map Visualizations today! You can now go to DevTools, find a source, and view its source mappings.
The Source Map Visualization is useful for seeing how original and generated sources map to each other. The visualization can help trace issues in minified code back to the original code. The visualization can also help identify issues with breakpoints or minified variables in DevTools.
Source maps have historically been DevTools dark magic: powerful but poorly understood. They have been difficult to get started with and impossible to collaborate on. Yet, they are an integral part of modern web development and an area where replays could really help. Now, when you see an issue in a source map, you can now share the replay with others, and they will be able to see it and fix it.
None of this would be possible without Evan Wallace building the Source Map Visualization in the first place. If you have five minutes, we highly recommend checking out this replay to see how the visualization is drawn to the canvas!
This week we’d love to hear what Source Map features you would like to see next and what you’re top Source Map issues are.

Additional updates

Trimming We’re adding the ability to trim replay recordings to a smaller window of time. Feel free to enable the experimental feature and let us know what you think.
Dark Mode We started working on Dark Mode last week to provide a higher contrast environment. It’s still early, but feel free to enable it in DevTools.
Elements Panel IFrame children will now appear more consistently.
React DevTools DevTools is now more stable and will be re-enabled today.

Case Study

This week we thought it would be fun to call out a fun Excalidraw issue that was fixed last week. Previously, if you were resizing an element and accidentally set its width to 0, the dimensions would lock up and be no longer resizable. Check out this replay to see where resizingElement is dividing by boundsNewWidth which is set to 0.
Image without caption
Related posts
post image
We’re thrilled to share our progress on Performance Analysis: the first practical way to catch performance regressions before they ship to prod.
post image
We’re thrilled to share that we’ve officially migrated from Firefox to Chrome. It’s been a long time coming, but Chrome is better in every way.
post image
This week we’re excited to share Elements Panel V3, which brings one second element loads.
Powered by Notaku