Files, Binary & Compression

Source Map analysierenund minifizierten Code zurückverfolgen

Eine .map-Datei (oder eine JS-Datei mit Inline-Map) einfügen, dann Zeile:Spalte eingeben oder einen ganzen Stacktrace – schon erscheinen Originaldatei, Zeile und Code.

Automatisch parsenBeispiel:

Source Map

{
  "version": 3,
  "sources": [
    "webpack://shop/./src/format.ts",
    "webpack://shop/./src/cart.ts",
    "webpack://shop/./src/main.ts"
  ],
  "sourcesContent": [
    "export function formatPrice(value: number): string {\n  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);\n}\n",
    "import { formatPrice } from './format';\n\nexport interface LineItem {\n  sku: string;\n  price: number;\n  quantity: number;\n}\n\nexport function cartTotal(items: LineItem[]): string {\n  const sum = items.reduce((acc, item) => acc + item.price * item.quantity, 0);\n  const discount = items[0].coupon.percent / 100;\n  return formatPrice(sum * (1 - discount));\n}\n",
    "import { cartTotal } from './cart';\n\nconst cart = JSON.parse(localStorage.getItem('cart') ?? '[]');\ndocument.querySelector('#total')!.textContent = cartTotal(cart);\n"
  ],
  "mappings": "MAAO,SAASA,EAAYC,EAAuB,CACjD,OAAO,IAAI,KAAK,aAAa,QAAS,CAAE,MAAO,WAAY,SAAU,KAAM,CAAC,EAAE,OAAOA,CAAK,CAC5F,CCMO,SAASC,EAAUC,EAA2B,CACnD,IAAMC,EAAMD,EAAM,OAAO,CAACE,EAAKC,IAASD,EAAMC,EAAK,MAAQA,EAAK,SAAU,CAAC,EACrEC,EAAWJ,EAAM,CAAC,EAAE,OAAO,QAAU,IAC3C,OAAOK,EAAYJ,GAAO,EAAIG,EAAS,CACzC,CCVA,IAAME,EAAO,KAAK,MAAM,aAAa,QAAQ,MAAM,GAAK,IAAI,EAC5D,SAAS,cAAc,QAAQ,EAAG,YAAcC,EAAUD,CAAI",
  "names": [
    "formatPrice",
    "value",
    "cartTotal",
    "items",
    "sum",
    "acc",
    "item",
    "discount",
    "formatPrice",
    "cart",
    "cartTotal"
  ],
  "file": "app.js"
}

Generierte Positionen (Zeile:Spalte oder Stacktrace)

Wird in diesem Tab geparst. Entfernte Quellen und externe sourceMappingURL-Links werden nie abgerufen.

Ergebnis

ZuordnungQuellenMappings

Eingabe geändert – wird automatisch geparst …

Spalten ab 1 zählen

Der Fehlerbericht aus der Produktion nennt nur app.3f2a.js:1:20931 – Zeile eins, Spalte zwanzigtausend eines minifizierten Bundles. Die .map-Datei aus demselben Build weiß genau, welche Zeile in welcher .ts- oder .jsx-Datei das war, aber ihre mappings sind Base64-VLQ-kodiert und für Menschen nicht lesbar. Mit diesem Werkzeug können Sie jede Source Map analysieren und die Stelle nachschlagen, ohne für einen einzigen Fehler ein Skript mit der source-map-Bibliothek zu schreiben.

Praktisch ist das, wenn das Error-Tracking keine Maps hochgeladen hat, wenn nur die Build-Artefakte aus der CI vorliegen oder wenn Sie prüfen wollen, ob eine Map wirklich zum ausgelieferten Bundle passt. Als Source Map Decoder zeigt es außerdem die Datei selbst: welche sources aufgeführt sind, welche sourcesContent mitbringen, welche auf der ignoreList stehen und ob der mappings-String gültig ist. Anders als Dienste, die die Map auf einem Server auslesen, wird nichts hochgeladen und keine entfernte URL abgerufen.

Warum Sie die Source Map analysieren sollten, statt zu raten

Sie wollen wissen, welche Originalzeile es war – für alle Frames auf einmal, mit dem Hinweis, wann die Antwort nur ungefähr ist.

Den ganzen Stacktrace einfügen, nicht Position für Position

Jede Zeile, die auf :Zeile:Spalte endet, wird in der Map nachgeschlagen: Originaldatei, Zeile, Spalte, der ursprüngliche Bezeichner und ein paar Zeilen Code drumherum. Frames aus einer anderen Datei als der in der Map genannten werden markiert, damit ein Frame aus dem Vendor-Bundle nicht stillschweigend mit der Map Ihrer App aufgelöst wird.

