webentwicklung-frage-antwort-db.com.de

Console.log (); Gewusst wie & Debuggen von Javascript

Ok, ich hoffe, das ist eine Frage, die für Sie nicht zu grundlegend ist.

Ich kenne genug jQuery, um mich in Schwierigkeiten zu bringen, das heißt, ich kann Elemente packen und Sachen damit machen, meine eigenen kleinen Funktionen für Interaktivität schreiben und so. Aber dann läuft etwas nicht wie erwartet, bevor ich Fragen an Stackoverflow stelle und Antworten bekomme, die mich dazu bringen, mir in die Stirn zu schlagen, würde ich es gerne selbst debuggen und habe es satt, alert(); in meinen Code einzufügen. Bei der Lektüre dieses Themas werden console.log();, console.info(); und dergleichen erwähnt, aber ich kann keine Ressource finden, die erklärt, wie diese in realen Szenarien für das Debugging verwendet werden.

Wissen Sie, wer von einer guten Ressource oder einem guten Tutorial (keine Angst davor, ein Buch zu lesen) kennt, das erklären kann, wie diese Funktionen für den Laien verwendet werden? Es scheint, dass die Tutorials und solche, die ich finde, entweder ein Weg zum Fortgeschrittenen sind oder nur die Oberfläche überfliegen und Ihnen nicht zeigen, wie sie verwendet werden. Ich verstehe, dass ich console.log(); einfügen kann und in der Konsole Informationen für firebug oder element inspector ausspuckt. Was aber, wenn meine Handgebackene Funktion irgendwo unerwartet etwas Unerwartetes tut? Wie finde ich das Problem, wenn der Browser das Javascript analysiert.

Jede Hilfe wäre sehr dankbar, da ich das Gefühl habe zu lernen, dass ich verstehen kann, was in meinem Code vor sich geht. Ich kann aufhören, auf den Bildschirm zu starren. "Warum funktioniert das nicht, es funktionierte in der jsfiddle!"

10
danferth

console.log () übernimmt alles, was Sie an es übergeben, und schreibt es in das Protokollfenster einer Konsole. Wenn Sie ein Array übergeben, können Sie den Inhalt des Arrays überprüfen. Übergeben Sie ein Objekt, können Sie die Attribute/Methoden des Objekts überprüfen. Übergeben Sie einen String, wird der String protokolliert. Im Grunde ist es "document.write", kann aber seine Argumente intelligent auseinander nehmen und an anderer Stelle ausschreiben.

Es ist nützlich, gelegentlich Debugging-Informationen auszugeben, aber nicht besonders nützlich, wenn Sie über umfangreiche Debugging-Ausgaben verfügen.

Um zu sehen, wie ein Skript ausgeführt wird, verwenden Sie stattdessen einen Debugger, mit dem Sie den Code Zeile für Zeile durchgehen können. console.log wird verwendet, wenn Sie den Inhalt einiger Variablen zur späteren Überprüfung anzeigen möchten, die Ausführung jedoch nicht unterbrechen möchten.

9
Marc B

Ich füge diese Funktionen gerne im Kopf hinzu.

window.log=function(){if(this.console){console.log(Array.prototype.slice.call(arguments));}};
jQuery.fn.log=function (msg){console.log("%s: %o", msg,this);return this;};

Jetzt kann das IE nicht aufgehoben werden. Ich kann es aktivieren oder an einer Stelle deaktivieren

$(".classname").log(); //show an array of all elements with classname class
2
Andy Gee

Lernen Sie, einen Javascript-Debugger zu verwenden. Venkman (für Firefox) oder der Web Inspector (Teil von Chome & Safari) sind ausgezeichnete Werkzeuge zum Debuggen von Vorgängen.

Sie können Haltepunkte festlegen und den Status des Computers abfragen, während Sie mit Ihrem Skript interagieren. Schritt durch Teile des Codes, um sicherzustellen, dass alles wie geplant funktioniert usw.

Hier ist eine ausgezeichnete Beschreibung von WebMonkey zu JavaScript-Debugging für Anfänger . Es ist ein großartiger Ort, um anzufangen.

2
tkone

Im Wesentlichen ermöglicht console.log() die Ausgabe von Variablen in Ihrem Javascript-Debugger der Wahl, anstatt jedes Mal, wenn Sie etwas untersuchen möchten, eine alert() zu blinken. Außerdem erhalten Sie bei komplexeren Objekten eine Baumansicht, um das Objekt weiter zu untersuchen, anstatt es zu müssen Konvertieren Sie Elemente in Zeichenfolgen wie eine alert().

1
jondavidjohn

Haltepunkte und besonders bedingte Haltepunkte sind Ihre Freunde.

Sie können auch eine kleine Assert-Like-Funktion schreiben, die Werte prüft und Ausnahmen auslöst, wenn dies in der Debug-Version der Site erforderlich ist (einige Variable ist auf "true" gesetzt oder die URL hat einige Parameter.)

0
Dima Vidmich