web-dev-qa-db-ger.com

Was ist console.log?

Was nützt console.log?

Bitte erläutern Sie die Verwendung in JavaScript anhand eines Codebeispiels.

403
Mihir

Es ist keine jQuery-Funktion, sondern eine Funktion zum Debuggen. Sie können zum Beispiel etwas in der Konsole protokollieren, wenn etwas passiert. Zum Beispiel:

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

Auf der Registerkarte "Konsole" von Firebug (oder auf der Konsole eines anderen Tools, z. B. Chrome Web Inspector) wird dann #someButton was clicked angezeigt, wenn Sie auf die Schaltfläche klicken.

Aus bestimmten Gründen ist das Konsolenobjekt möglicherweise nicht verfügbar. Dann können Sie überprüfen, ob dies der Fall ist. Dies ist hilfreich, da Sie Ihren Debugging-Code nicht entfernen müssen, wenn Sie die Bereitstellung in der Produktion durchführen:

if (window.console && window.console.log) {
  // console is available
}
446
Jan Hančič

Orte, an denen Sie die Konsole anzeigen können! Nur um sie alle in einer Antwort zu haben.

Firefox

http://getfirebug.com/

(Sie können jetzt auch die in Firefox integrierten Entwicklertools Strg + Umschalt + J (Tools> Web Developer> Fehlerkonsole) verwenden, aber Firebug ist viel besser. Verwenden Sie Firebug.)

Safari und Chrome

Im Grunde das gleiche.

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.Apple.com/technologies/safari/developer-tools.html

Internet Explorer

Vergessen Sie nicht, dass Sie die Kompatibilitätsmodi zum Debuggen von IE7 und IE8 in IE9 oder IE10 verwenden können

http://msdn.Microsoft.com/en-us/library/ie/gg589507 (v = vs.85) .aspx

http://msdn.Microsoft.com/en-us/library/dd565628 (v = vs.85) .aspx

Wenn Sie in IE6 für IE7 auf die Konsole zugreifen müssen, verwenden Sie das Firebug Lite-Bookmarklet

http://getfirebug.com/firebuglite/ Suchen Sie nach einem stabilen Lesezeichen

http://en.wikipedia.org/wiki/Bookmarklet

Opera

http://www.opera.com/dragonfly/

iOS

Funktioniert für alle iPhones, iPod touch und iPads.

http://developer.Apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Jetzt mit iOS 6 können Sie die Konsole über Safari in OS X anzeigen, wenn Sie Ihr Gerät anschließen. Oder Sie können dies mit dem Emulator tun, indem Sie einfach ein Safari-Browserfenster öffnen und zur Registerkarte "Entwickeln" wechseln. Dort finden Sie Optionen, mit denen der Safari Inspector mit Ihrem Gerät kommunizieren kann.

Windows Phone, Android

Beide haben keine integrierte Konsole und keine Lesezeichenfunktion. Also verwenden wir http://jsconsole.com/ type: listen und es gibt Ihnen ein Skript-Tag, das Sie in Ihren HTML-Code einfügen können. Von da an können Sie Ihre Konsole auf der jsconsole-Website anzeigen.

iOS und Android

Sie können auch http://html.Adobe.com/Edge/inspect/ verwenden, um mithilfe des praktischen Browser-Plug-ins auf Web Inspector-Tools und die Konsole auf jedem Gerät zuzugreifen.


Ältere Browserprobleme

Zuletzt stürzen ältere Versionen von IE ab, wenn Sie console.log in Ihrem Code verwenden und die Entwicklertools nicht gleichzeitig geöffnet haben. Zum Glück ist es eine einfache Lösung. Verwenden Sie das folgende Code-Snippet am oberen Rand Ihres Codes:

 if(!window.console){ window.console = {log: function(){} }; } 

Dadurch wird überprüft, ob die Konsole vorhanden ist, und wenn nicht, wird sie auf ein Objekt mit einer leeren Funktion namens log festgelegt. Auf diese Weise sind window.console und window.console.log niemals wirklich undefined.

224
Fresheyeball

Sie können alle an der Konsole protokollierten Nachrichten anzeigen, wenn Sie zur Überprüfung Ihres Codes ein Tool wie Firebug verwenden. Angenommen, Sie tun Folgendes:

console.log('Testing console');

Wenn Sie in Firebug auf die Konsole zugreifen (oder mit welchem ​​Tool Sie auch immer Ihren Code überprüfen möchten), sehen Sie die Meldung, die Sie der Funktion zur Protokollierung gegeben haben. Dies ist besonders nützlich, wenn Sie sehen möchten, ob eine Funktion ausgeführt wird oder ob eine Variable ordnungsgemäß übergeben/zugewiesen wird. Es ist eigentlich ziemlich wertvoll, um herauszufinden, was mit Ihrem Code schief gelaufen ist.

99
Fibericon

Es wird eine Protokollnachricht an die Javascript-Konsole des Browsers gesendet, z. Firebug oder Developer Tools (Chrome/Safari) und zeigt die Zeile und die Datei an, von der aus sie ausgeführt wurden.

Wenn Sie ein jQuery-Objekt ausgeben, enthält es außerdem einen Verweis auf dieses Element im DOM. Wenn Sie darauf klicken, wird dieser Verweis auf der Registerkarte Elements/HTML angezeigt.

Sie können verschiedene Methoden anwenden. Damit dies in Firefox funktioniert, muss Firebug geöffnet sein. Andernfalls stürzt die gesamte Seite ab. Unabhängig davon, ob es sich bei der Protokollierung um eine Variable, ein Array, ein Objekt oder ein DOM-Element handelt, erhalten Sie eine vollständige Aufschlüsselung, die auch den Prototyp des Objekts enthält (immer interessant, einen Blick darauf zu werfen). Sie können auch beliebig viele Argumente einfügen, die durch Leerzeichen ersetzt werden.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

Diese werden mit unterschiedlichen Logos für jeden Befehl angezeigt.

Sie können auch console.profile(profileName); verwenden, um ein Profil für eine Funktion, ein Skript usw. zu erstellen. Beenden Sie das Profil dann mit console.profileEnd(profileName); und es wird auf der Registerkarte "Profile" in Chrome angezeigt (weiß nicht) mit FF).

Eine vollständige Referenz finden Sie unter http://getfirebug.com/logging. Ich empfehle Ihnen, diese zu lesen. (Traces, Gruppen, Profilerstellung, Objektinspektion).

Hoffe das hilft!

80
Fred

Es gibt nichts mit jQuery zu tun, und wenn Sie es verwenden möchten, rate ich Ihnen, dies zu tun

if (window.console) {
    console.log("your message")
}

So knacken Sie Ihren Code nicht, wenn er nicht verfügbar ist.

Wie im Kommentar vorgeschlagen, können Sie dies auch an einer Stelle ausführen und dann console.log wie gewohnt verwenden

if (!window.console) { window.console = { log: function(){} }; }
32
Baptiste Pernet

console.log hat nichts mit jQuery zu tun. Es ist ein allgemeines Objekt/eine allgemeine Methode, die von Debuggern bereitgestellt wird (einschließlich des Chrome -Debuggers und Firebugs), mit der ein Skript Daten (oder Objekte in den meisten Fällen) in der JavaScript-Konsole protokollieren kann.

22
Quentin

console.log protokolliert Debug-Informationen in einigen Browsern an der Konsole (Firefox mit installiertem Firebug, Chrome, IE8, alles, was mit Firebug Lite installiert ist). In Firefox ist es ein sehr leistungsfähiges Tool, mit dem Sie Objekte untersuchen oder das Layout oder andere Eigenschaften von HTML-Elementen untersuchen können. Es hat nichts mit jQuery zu tun, aber es gibt zwei Dinge, die bei der Verwendung mit jQuery häufig gemacht werden:

  • installieren Sie die Erweiterung FireQuery für Firebug. Dies führt unter anderem dazu, dass die Protokollierung von jQuery-Objekten besser aussieht.

  • erstellen Sie einen Wrapper, der eher den Verkettungscode-Konventionen von jQuery entspricht.

Das bedeutet normalerweise so etwas:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

das kannst du dann gerne aufrufen

$('foo.bar').find(':baz').log().hide();

um einfach in jQuery-Ketten nachzuschauen.

18
Tgr

console.log hat nichts mit jQuery zu tun.

Es protokolliert eine Nachricht an eine Debug-Konsole, z. B. Firebug.

15
SLaks

Manchmal kann es verwirrend sein, dass Sie jedes der beiden Argumente als anderes übergeben müssen, um eine Textnachricht zusammen mit dem Inhalt eines Ihrer Objekte mit console.log zu protokollieren. Dies bedeutet, dass Sie sie durch Kommas trennen müssen, da dies implizit die Methode .toString() Ihres Objekts aufrufen würde, wenn Sie den Operator + verwenden würden, um die Ausgaben zu verketten. Dies wird in den meisten Fällen nicht explizit überschrieben, und die von Object vererbte Standardimplementierung enthält keine nützlichen Informationen.

Beispiel zum Ausprobieren in der Konsole:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

wenn Sie versuchen, die informative Textnachricht mit dem Inhalt des Objekts zu verknüpfen, erhalten Sie:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

Denken Sie also daran, dass console.log tatsächlich so viele Argumente akzeptiert, wie Sie möchten.

15
Thalis K.

Verwenden Sie console.log, um Ihrer Seite Debugging-Informationen hinzuzufügen.

Viele Leute benutzen alert(hasNinjas) für diesen Zweck, aber console.log(hasNinjas) ist einfacher zu bearbeiten. Durch die Verwendung einer Warnmeldung wird ein modales Dialogfeld geöffnet, das die Benutzeroberfläche blockiert.

Edit: Ich stimme Baptiste Pernet und Jan Hančič zu, dass es eine sehr gute Idee ist, zuerst zu überprüfen, ob window.console definiert ist, damit Ihr Code nicht kaputt geht wenn keine Konsole verfügbar ist.

