// the find
sokra/source-map-visualization
Just a simple hacky visualisation of SourceMaps
A browser-based tool from Webpack's creator that lets you drag-drop a source map and visually see how generated code tokens map back to original source. Built as a quick debugging aid, not a polished product — the README literally calls it 'hacky'.
Created by sokra (Tobias Koppers), so it understands source maps correctly at a low level. The visual token-to-source mapping approach is genuinely useful for diagnosing broken source maps that look syntactically valid but point to wrong locations. Ships with real examples for Babel, TypeScript, CoffeeScript, and Sass so you can compare expected behavior immediately. No server required — static page you can run locally.
Dead since 2021 and the build toolchain (Jade templates, old webpack config, bootstrap vendored directly in the repo) has rotted badly — getting it to actually run locally will take time. No support for modern source map features like `ignoreList` or scope-level mappings introduced since ES2022. The UI is minimal to the point of being hard to use for large bundles with thousands of mappings. Better maintained alternatives exist now (e.g., source-map-explorer for bundle analysis, Chrome DevTools for live debugging).