wake-up-neo.com

Wie kann ich eine minified JS in Firebug debuggen?


Ich habe eine Webseite, die wahnsinnig viele minimierte JS-Dateien enthält. Die Webseite funktioniert in meinem lokalen Netzwerk einwandfrei, wirft jedoch einige JS-Fehler beim Staging auf. Es gibt ein Problem in JS, und ich möchte es nicht debuggen. Wenn ich den JS in das Script-Tag von Firebug lade, erscheint es in einer langen horizontalen Linie. Gibt es einen Ausweg in Firebug, der das Skript zum Debuggen erweitert oder verschönert? Ich weiß, dass ich Jsbeautifier verwenden kann, aber sie helfen mir nicht. Ich kann eine erweiterte Datei nicht in CDN hochladen, was den Zweck der Verwendung von CDN missachtet.

Punkte zu beachten,
a) Ich kann die Box, die JS bedient, nicht steuern, es ist auf CDN, ich habe es erwähnt.
b) Ich kann Verschönerungen usw. verwenden, aber würde mir das helfen, das Skript zur Laufzeit zu debuggen? IMHO, nein
c) Da ich an NDA und andere legale Dinge gebunden bin, kann ich das Skript nicht weitergeben, aber es ist ein generisches Problem. Sie können es mit einer verminderten jQuery treffen

javascriptdebuggingfirefoxfirebug
60
Kumar
  1. Verschönern Sie Ihr Skript
  2. Fügen Sie den CDN-Host in / etc/hosts oder Ihrem lokalen DNS hinzu, um ihn auf Ihrem eigenen Webserver aufzulösen
  3. Hosten Sie die verschönerte Version und alles, was Sie auf diesem Webserver benötigen
  4. Sowohl Firefox als auch Chrome (Versionen ab dieser Version) unterstützen die Verschönerung des Skripts mit der im Inspektor verfügbaren Schaltfläche {}.
48
rsp

Update: Es gibt jetzt eine Firebug-Erweiterung, die JavaScript verschönert:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

Es funktioniert perfekt für mich in Firefox 12.0.

Dank an diese Antwort für die Erkennung.

55
Jonathan Sayce

Laden Sie einfach die verkleinerte Datei und drücken Sie die {}-Taste am unteren Rand. Sie wird sofort verschönert, wodurch Haltepunkte und anderes Debugging möglich werden. (Auch für Chrome zutreffend)

29
Kyle Heironimus

Dies ist ein häufiges Problem, und das Chrome-Entwicklerteam hat kürzlich eine elegante Lösung gefunden, die als Quellkarten bezeichnet wurde - siehe http://www.html5rocks.com/de/tutorials/developertools/sourcemaps/ . Für weitere Informationen denke ich, dass es genau das ist, wonach Sie (und der Rest von uns) gesucht haben! :)

14
MarcusTucker

Betrachte eine Veränderung!

Firefox w/Firebug war seit fast einem Jahr meine beliebteste JavaScript-Debugging-Methode. Ich bin jedoch kürzlich zu den Entwickler-Tools von Google-Chrome übergegangen, die weitaus überlegen sind.

  • Chrome unterstützt eine sofortige (eingebaute Funktion) Verschönerung der JavaScript-Ressourcen enter image description here

  • Nach der Verschönerung können Sie die JavaScript-Ressourcendatei debuggen, da sie "nativ" vom Webserver verschönert wurde. Unterbrechungspunkte werden durch Klicken auf die Zeilennummer gesetzt.enter image description here

  • Eine der am meisten extrem mächtige Funktion,
    Ist Wenn Sie einmal an einem Haltepunkt angehalten haben, können Sie die Befehle (mithilfe der Konsole) im selben Bereich ausführen, in dem Sie sich im Haltepunkt befinden. In Firefox ist das nicht möglich.enter image description hereEs ist so einfach zu debuggen (selbst anonyme Funktionen). Sie werden nie wieder zu Firefox zurückkehren.
    Versuch es!

7
user257319

Dies ist eher eine Problemumgehung, kann jedoch hilfreich sein. Die Idee ist, dass wir Dateien, die vom Server kommen, durch Dateien auf Ihrem Computer ersetzen.
Dies funktioniert mit jedem Browser.
Es dauert beim ersten Mal ein wenig Setup (vielleicht 15 Minuten), aber dann kann es sehr bequem sein.
Es kann auch helfen, Ihre Fehlerbehebungen in einer Live/Prod-Umgebung zu testen.

  1. Holen Sie sich Fiddler (es ist ein Web-Debugging-Proxy), installieren Sie ihn, führen Sie ihn aus.
    http://www.fiddler2.com/fiddler2/
    (Starten Sie den Browser nach der Installation neu, um die Erweiterung Fiddler zu erhalten.)
  2. Wenn Sie eine HTTPS-Website debuggen, überprüfen Sie diese zuerst:
    http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
  3. Von nun an sollten Sie in Fiddler (Bereich "Web-Sitzungen" links) alle von Ihrem Browser erstellten Downloads sehen, einschließlich JS-Dateien .
    Wenn nicht, überprüfen Sie dies: Fiddler zeigt keine Sitzungen an
  4. Suchen Sie die Datei, die Sie debuggen möchten, in der Liste (Strg + F funktioniert).
  5. Klicken Sie auf die Datei. Dann entweder:
    • laden Sie den Dateiinhalt aus dem Inspektorfenster (Registerkarte TextView), verschönern Sie ihn und speichern Sie ihn in einer Datei auf Ihrem lokalen Computer
    • oder Zugriff auf eine Datei haben, die den Quellcode enthält (zB: von Ihrer Quellcodeverwaltung)
  6. Wechseln Sie zur Registerkarte AutoResponder (oberer linker Fensterbereich).
    Aktivieren Sie das Kontrollkästchen "Automatische Antworten aktivieren" .
    Aktivieren Sie das Kontrollkästchen "Passthrough für nicht übereinstimmende Anforderungen".
  7. Ziehen Sie Ihre Datei vom linken in den rechten Bereich (der Regeleditor wird unten ausgefüllt).
  8. Legen Sie das andere Feld mit dem Pfad Ihrer lokalen Datei fest
  9. Klicken Sie auf die Schaltfläche Speichern.
  10. Laden Sie die Seite neu und genießen Sie Ihre Debugging-Sitzung.

Fiddler kann noch viel mehr, aber dieser Anwendungsfall beantwortet die ursprüngliche Frage.

7
JB Hurteaux

Drucken Sie Ihr JavaScript hübsch aus. Google dies und Sie werden mehrere Online-JS-Verschönerer finden.

Ich benutze http://jsbeautifier.org/ mich selbst und es funktioniert gut, aber suche nach anderen und benutze eine, die deinen Bedürfnissen entspricht.

Vorsichtsmaßnahme: Es ist immer noch nicht möglich, aussagekräftige lokale Variablennamen zu erhalten (die normalerweise von einem Minifier umbenannt werden). Wenn der Code vom Closure Compiler kompiliert wurde, dann erhalten Sie absolut keine nützlichen Informationen zurück, selbst wenn Sie ihn vervollständigen, denn dann Alle Variablen und Funktionen und Eigenschaften sind unvollständig (nicht nur lokale).

Wenn Ihr Problem beim Debuggen von Code liegt, der von außerhalb stammt (z. B. ein CDN), wird dieser Code offensichtlich minimiert, und Sie können Ihre verschönerte Version dort nicht speichern. In diesem Fall können Sie die Tags, die Code von einem CDN laden, durch eine URL ersetzen, die auf Ihre lokale Version verweist. Anschließend können Sie den Code (der vom CDN heruntergeladen wurde) auf Ihrem eigenen Server verschönern und dann mit FireBug debuggen.

Wenn Sie nicht einmal den HTML-Code steuern, der diese Tags enthält (z. B. sie befinden sich auf einem externen Server), können Sie leider nicht das tun, was Sie möchten, ohne die gesamte Site physisch auf Ihren eigenen Server herunterzuladen. Selbst wenn Sie die gesamte Site (mit allen Dateien) heruntergeladen haben, funktioniert sie möglicherweise nicht, da die Site möglicherweise von einer Back-End-Verarbeitungssprache gesteuert wird oder auf eine Back-End-Datenbank zugreift. In diesem Fall müssen Sie auch alle diese Daten simulieren. Es kann jedoch gemacht werden - man muss nur eine Menge Schmerzen durchmachen. Meine Empfehlung ist, eine Version der Webseite zu speichern und auf Ihrem eigenen Server auszuführen, wobei verschönerter Code von Ihrem eigenen Server zum Debuggen bereitgestellt wird.

3
Stephen Chung

Durch das Platzieren von Haltepunkten in JavaScript wird das Debuggen wesentlich einfacher. Wenn Ihr Code jedoch bereits in die Produktion aufgenommen wurde, wurde er wahrscheinlich minimiert. Wie können Sie minified Code debuggen? Hilfreich ist, dass einige Browser eine Option zum Entfernen von JavaScript haben.

Wählen Sie in Chrome und Safari einfach die Registerkarte "Scripts" aus, suchen Sie die entsprechende Datei und drücken Sie dann das Symbol "{}" (Pretty Print) im unteren Bedienfeld.

Klicken Sie in Internet Explorer in der Dropdown-Liste der Skriptauswahl auf das Werkzeugsymbol, um die Option zum Formatieren des JavaScript zu finden.

Opera verminifiziert automatisch JavaScript. Quelle

0
Aamol