VoriTools

Source-Map-Explorer

Fügen Sie das Source-Map-JSON ein und suchen Sie eine Stelle im generierten Code. Das Ergebnis nennt Quelldatei, Zeile und Spalte der Zuordnung.

Läuft lokal in deinem Browser
Kategorie ansehen: Code & Debugging (34)
Dieses Werkzeug verarbeitet alle Daten lokal in deinem Browser.
Source-Map-JSONFügen Sie eine Standard-v3-Source-Map ein. Suchen Sie generierte Zeile und Spalte, ohne Quelldateien hochzuladen.
Quellen
Suchen





Wie Sie eine generierte Position in einer Source Map suchen
Fügen Sie eine Source Map der Version 3 ein und drücken Sie Lokal analysieren. Die mappings-Zeichenkette wird im Browser mit Base64-VLQ dekodiert; es wird nichts geladen, die generierte Datei ist nicht nötig und die Map verlässt den Browser nicht.
Der Bericht zeigt version, file, sourceRoot, die Anzahl von sources, names und dekodierten Mappings, je eine Kachel für diese Zählungen und eine Zeile pro Quelle mit der Größe des eingebetteten sourcesContent.
  1. Fügen Sie die Map in das Feld Source-Map-JSON ein oder drücken Sie Beispiel laden: eine Map mit fünf Segmenten für src/index.ts, einer eingebetteten Datei und dem Namen "answer".
  2. Drücken Sie Lokal analysieren. Beispiel laden analysiert das Beispiel sofort.
  3. Prüfen Sie die drei Kacheln: wie viele Quellen und Namen die Map nennt und wie viele Mappings aus der VLQ-Zeichenkette dekodiert werden.
  4. Tragen Sie eine generierte Zeile (ab 1) und eine generierte Spalte (ab 0) unter Suchen ein und drücken Sie Suchen: das Ergebnis nennt Quelldatei, Zeile, Spalte und den Namen, wenn das Segment einen trägt.
  5. Sehen Sie die Tabelle Quellen durch: eine Zeile pro Quelle, Inhalt zeigt die Größe des eingebetteten Quelltexts in Bytes oder "nicht eingebettet", wenn sourcesContent fehlt. Kopieren legt das Bericht-JSON in die Zwischenablage.
Was der Bericht zählt und was die Suche zurückgibt
Was die Mappings dekodieren
Jede Zeile der mappings-Zeichenkette ist eine durch Kommas getrennte Liste von Base64-VLQ-Segmenten, und die Werte im Segment sind Deltas: die generierte Spalte beginnt in jeder Zeile neu, während Quelle, Originalzeile, Originalspalte und Name über die ganze Datei weiterlaufen.
Ein Segment mit nur einer generierten Spalte trägt keine Originalposition; es schiebt die Spalte weiter und zählt nicht mit. Alles andere bleibt wie geschrieben, die Zahl im Bericht sind also die Segmente, die wirklich eine Position tragen.
Was die Suche zurückgibt
Die Suche nimmt das Mapping mit der größten generierten Spalte, die noch kleiner oder gleich der eingegebenen Spalte ist - in der eingegebenen Zeile. Das ist das Segment, das auch die Devtools des Browsers für diese Position verwenden würden.
Zeilen zählen ab 1, Spalten ab 0, wie in der Browser-Konsole und in der mappings-Zeichenkette selbst. Hat die Zeile dort oder davor kein Segment, sagt das Werkzeug das, statt in eine Nachbarzeile auszuweichen.
Grenzen
Der Explorer liest nur den Text der Map. Er lädt weder die generierte Datei noch die Originale, prüft nicht, ob die Map zu einem Build passt, und baut keine Dateien aus sourcesContent nach - gezeigt werden die Strings, die in der Map stehen.
Index-Maps (mit sections) werden nicht dekodiert: fügen Sie eine der Teil-Maps ein. sourceRoot wird angezeigt, aber nicht vor die Zeilen gesetzt, und eine Map mit leerem mappings oder fehlerhaftem VLQ wird gemeldet statt repariert.



    

        
Zuletzt verwendet: