Wie kann ich meinen JavaScript-Code debuggen? [geschlossen]
Antworten:
Firebug ist eines der beliebtesten Tools für diesen Zweck.
Alle modernen Browser verfügen über eine integrierte JavaScript-Debugging-Anwendung. Die Details hierzu werden auf den entsprechenden Technologie-Webseiten behandelt. Meine persönliche Präferenz für das Debuggen von JavaScript ist Firebug in Firefox. Ich sage nicht, dass Firebug besser ist als jeder andere. Es hängt von Ihren persönlichen Vorlieben ab und Sie sollten Ihre Website wahrscheinlich sowieso in allen Browsern testen (meine persönliche erste Wahl ist immer Firebug).
Ich werde einige der folgenden allgemeinen Lösungen am Beispiel von Firebug behandeln :
Feuerfuchs
Firefox wird mit einem eigenen integrierten JavaScript-Debugging-Tool geliefert. Ich würde jedoch empfehlen, das Firebug- Add-On zu installieren . Dies bietet einige zusätzliche Funktionen basierend auf der Basisversion, die praktisch sind. Ich werde hier nur über Firebug sprechen.
Sobald Firebug installiert ist, können Sie wie folgt darauf zugreifen:
Erstens, wenn Sie mit der rechten Maustaste auf ein Element klicken, können Sie das Element mit Firebug überprüfen :
Wenn Sie darauf klicken, wird das Firebug-Fenster unten im Browser geöffnet:
Firebug bietet verschiedene Funktionen, aber die, an der wir interessiert sind, ist die Registerkarte "Skript". Durch Klicken auf die Registerkarte "Skript" wird das folgende Fenster geöffnet:
Zum Debuggen müssen Sie natürlich auf Neu laden klicken :
Sie können jetzt Haltepunkte hinzufügen, indem Sie auf die Zeile links neben dem JavaScript-Code klicken, zu dem Sie den Haltepunkt hinzufügen möchten:
Wenn Ihr Haltepunkt erreicht ist, sieht er wie folgt aus:
Sie können auch hinzufügen Uhr Variablen und in der Regel alles tun , dass Sie sich in einem modernen Debugging - Tool erwarten.
Weitere Informationen zu den verschiedenen in Firebug angebotenen Optionen finden Sie in den Firebug-FAQ .
Chrom
Chrome auch eine eigene eingebaute JavaScript Debugging - Option hat, die in sehr ähnlicher Weise arbeitet der rechten Maustaste, inspizieren Element usw. . Schauen Sie sich die Chrome Developer Tools an . Im Allgemeinen finde ich die Stack-Traces in Chrome besser als in Firebug.
Internet Explorer
Wenn Sie in .NET entwickeln und Visual Studio mithilfe der Webentwicklungsumgebung verwenden, können Sie JavaScript-Code direkt debuggen, indem Sie Haltepunkte usw. setzen. Ihr JavaScript-Code sieht genauso aus, als würden Sie Ihren C # - oder VB.NET- Code debuggen .
Wenn Sie dies nicht haben, bietet Internet Explorer auch alle oben gezeigten Tools. Ärgerlicherweise können Sie auf die Entwicklertools zugreifen, indem Sie F12 drücken , anstatt mit der rechten Maustaste die Elementfunktionen von Chrome oder Firefox überprüfen zu lassen . Diese Frage deckt die meisten Punkte ab.
- Internet Explorer 8 (Entwicklertools - F12). Alles andere ist im Land des Internet Explorers zweitklassig
- Firefox und Firebug . Hit F12auf Anzeige.
- Safari (Menüleiste anzeigen, Einstellungen -> Erweitert -> Menüleiste Entwickeln anzeigen)
- Google Chrome JavaScript Console ( F12oder ( Ctrl+ Shift+ J)). Meistens der gleiche Browser wie Safari, aber Safari ist meiner Meinung nach besser.
- Opera ( Tools -> Erweitert -> Entwicklertools )
In JavaScript gibt es ein Debugger- Schlüsselwort zum Debuggen des JavaScript-Codes. Setzen Sie Debugger; Snippet in Ihrem JavaScript-Code. An diesem Punkt wird automatisch mit dem Debuggen des JavaScript-Codes begonnen.
Beispielsweise:
Angenommen, dies ist Ihre test.js- Datei
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();- Wenn der Browser die Webseite in der Entwickleroption mit aktiviertem Debugger ausführt, beginnt er automatisch mit dem Debuggen über den Debugger. Punkt.
- Dort sollte das Entwicklerfenster des Browsers geöffnet sein.
Ich benutze einen alten guten printfAnsatz (eine alte Technik, die jederzeit gut funktioniert).
Schau auf Magie %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);%oDump klickbarer und tief durchsuchbarer, hübsch gedruckter Inhalt des JS-Objekts. %swurde nur für eine Aufzeichnung gezeigt.
Und das:
console.log("%s", new Error().stack);gibt Ihnen eine Java-ähnliche Stapelverfolgung zum new Error()Aufrufpunkt (einschließlich Pfad zur Datei und Zeilennummer !!).
Beides %ound new Error().stackverfügbar in Chrome und Firefox.
Mit solch leistungsstarken Tools gehen Sie davon aus, dass in Ihrem JS etwas schief geht, setzen die Debug-Ausgabe (vergessen Sie nicht, die ifAnweisung in einpacken zu lassen, um die Datenmenge zu reduzieren) und überprüfen Ihre Annahme. Beheben Sie das Problem oder nehmen Sie eine neue Annahme an oder setzen Sie mehr Debug-Ausgaben auf das Bit-Problem.
Auch für Stack-Traces verwenden:
console.trace();wie sagen Konsole
Viel Spaß beim Hacken!
Beginnen Sie mit Firebug und IE Debugger.
Seien Sie jedoch vorsichtig mit Debuggern in JavaScript. Von Zeit zu Zeit wirken sie sich gerade so stark auf die Umgebung aus, dass einige der Fehler auftreten, die Sie zu debuggen versuchen.
Beispiele:
Für Internet Explorer ist dies im Allgemeinen eine allmähliche Verlangsamung und eine Art Deal mit Speicherlecks. Nach ungefähr einer halben Stunde muss ich neu starten. Es scheint ziemlich regelmäßig zu sein.
Für Firebug ist es wahrscheinlich mehr als ein Jahr her, also könnte es eine ältere Version gewesen sein. Infolgedessen erinnere ich mich nicht an die Einzelheiten, aber im Grunde lief der Code nicht richtig und nachdem ich eine Weile versucht hatte, ihn zu debuggen, deaktivierte ich Firebug und der Code funktionierte einwandfrei.
Obwohl dies alert(msg);in den Szenarien "Ich möchte nur herausfinden, was los ist" funktioniert, ist jeder Entwickler auf den Fall gestoßen, dass Sie in eine (sehr große oder endlose) Schleife geraten, aus der Sie nicht ausbrechen können.
Ich würde empfehlen, während der Entwicklung eine Debug-Option zu verwenden, mit der Sie ausbrechen können, wenn Sie eine sehr direkte Debug-Option wünschen. (PS Opera, Safari und Chrome haben dies alle in ihren nativen Dialogen verfügbar.)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}Mit den oben genannten Funktionen können Sie sich selbst in eine große Schleife des Popup-Debuggens versetzen, in der Sie durch Drücken von Enter/ Okdurch jede Nachricht springen, durch Drücken von Escape/ Canceljedoch gut ausbrechen können.
Ich benutze WebKits Entwicklermenü / Entwicklerkonsole von (Safari 4). Es ist fast identisch mit Firebug.
console.log()ist das neue schwarz - weitaus besser als alert().
Mein erster Schritt ist immer, den HTML- Code zu validieren und die Syntax mit JSLint zu überprüfen . Wenn Sie ein sauberes Markup und gültigen JavaScript-Code haben, ist es Zeit für Firebug oder einen anderen Debugger.
Visual Studio 2008 verfügt über einige sehr gute JavaScript-Debugging-Tools. Sie können einen Haltepunkt in Ihrem clientseitigen JavaScript-Code ablegen und ihn mit genau denselben Tools wie den serverseitigen Code durchlaufen. Es ist nicht erforderlich, einen Prozess anzuhängen oder etwas Schwieriges zu tun, um ihn zu aktivieren.
Ich benutze einige Tools: Fiddler , Firebug und Visual Studio. Ich habe gehört, Internet Explorer 8 hat einen guten eingebauten Debugger.
Ich habe Firebug verwendet , bis Internet Explorer 8 herauskam. Ich bin kein großer Fan von Internet Explorer, aber nachdem ich einige Zeit mit den integrierten Entwicklertools verbracht habe, die einen wirklich netten Debugger enthalten, scheint es sinnlos, etwas anderes zu verwenden. Ich muss meinen Hut vor Microsoft ziehen, sie haben einen fantastischen Job mit diesem Tool gemacht.
Sie können auch YUI Logger auschecken . Alles, was Sie tun müssen, um es zu verwenden, ist, ein paar Tags in Ihren HTML-Code aufzunehmen. Es ist eine hilfreiche Ergänzung zu Firebug, die mehr oder weniger ein Muss ist.
Neben der Verwendung des JavaScript-Debuggers von Visual Studio habe ich mein eigenes einfaches Panel geschrieben, das ich einer Seite hinzufüge. Es ist einfach wie im Direktfenster von Visual Studio. Ich kann die Werte meiner Variablen ändern, meine Funktionen aufrufen und die Werte der Variablen anzeigen. Es wertet einfach den in das Textfeld geschriebenen Code aus.
Zusätzlich zu den Firebug- und browser-nativen Entwicklererweiterungen bietet JetBrains WebStorm IDE eine integrierte Remote-Debug-Unterstützung für Firefox und Chrome (Erweiterung erforderlich).
Unterstützt auch:
Optionen, um dies kostenlos zu testen, sind die 30-Testversion oder die Verwendung einer Early Access-Version .
Wenn Sie Visual Studio verwenden , geben Sie einfach debugger;den Code ein, den Sie debuggen möchten. Während der Ausführung wird das Steuerelement an dieser Stelle angehalten, und Sie können von da an Schritt für Schritt debuggen.
Wie bei den meisten Antworten kommt es wirklich darauf an: Was versuchen Sie mit Ihrem Debugging zu erreichen? Grundlegende Entwicklung, Behebung von Leistungsproblemen? Für die grundlegende Entwicklung sind alle vorherigen Antworten mehr als ausreichend.
Speziell für Leistungstests empfehle ich Firebug. Für eine Reihe von Projekten, an denen ich gearbeitet habe, war es von unschätzbarem Wert, feststellen zu können, welche Methoden zeitlich am teuersten sind. Da clientseitige Bibliotheken immer robuster werden und im Allgemeinen mehr Verantwortung für den Client übernommen wird, wird diese Art des Debuggens und Profilierens nur noch nützlicher.
Firebug Console API: http://getfirebug.com/console.html
Durch DrückenF12 von können Webentwickler JavaScript-Code schnell debuggen, ohne den Browser zu verlassen. Es ist in jede Installation von Windows integriert.
In Internet Explorer 11 , F12 - Tools bieten Debugging - Tools wie Breakpoints, Watch und lokale Variable Anzeige und eine Konsole für Nachrichten und sofortige Ausführung von Code.