Quellkartengenerator

• Generierung von Source Map v3: Generieren Sie Standard-Source Map v3-Dateien aus Ihrem ursprünglichen und minimierten JavaScript-Code. Erzeugt gültige VLQ-codierte Zuordnungen, Quelldateiverweise, Namensarrays und optionalen Quellinhalt für eine vollständige Quellrekonstruktion. Kompatibel mit Browsern, Bundlern und Debugging-Tools.
• 100 % browserlokale Verarbeitung: Die gesamte Generierung der Quellkarten erfolgt vollständig in Ihrem Browser. Ihr ursprünglicher Quellcode und das minimierte JavaScript verlassen niemals Ihr Gerät. Keine Uploads auf einen Server, keine Anmeldung erforderlich und keine Nutzungsbeschränkungen. Für immer völlig kostenlos.
• Detaillierte Mapping-Vorschau: Sehen Sie sich eine vollständige Mapping-Tabelle an, die jede generierte Position und die entsprechende Originaldatei, -zeile und -spalte zeigt. Erkunden Sie die JSON-Rohquellkarte, überprüfen Sie die dekodierten VLQ-Segmente und überprüfen Sie die Zuordnungsgenauigkeit, bevor Sie sie herunterladen oder kopieren.
• Sofortige Generierung mit Statistiken: Quellkarten werden in Echtzeit generiert, während Sie Code eingeben oder einfügen. Sehen Sie sofort, wie viele Zuordnungen erstellt wurden, wie groß die Quellzuordnungsdatei ist, wie hoch das Komprimierungsverhältnis ist und wie viele Quelldateien und benannte Bezeichner vorhanden sind. Kopieren oder laden Sie die generierte .map-Datei mit einem Klick herunter.

• Debuggen von verschleiertem Produktionscode: Generieren Sie Quellzuordnungen für Ihre verschleierten JavaScript-Bundles, damit Sie Produktionsprobleme mit Originalvariablennamen, Dateistruktur und Kommentaren debuggen können. Verbinden Sie die Quellkarte mit Ihrem Fehlerüberwachungstool (Sentry, Datadog, New Relic), um lesbare Stack-Traces von minimierten Produktionsfehlern zu erhalten.
• Integration der Verschleierungspipeline: Wenn Sie JS-Verschleierung (Variablenumbenennung, String-Codierung, Reduzierung des Kontrollflusses) als Teil Ihrer Build-Pipeline anwenden, generieren Sie Quellzuordnungen, die die verschleierte Ausgabe wieder dem vorverschleierten Code zuordnen. Dies ermöglicht das Debuggen mit lesbarem Code beim Versand von geschütztem JavaScript.
• Browser-DevTools-Debugging: Hängen Sie generierte Quellkarten an Ihre bereitgestellten JavaScript-Bundles an, damit Chrome DevTools, Firefox Developer Tools und Safari Web Inspector den Originalquellcode im Quellenfenster anzeigen können. Legen Sie Haltepunkte fest, überprüfen Sie Variablen und gehen Sie Ihren Originalcode schrittweise durch, selbst wenn der Browser minimiertes JavaScript ausführt.
• CI/CD-Quellkartenartefakte: Generieren Sie Quellkarten während Ihrer CI/CD-Pipeline und laden Sie sie in Ihren Fehlerverfolgungsdienst hoch, ohne sie Endbenutzern zugänglich zu machen. Das Tool hilft Ihnen, das Quellkartenformat zu verstehen und Ihre Generierungspipeline zu testen, bevor Sie es in Ihre Build-Tools integrieren.
• Bildung und Forschung im Source Map-Format: Verstehen Sie, wie Source Map v3 funktioniert, indem Sie VLQ-codierte Zuordnungen sehen, die in Echtzeit aus Ihrem eigenen Code generiert werden. Das Tool eignet sich hervorragend zum Erlernen des Quellkartenformats, der VLQ-Kodierung, der Zeilen-/Spaltenzuordnungen und der Art und Weise, wie Namen und Quellen referenziert werden.
• Manuelle Stack-Trace-Entschleierung: Wenn Sie über einen verschleierten/minimierten Produktions-Stack-Trace verfügen, aber Ihre Quellzuordnungen verloren haben, rekonstruieren Sie die Zuordnung manuell, indem Sie Ihren ursprünglichen und minimierten Code einfügen. Die generierte Quellkarte kann mit dem Source Map Unminifier verwendet werden, um die genauen ursprünglichen Codepositionen wiederherzustellen.

