Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Source Map VisualizationNew to Visual Studio Code? Get it now.

Source Map Visualization

Colder

|
701 installs
| (1) | Free
A simple visualization of source map data
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Source Map Visualization VS Code

Visual Studio Marketplace Version

This is a visualization of JavaScript/CSS source map data, which is useful for debugging problems with generated source maps. It's designed to be high-performance so it doesn't fall over with huge source maps.

Usage

Right clicks on the minify code. Select Source Map Visualization in the context menu.

Or press ⌘ ⇧ P in the vscode and type Source Map Visualization.

Supported source map:

  1. Inline base64 source map. //# sourceMappingURL=data:application/json;base64,
  2. External source map url. //# sourceMappingURL=index.js.map
  3. Sibling code and source map. index.js and index.js.map.
  4. Guess possible source map. index.js and index.map.

Demo

Tips

You can select partial code in the editor. This is useful when you want to visualize the source map of a specific <script> tag in html.

You can copy and paste the code to the existed Source Map Visualization panel.

Features

  • 🚀 Excellent performance.
  • 💞 Beauty block highlight and connection animation.
  • 🗞 Parse inline source map url.
  • 🔗 Load external source map file.
  • 🪄 Allow code partial selection. e.g. <script> tag in html.
  • 🎯 Goto line and column.

Development

CI Release

pnpm i

Open VS Code Run and Debug panel, select Extension to start debugging.

Thanks

evanw/source-map-visualization

License

MIT License © 2022 Colder

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft