So entminifizieren Sie JavaScript zum Debuggen (lesbare Ausgabe)

Das Problem mit minimiertem Code in der Produktion

Sie sind wahrscheinlich schon einmal auf diese Situation gestoßen: In der Produktion tritt ein JavaScript-Fehler auf, aber der Quellcode ist verkleinert und völlig unlesbar. Variablen werden in „a“, „b“, „c“ umbenannt, Leerzeichen entfernt, Kommentare gelöscht. Wie debuggen Sie unter diesen Bedingungen? Die Lösung: Den Code entminifizieren, um ihn lesbar und verständlich zu machen.

Best Practices zum Debuggen von minimiertem Code

Warum JavaScript entminimieren?

Häufige Szenarien, die eine Aufhebung der Minifizierung erfordern

Mehrere Situationen führen dazu, dass Sie JavaScript aufheben:

JavaScript-Fehler in der Produktion mit unlesbarem Stack-Trace

Analysieren einer minimierten JavaScript-Bibliothek, um zu verstehen, wie sie funktioniert

Debuggen eines Leistungsproblems in minimiertem Code

Rechtliches Reverse Engineering eines Skripts eines Drittanbieters

Lernen durch Analyse des Codes beliebter Websites

Einschränkungen der Unminifizierung

Es ist wichtig zu verstehen, was die Unminifizierung bewirken kann und was nicht:

Limitations:

Umbenannte Variablen (Mangling) können nicht wiederhergestellt werden: „a“, „b“, „c“ bleiben „a“, „b“, „c“.

Gelöschte Kommentare gehen dauerhaft verloren

Eliminierter toter Code kann nicht wiederhergestellt werden

Die logische Struktur kann wiederhergestellt werden, die ursprünglichen Namen jedoch nicht

Einige aggressive Optimierungen machen den Code auch nach der Aufhebung der Minifizierung schwer verständlich

What works:

Wiederherstellung von Einrückungen und Formatierungen

Hinzufügen von Leerzeichen um Operatoren

Trennen von Anweisungen über mehrere Zeilen hinweg

Allgemeine Verbesserung der Lesbarkeit

Erleichtern Sie das Debuggen mit DevTools

So entminifizieren Sie JavaScript mit FastMinify

Schnelle Methode: Online-Tool

Der einfachste und schnellste Weg, JavaScript zu entminifizieren, ist die Verwendung eines Online-Tools wie FastMinify.

1

Kopieren Sie den minimierten Code

Kopieren Sie den minimierten JavaScript-Code aus der Browserkonsole, DevTools oder einer Quelldatei.

2

In FastMinify einfügen