12
Mark Byers

Ein Beispiel: Angenommen, Sie möchten wissen, in welcher Codezeile Sie Ihr Programm ausführen konnten (bevor es kaputt ging!), Geben Sie einfach Folgendes ein

console.log("You made it to line 26. But then something went very, very wrong.")
11

Sie können damit JavaScript-Code entweder mit Firebug für Firefox oder mit der JavaScript-Konsole in WebKit Browsern debuggen.

var variable;

console.log(variable);

Der Inhalt der Variablen wird angezeigt, auch wenn es sich um ein Array oder Objekt handelt.

Es ist ähnlich wie print_r($var); für PHP .

10
jondavidjohn

Achtung: Wenn Sie Anrufe an die Konsole in Ihrem Produktionscode senden, wird Ihre Site in Internet Explorer beschädigt. Niemals ausgepackt aufbewahren. Siehe: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

9
Harlo Holmes

In den Anfängen wurde das JS-Debugging über die Funktion alert() ausgeführt - jetzt ist es eine veraltete Praxis.

Die Funktion console.log() schreibt eine Nachricht, um sich an der Debug-Konsole anzumelden, z. B. Webkit oder Firebug. In einem Browser sehen Sie nichts auf dem Bildschirm. Es protokolliert eine Nachricht an eine Debug-Konsole. Es ist nur in Firefox mit Firebug und in Webkit-basierten Browsern (Chrome und Safari) verfügbar. Es funktioniert nicht in allen IE Releases .

Das Konsolenobjekt ist eine Erweiterung des DOM.

Die Funktion console.log() sollte nur während der Entwicklung und des Debuggens im Code verwendet werden.

Es wird als schlechte Praxis angesehen, dass jemand console.log() in der Javascript-Datei auf dem Produktionsserver belässt.

7
jjpcondor

Wenn Ihr Browser das Debuggen unterstützt, können Sie die console.log () -Methode verwenden, um JavaScript-Werte anzuzeigen.

Aktivieren Sie das Debuggen in Ihrem Browser mit F12, und wählen Sie "Konsole" im Debugger-Menü.

Konsole in JavaScript. Versuchen Sie, ein nicht funktionierendes JavaScript-Programm zu reparieren oder zu "debuggen", und üben Sie die Verwendung des Befehls console.log (). Es gibt Verknüpfungen, mit denen Sie auf die JavaScript-Konsole zugreifen können, basierend auf dem von Ihnen verwendeten Browser:

Chrome Console-Tastaturkürzel

Windows: Ctrl + Shift + J
Mac: Cmd + Option + J

Tastenkombinationen für die Firefox-Konsole

Windows: Ctrl + Shift + K
Mac: Cmd + Option + K

Tastenkombinationen für die Internet Explorer-Konsole

F12 Schlüssel

Safari Console-Tastaturkürzel

Cmd + Option + C

4
S. Mayol

Abgesehen von den oben genannten Verwendungen kann console.log auch in node.js auf das Terminal gedruckt werden. Ein mit Express erstellter Server (zB) kann mit console.log in die Ausgabe-Logger-Datei schreiben.

3
surajck

Es wird verwendet, um (alles, was Sie übergeben) an der Firebug Konsole zu protokollieren. Die Hauptverwendung ist das Debuggen Ihres JavaScript-Codes.

3
Poelinca Dorin

Wenn ich console.log zum Debuggen starte, fühle ich mich beim Webprogrammieren wirklich einfach.

var i;

Wenn ich den Wert von i Laufzeit überprüfen möchte ..

console.log(i);

sie können den aktuellen Wert von i auf der Konsolenregisterkarte von firebug überprüfen. Es wird speziell zum Debuggen verwendet.

3
user1251300

console.log ist speziell eine Methode, mit der Entwickler Code schreiben können, um den Entwicklern unauffällig mitzuteilen, was der Code tut. Es kann verwendet werden, um Sie auf ein Problem aufmerksam zu machen, sollte jedoch nicht den Platz eines interaktiven Debuggers einnehmen, wenn es Zeit für das Debuggen des Codes ist. Aufgrund seiner asynchronen Natur müssen die protokollierten Werte nicht unbedingt den Wert darstellen, als die Methode aufgerufen wurde.

Kurz gesagt: Protokollieren Sie Fehler mit console.log (falls verfügbar) und beheben Sie die Fehler mit dem Debugger Ihrer Wahl: Firebug , WebKit Developer Tools (integriert in Safari = und Chrome ), IE Developer Tools oder Visual Studio.

3
outis

In Java Skripten gibt es keine Eingabe- und Ausgabefunktionen. Zum Debuggen wird die Methode code console.log () verwendet. Dies ist eine Methode zum Protokollieren. Es wird unter Konsolenprotokoll (Entwicklungswerkzeuge) gedruckt.

Es ist nicht in IE8 und darunter vorhanden, bis Sie das Entwicklungstool IE öffnen.

1
NavyaKumar