Regeln der Zuordnung lesen

Links ein minifizierter Stacktrace, rechts jeder Frame aufgelöst zu einer TypeScript-Originaldatei mit Zeile und hervorgehobener Codezeile.

Sehen und zurückholen, welche Quellen die Map enthält

Die Ansicht „Quellen“ listet jeden Eintrag aus sources mit angewandtem sourceRoot, markiert, welche sourcesContent haben und welche auf der ignoreList stehen, und zeigt den eingebetteten Code mit Zeilennummern. Eine Datei lässt sich einzeln speichern, alle eingebetteten Quellen als ZIP mit Ordnerstruktur – hilfreich, wenn die Map die letzte Kopie des Originalcodes ist.

Im Werkzeug ausprobieren

Liste der Quelldateien aus einer Map, einige als ohne Inhalt markiert, daneben eine wiederhergestellte TypeScript-Datei mit Zeilennummern und ein ZIP-Download-Knopf.

Drei Punkte, damit die Zuordnung stimmt

Die Map in jeder vorhandenen Form übergeben

Das .map-JSON einfügen, die Datei öffnen oder hineinziehen, oder direkt die gebaute JS- oder CSS-Datei einfügen: Endet sie mit einem //# sourceMappingURL=data:…-Kommentar, wird die Inline-Map ausgelesen und dekodiert (Base64 und URL-Kodierung). Zeigt der Kommentar auf eine normale URL, wird sie nur genannt, nicht abgerufen – öffnen Sie diese .map-Datei dann direkt.

Die Anti-XSSI-Zeile )]}' am Anfang und ein UTF-8-BOM werden automatisch entfernt, Maps aus einer Server-Antwort lassen sich also unverändert einfügen.

Prüfen, ab welcher Zahl die Spalten zählen