Gehen Sie zu [FastMinify – JavaScript aufheben](https://fastminify.com/de/minify-js) und fügen Sie Ihren Code in den linken Editor ein.

3

Klicken Sie auf „Minimierung aufheben“.

Wählen Sie in den Verarbeitungsoptionen die Option „Unminify“. Der formatierte Code wird sofort im richtigen Editor angezeigt.

4

Kopieren Sie das Ergebnis

Kopieren Sie den nicht minimierten Code und verwenden Sie ihn für Ihr Debugging oder Ihre Analyse.

Example:

Before (minified):

function a(b,c){return b+c}const d=a(5,3);console.log(d);

After (unminified):

Funktion a(b, c) { gib b + c zurück } const d = a(5, 3); console.log(d);

Reales Beispiel: Debuggen eines Fehlers

Hier ist ein echtes Beispiel dafür, wie man Code entminimiert, um einen Fehler zu debuggen:

Error: Nicht erfasster TypeError: Die Eigenschaft „x“ von undefiniert in main.js:1:245 kann nicht gelesen werden

Minified code:

!function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery erfordert ein Fenster mit einem Dokument");...

Unminified code (preview):

!function(e, t) { „object“ == typeof module && „object“ == typeof module.exports ? module.exports = e.document ? t(e, !0) : Funktion(e) { if (!e.document) throw new Error("jQuery benötigt ein Fenster mit einem Dokument"); t(e) zurückgeben } : t(e) }("undefiniert" != Fenstertyp ? Fenster: this, function(e, t) { var n = [], r = e.document, i = n.slice, o = n.concat, s = n.push, a = n.indexOf, u = {}, c = u.toString, l = u.hasOwnProperty, f = {}, p = „2.3.1“, d = Funktion(e, t) { neues d.fn.init(e, t) zurückgeben }, h = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g; // ... Rest des formatierten Codes });

Verwendung von Source Maps für optimales Debuggen

Was ist eine Quellkarte?

Quellzuordnungen sind Dateien, die eine Zuordnung zwischen minimiertem Code und ursprünglichem Quellcode herstellen. Dies ist die beste Lösung zum Debuggen von minimiertem Code.

Wenn Sie Ihren Code mit Terser oder Webpack verkleinern, können Sie eine „.map“-Datei generieren, die die Zuordnungen enthält. Browser DevTools verwenden diese Dateien automatisch, um den ursprünglichen Quellcode in der Konsole und an Haltepunkten anzuzeigen.

Zugriff auf Original-Quellcode mit echten Variablennamen

Haltepunkte direkt im Quellcode

Lesbare Stack-Traces mit Original-Funktionsnamen

Debuggen, als ob der Code nicht minimiert wäre

So aktivieren Sie Quellkarten in der Produktion

So aktivieren Sie Quellkarten in Ihrem Build:

Terser

const terser = require('terser'); const result = waiting terser.minify(code, { Quellkarte: { Dateiname: 'app.min.js', URL: 'app.min.js.map' } });

Webpack

module.exports = { devtool: 'source-map', // Für die Produktion // oder 'hidden-source-map', um es nicht öffentlich zugänglich zu machen Optimierung: { minimieren: wahr, Minimierer: [neues TerserPlugin({ sourceMap: wahr })] } };

⚠️ Warnung: Source Maps legen Ihren Quellcode offen. Verwenden Sie „hidden-source-map“ in der Produktion, wenn Sie nicht möchten, dass Benutzer auf Ihren ursprünglichen Quellcode zugreifen.

Debuggen mit Browser-DevTools

Pretty Print in Chrome DevTools

Chrome DevTools enthält eine „Pretty Print“-Funktion, die minimierten Code automatisch formatiert.

1

Öffnen Sie Chrome DevTools (F12)

2

Gehen Sie zur Registerkarte „Quellen“.

3

Öffnen Sie die minimierte JavaScript-Datei

4

Klicken Sie unten links auf die Schaltfläche „{}“ (Pretty Print).

5

Der Code wird automatisch formatiert und ist besser lesbar

Pretty Print verbessert die Lesbarkeit, stellt jedoch keine Variablennamen wieder her. Für optimales Debuggen verwenden Sie Source Maps.

Verwendung von Haltepunkten für nicht minimierten Code

Sobald der Code entminifiziert ist (über FastMinify oder Pretty Print), können Sie:

Tips:

Platzieren Sie Haltepunkte auf formatierten Zeilen

Variablenwerte prüfen (auch wenn sie umbenannt werden)

Verwenden Sie die Konsole, um Ausdrücke zu testen

Verfolgen Sie die Ausführung Zeile für Zeile mit dem Debugger

Analysieren Sie den Stack-Trace, um den Ausführungsfluss zu verstehen

Alternative Tools zum Unminifizieren

Abschluss

Die Entminifizierung von JavaScript ist eine wesentliche Fähigkeit für jeden Entwickler, der mit Produktionscode arbeitet. Unabhängig davon, ob Sie FastMinify für eine schnelle Lösung, Source Maps für optimales Debugging oder Browser-DevTools verwenden, kommt es darauf an, zu verstehen, wie man unlesbaren Code in verständlichen Code umwandelt. Denken Sie daran: Die beste Lösung bleibt, Source Maps für ein optimales Debugging in der Produktion zu haben.