cncolder / vscode-source-map-visualization Goto Github PK

View Code? Open in Web Editor NEW

14.0 1.0 2.0 3.65 MB

A visualization of JavaScript/CSS source map data for VS Code

Home Page: https://marketplace.visualstudio.com/items?itemName=colder.source-map-visualization

License: MIT License

TypeScript 9.05% JavaScript 84.00% HTML 3.02% CSS 3.93%

sourcemap sourcemaps visualization vscode vscode-extension

vscode-source-map-visualization's Introduction

Source Map Visualization ^{VS Code}

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:

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

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

pnpm i

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

Release

pnpm release

This script will bump the version, build the extension, and publish it to the vs code marketplace. And then draft a new release on github.

Thanks

evanw/source-map-visualization

License

vscode-source-map-visualization's People

Contributors

Stargazers

Watchers

Forkers

thertzlor jhandley

vscode-source-map-visualization's Issues

How to just view the embedded source?

Hi!

It is my understanding, that source maps were invented to address the problem with minimized/obfuscated code which is almost impossible to read. However, for some peculiar reason, the most popular editor for JS - VSCode - cannot show the original code being referenced by source maps.

I've finished my research on appropriate extensions for this. And this one seems to do the thing, in comparison to the others, that also have "source map" in their titles but doing some random rubbish instead of just showing the code.

I think this extension was created to debug source map creation, and that is a good thing to do.
However, I would like to just view the source, w/o any colorification, especially this insane one :)

So is there a way to view the original file?

Extension is not working with a blank page

Type: Bug

The page of this extension is blank after I click "Source Map Visualization".

VSCode devtools doesn't report any errors. VSCode process monitor shows 0% CPU usage of this extension and so does the system's one.

Extension version: 2.1.4
VS Code version: Code 1.76.2 (ee2b180d582a7f601fa6ecfdad8d9fd269ab1884, 2023-03-14T17:55:54.936Z)
OS version: Windows_NT x64 10.0.19045
Modes:
Sandboxed: No

System Info

Item	Value
CPUs	AMD Ryzen 9 5900X 12-Core Processor (24 x 3693)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	undefined
Memory (System)	31.92GB (22.25GB free)
Process Argv	C:\Tanimodori\REPRO\test-vite --crash-reporter-id 955eead6-045d-406b-92e1-7ed24cb4fcee
Screen Reader	no
VM	0%

A/B Experiments

vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdc:30486549
c4g48928:30535728
dsvsc012:30540252
pynewext54:30695312
azure-dev_surveyone:30548225
pyindex848:30662994
nodejswelcome1:30587005
2e4cg342:30602488
pyind779:30671433
f6dab269:30613381
vscrp:30673768
pythonsymbol12:30671437
vsccsb:30677849
pythonb192:30669360
functionswalk:30687959
pythonms35:30686772

remove menu item on output panel

Feature Request: Try to use original file(s) if `sourcesContent` is unavailable

Hi, we strip sourcesContent from our source maps to reduce bloat and prevent accidentally leaking our unminified source code. Unfortunately when I try to visualize such a source map with this extension, it looks something like this:

The offsets are correct, but the text is missing. Could you try to read the original file(s) if sourcesContent is unavailable? Of course, if they are missing then there isn't much you can do, but in my case the files are accessible.