Tiny Online Tools
Was eine Source Map wirklich enthält
Eine .map-Datei enthält nicht deinen Originalcode. Fast immer enthält sie nur eines: eine kompakte Positionstabelle — „generierte Zeile 2, Spalte 4110 stammt aus app.js Zeile 88, Spalte 12, und der Bezeichner dort hieß total". Manche Maps gehen weiter und betten auch den vollständigen Text der Originaldatei ein (sourcesContent), aber dieses Feld ist optional, und viele Produktions-Maps — darunter, wie es der Zufall will, die von jQuery selbst — werden ohne es veröffentlicht.
Dieses Werkzeug liest diese Tabelle direkt, in deinem Browser, damit du sie gegen die Realität prüfen kannst, statt der Behauptung eines Build-Tools zu vertrauen.
Was du hier tun kannst
- Eine
.map-Datei laden. Du siehst sofort jeden aufgeführten Originalquellpfad als Baum sowie eine Zählung, wie viele Zuordnungen die Map enthält. - Die zugehörige generierte
.js-Datei hinzufügen (optional, aber lohnenswert). Damit zeigt eine Zeile/Spalte-Suche auch den exakten generierten Code rund um die abgefragte Position, und ein Klick auf eine Zeile in diesem Ausschnitt füllt das Zeilenfeld automatisch aus. - Eine beliebige generierte Position nachschlagen. Zeilen sind 1-basiert, Spalten 0-basiert, exakt wie es die Source-Map-Spezifikation vorgibt — dieselbe Konvention, die Chrome DevTools und jedes JS-Tool intern verwenden. Nicht jedes Byte eines Bundles ist zugeordnet: Laufzeit-Klebecode, Modul-Wrapper-Boilerplate und Minifizierer-Ausgabe zwischen Tokens haben oft gar keine Zuordnung, und dieses Werkzeug sagt das klar, statt zu raten.
- Die Originalquelle lesen, wenn vorhanden. Klicke auf eine beliebige Datei im Baum, um ihr eingebettetes
sourcesContentzu sehen. Hat eine Quelle keinen eingebetteten Text — die Zuordnung existiert, aber nicht der Text —, erscheint ein expliziter Hinweis statt eines leeren Feldes, das so tut, als gäbe es nichts zu zeigen.
Warum das wichtig ist
Source Maps verwandeln einen Stack-Trace, der auf bundle.min.js:2:184031 zeigt, in einen, der auf src/components/Cart.jsx:41 zeigt. Wirkt diese Übersetzung falsch — ein Fehler wird an einer unsinnigen Zeile gemeldet, ein Debugger springt in die falsche Datei — ist der schnellste Weg herauszufinden, ob die Map kaputt ist oder dein mentales Modell, die Map direkt zu befragen. Genau das macht dieses Werkzeug.
Datenschutz
Beide Dateien werden vollständig im Browser verarbeitet. Nichts wird irgendwohin hochgeladen.