Positionen dürfen als 12:345, als „12 345“ oder als ganzer Frame wie at n (https://example.com/app.js:1:177) kommen. Spalten zählen standardmäßig ab 1, weil Chrome, Firefox und Node sie so ausgeben. Stammt die Spalte aus der mozilla/source-map-Bibliothek oder einem anderen 0-basierten Feld, schalten Sie „Spalten ab 1 zählen“ aus – sonst liegt jedes Ergebnis ein Zeichen daneben.

Zeilen ohne Zeile:Spalte, etwa die Fehlermeldung am Anfang eines Stacktraces, werden übersprungen und gezählt, statt die Abfrage scheitern zu lassen.

Die Trefferart prüfen, dann in die Gegenrichtung gehen

Ein exakter Treffer bedeutet, dass an genau dieser Spalte ein Segment beginnt; sonst wird das nächste Segment links davon genommen und das Ergebnis so gekennzeichnet – dieselbe Regel wie im Browser und in der source-map-Bibliothek. „In Quellen öffnen“ springt zur Originalzeile; dort listet das Feld „Originalzeile“ alle generierten Positionen, die auf diese Zeile zeigen.

Ist das automatische Parsen aus, startet Strg/Cmd+Enter Parsen und Abfrage von überall im Panel.

Was der Decoder zerlegt

Jedes Mapping-Segment dekodiert

Die Ansicht „Mappings“ macht aus dem VLQ-String Zeilen der Form generierte Zeile:Spalte → Quelle, Originalzeile:Spalte und Name, je 100 auf einmal, und exportiert die ganze Tabelle als TSV für Tabellenkalkulation oder Diff.

Von der Originalzeile zurück zum generierten Code

Quelle und Originalzeile wählen und alle generierten Positionen sehen, die darauf zeigen – nützlich, um zu prüfen, ob eine Zeile inline eingesetzt, dupliziert oder vom Minifier ganz entfernt wurde.

Inline-, Index- und ignoreList-Maps

Inline-data:-URLs, Index-Maps mit sections und offset, das Zusammensetzen mit sourceRoot sowie ignoreList und das ältere x_google_ignoreList werden verstanden, sodass sich Framework-Dateien von Ihren eigenen trennen lassen.

Fehler, die auf das kaputte Segment zeigen

Ungültiges JSON wird mit Zeile und Spalte gemeldet; ein falsches VLQ-Zeichen, ein Segment mit falscher Feldzahl oder ein Quell- bzw. Namensindex außerhalb des Bereichs nennt generierte Zeile und Segment.

Was es tut und was nicht

Nichts wird abgerufen: Externe sourceMappingURL-Links, http(s)-Einträge in sources und Index-Abschnitte mit URL werden angezeigt, aber nie angefragt. Map, enthaltene Quellen und Ihr Stacktrace bleiben in diesem Tab und landen weder in der URL noch im lokalen Speicher.
Nur Version 3, bis 50 MB: Akzeptiert wird nur Source Map v3; Version 2 oder Dateien ohne Version werden mit einer Meldung abgelehnt. Eingaben über 50 MB werden verweigert, sehr große Maps können die Seite beim Dekodieren kurz anhalten.
Abfragen rasten nach links ein, nie nach rechts: Beginnt an einer Spalte kein Segment, nimmt das Ergebnis das nächste davor und wird als ungefähr markiert. Liegt die Spalte in vom Bundler erzeugtem Hilfscode, meldet das Werkzeug ein Segment ohne Originalposition, statt eine Stelle in der Nähe zu raten.
Ohne sourcesContent kein Code: Wurde die Map ohne sourcesContent gebaut, liefern Abfragen weiterhin Pfad und Position, aber keinen Ausschnitt, keine Vorschau und keinen ZIP-Eintrag – der Originaltext steht schlicht nicht in der Datei.
Eine Map pro Abfrage: Jede Map beschreibt nur ihr eigenes Bundle. Frames aus anderen Dateien werden markiert, aber trotzdem nachgeschlagen – prüfen Sie den Hinweis, bevor Sie dem Ergebnis trauen. Eine farbige Visualisierung aller Segmente, Bearbeiten oder Zusammenführen von Maps gehören nicht dazu.

Häufige Fragen, wenn Sie eine Source Map analysieren

Wie nutzt man Source Maps?

Im Alltag lädt der Browser sie automatisch, sobald die DevTools offen sind und das Bundle per sourceMappingURL auf die Map verweist. Für Fehler aus der Produktion, bei denen das nicht klappt, können Sie hier die Source Map analysieren: Map einfügen, Stacktrace dazu, und jede Position wird der Originaldatei und -zeile zugeordnet.

Was sind Source Maps und wie funktionieren sie?

Eine Source Map ist eine JSON-Datei, die jede Stelle im gebauten Code einer Stelle im Quellcode zuordnet. Die Liste der Originaldateien steht in sources, die Zuordnungen stehen im mappings-String: Zeilen durch Semikolon getrennt, Segmente durch Komma, jedes Segment als Base64-VLQ-Differenzen kodiert. Die Ansicht „Mappings“ zeigt diese Zuordnungen als Tabelle.

Wie finde ich zu Zeile und Spalte im minifizierten Code die Originalzeile?

Zeile:Spalte oder den ganzen Stacktrace in das Positionsfeld eintragen. Spalten zählen standardmäßig ab 1 wie in Browser-Stacktraces. Beginnt an der Spalte kein Segment, wird das nächste links davon genommen und als ungefähr gekennzeichnet – so sehen Sie, wie belastbar die Antwort ist.

Source Maps in Produktion ausliefern – sinnvoll oder Sicherheitsrisiko?

Eine öffentlich abrufbare Map mit sourcesContent macht Ihren Originalcode samt Kommentaren für alle lesbar. Viele Teams laden Maps deshalb nur beim Error-Tracking hoch oder liefern sie hinter einer Authentifizierung aus. Das Prüfen hier erhöht das Risiko nicht: Alles läuft lokal im Browser, nichts wird übertragen.

Kann man mit einer Source Map den Quellcode wiederherstellen?

Ja, wenn die Map sourcesContent enthält – dort steht der vollständige Originaltext jeder Datei. In der Ansicht „Quellen“ lässt sich jede Datei lesen und speichern oder alle zusammen als ZIP mit Ordnerstruktur. Ohne sourcesContent enthält die Map nur Pfade und Positionen, der Code ist daraus nicht zu gewinnen.

Frage nicht beantwortet?

Jetzt die Source Map analysieren

Die .map-Datei aus dem letzten Build hineinziehen, den Stacktrace aus dem Fehlerbericht einfügen – so können Sie jede Source Map analysieren und sehen in Sekunden die Originalzeile, ganz wie mit einem Source Map Viewer.

Zurück zum Werkzeug Alle Werkzeuge ansehen

Alles läuft lokal in Ihrem Browser.

Source Map analysierenund minifizierten Code zurückverfolgen