Eine Quellzuordnung ist eine Datei, die transformierten, minimierten oder verschleierten Code wieder seiner ursprünglichen Quelle zuordnet. Das Source Map v3-Format verwendet die Base64-VLQ-Codierung (Variable Length Quantity), um Positionszuordnungen kompakt zu speichern. Jede Zuordnung zeichnet die generierte Zeile/Spalte und die entsprechende Originaldatei, Zeile und Spalte sowie einen optionalen Bezeichnernamen auf. Wenn ein Browser oder Debugger eine Quellzuordnung neben minimiertem Code lädt, kann er den ursprünglichen Quellcode mit korrekten Variablennamen, Dateiorganisation und Kommentaren anzeigen – wodurch das Debuggen von Produktionscode möglich wird.

1. Originalcode eingeben: Fügen Sie Ihren ursprünglichen, lesbaren JavaScript-Quellcode in das linke Feld ein. Dies ist die Version vor der Minimierung/Verschleierung, aus der Sie eine Zuordnung erstellen möchten.
2. Geben Sie minimierten/verschleierten Code ein: Fügen Sie Ihren minimierten oder verschleierten JavaScript-Code in das rechte Feld ein. Der Generator vergleicht jede Zeile und jede Zeichenposition, um genaue Zuordnungen zwischen den beiden Versionen zu erstellen.
3. Quellkartengenerierung: Das Tool generiert eine gültige Quellkarten-v3-JSON-Datei, die VLQ-codierte Zuordnungen, eine Quelldateiliste, ein Namensarray für Bezeichner und optional den vollständigen ursprünglichen Quellinhalt (sourcesContent) für eine vollständige Rekonstruktion enthält. Sie können das JSON kopieren oder als .map-Datei herunterladen.

• Version: Das Quellkartenformat ist derzeit Version 3, definiert durch die Quellkartenspezifikation. Das Versionsfeld ist immer 3 .
• Zuordnungen: Das Zuordnungsfeld enthält VLQ-codierte Zeichenfolgen, die durch Semikolons (für Zeilenumbrüche) und Kommas (für einzelne Segmente innerhalb einer Zeile) getrennt sind. Jedes Segment kodiert bis zu 5 Werte: generierte Spalte, Quellindex, Originalzeile, Originalspalte und Namensindex – alle werden zur optimalen Komprimierung als relative Offsets gespeichert.
• Quellen: Ein Array der ursprünglichen Quelldateipfade, auf die in den Zuordnungen durch den Index verwiesen wird. Sie können benutzerdefinierte Quelldateinamen für Ihre Projektstruktur angeben.
• Namen: Ein Array von Bezeichnernamen (Variablennamen, Funktionsnamen usw.), die sowohl im ursprünglichen als auch im generierten Code vorkommen und in den Zuordnungen durch einen Index referenziert werden.
• Quelleninhalt: Ein optionales Array, das den vollständigen Originalquellcode für jede Quelldatei enthält. Sofern vorhanden, können Debugger den exakten Originalcode anzeigen, ohne dass Zugriff auf die Originaldateien auf der Festplatte erforderlich ist.
• VLQ-Kodierung: Base64-VLQ ist eine kompakte Kodierung mit variabler Länge, bei der jedes Zeichen 6 Bits (0-63) darstellt. Das Fortsetzungsbit (Bit 6) signalisiert, ob weitere Zeichen für den gleichen Wert folgen. Das Vorzeichen wird als niedrigstwertiges Bit codiert (1 = negativ, 0 = positiv), was negative Offsets in relativen Zuordnungen ermöglicht.

Ihr JavaScript-Code wird vollständig in Ihrem Browser verarbeitet. Es wird niemals Code auf einen Server hochgeladen, gespeichert, protokolliert oder an Dritte weitergegeben. Das Tool erfordert keine Kontoerstellung, keine Anmeldung und legt keine Codegrößenbeschränkungen fest. Es ist völlig kostenlos, ohne Premium-Stufen, Nutzungsbeschränkungen oder versteckte Gebühren. Sie können es so oft wie nötig zum Generieren von Quellkarten, zum Debuggen oder für Bildungszwecke verwenden.