Was ist console.log?

414

Was nützt es console.log?

Bitte erläutern Sie anhand eines Codebeispiels, wie es in JavaScript verwendet wird.

Mihir
quelle

Antworten:

454

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

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

Sie würden dann sehen #someButton was clicked auf der Registerkarte "Konsole" von Firebug (oder in der Konsole eines anderen Tools - z. B. dem Webinspektor von Chrome) sehen, wann Sie auf die Schaltfläche klicken würden.

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 nützlich, da Sie Ihren Debugging-Code bei der Bereitstellung in der Produktion nicht entfernen müssen:

if (window.console && window.console.log) {
  // console is available
}
Jan Hančič
quelle
17
In den Entwicklertools von Google Chrome ist auch eine Konsole integriert.
RobertPitt
8
"Dies ist nützlich, da Sie Ihren Debugging-Code bei der Bereitstellung in der Produktion nicht entfernen müssen." <- Was passiert, wenn ein Endbenutzer Firebug öffnet?
AbdullahC
6
Es ist auch nützlich, wenn der IE keinen Fehler für eine nicht definierte Konsole auslöst
Alan Whitelaw
4
Imho, besser als jedes Mal zu überprüfen, ob console.log verfügbar ist, ist es besser, so etwas zu haben: if (typeof (console) == 'undefined') {console = {'log': function () {return}}} In In diesem Fall können Sie console.log jedes Mal schreiben, wenn Sie es benötigen, ohne das Vorhandensein zu überprüfen!
Enrico Carlesso
12
if (console.log)(oder sogar if (console && console.log)) wird immer noch einen Fehler auslösen, wenn die Konsole nicht verfügbar ist. Sie sollten window.console(wie windowgarantiert) verwenden und jeweils nur eine Tiefenstufe prüfen.
Tgr
226

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

Feuerfuchs

http://getfirebug.com/

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

Safari und Chrome

Grundsätzlich 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 Kompatibilitätsmodi verwenden können, um IE7 und IE8 in IE9 oder IE10 zu debuggen

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-Lesezeichen

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

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

Oper

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

Mit iOS 6 können Sie die Konsole jetzt ü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-Inspektor mit Ihrem Gerät kommunizieren kann.

Windows Phone, Android

Beide haben keine eingebaute Konsole und keine Lesezeichenfunktion. Wir verwenden also 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 über das praktische Browser-Plugin auf jedem Gerät auf Web Inspector-Tools und die Konsole zuzugreifen.


Ältere Browserprobleme

Zuletzt stürzen ältere Versionen des 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 Codefragment oben in Ihrem Code:

 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 aufgerufenen leeren Funktion festgelegt log. Auf diese Weise sind window.console und window.console.log niemals wirklichundefined.

Fresheyeball
quelle
26
Korrigieren Sie mich, wenn Sie falsch liegen, aber ich denke, dass Firebug in Firefox nicht erforderlich ist, um die Konsole anzuzeigen. Klicken Sie einfach auf Strg + Umschalt + J (
Extras
4
@ Dane411 das ist wahr, aber Firebug ist besser und wird häufiger verwendet.
Fresheyeball
3
@Fresheyeball Jemand muss den ganzen Müll beseitigen, aber ich denke, dass es irgendwann weniger interessant wird, diese Wiederholungen zu ernten und die Community tatsächlich sauber zu halten.
Andlrc
2
Wer diese Antwort abgelehnt hat, kommentiert dies bitte. Downvotes ohne Kommentare sind nutzlos
Fresheyeball
Vor window.console.log befand sich window.dump. Es ist besser als leere Protokollfunktion
OCTAGRAM
100

Sie können alle an der Konsole protokollierten Nachrichten anzeigen, wenn Sie ein Tool wie Firebug verwenden, um Ihren Code zu überprüfen. Angenommen, Sie tun dies:

console.log('Testing console');

Wenn Sie in Firebug auf die Konsole zugreifen (oder auf ein Tool, mit dem Sie Ihren Code überprüfen möchten), wird die Meldung angezeigt, die Sie der Funktion zum Protokollieren 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.

Fibericon
quelle
10
Vergessen Sie nicht, es zuerst zu definieren, um Fehler im IE zu vermeiden: stackoverflow.com/a/7585409/318765
mgutt
83

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

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

Sie können verschiedene Methoden verwenden. Beachten Sie jedoch, dass Firebug geöffnet sein muss, damit es in Firefox funktioniert. 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, einschließlich des Prototyps für das Objekt (immer interessant, um 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 für jeden Befehl mit unterschiedlichen Logos angezeigt.

Sie können auch die console.profile(profileName);Profilerstellung für eine Funktion, ein Skript usw. starten und diese dann mit beendenconsole.profileEnd(profileName); erstellen. Beenden Sie und es wird auf der Registerkarte "Profile" in Chrome angezeigt (mit FF nicht bekannt).

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

Hoffe das hilft!

Fred
quelle
1
Warum ist console.log("x:", x)besser als console.log("x:" + x)? Ist es weniger fehleranfällig, da a ,leichter zu lesen ist als a +?
Kevin Meredith
Meiner Meinung nach ist es etwas einfacher zu lesen, wenn Sie viele verschiedene Dinge ausgeben. In diesem Fall sollte es wahrscheinlich +streng verwendet werden, aber ich wollte zeigen, dass Sie auch Kommas in den Konsolenfunktionen verwenden können. Außerdem werden Probleme vermieden, wenn beide Variablen Ganzzahlen oder Arrays sind.
Fred
5
console.log("x:", x)ist deutlich besser, denn wenn xes sich um ein Objekt oder Array (oder etwas anderes als eine Zeichenfolge) handelt, wird es korrekt angezeigt, ohne dass es in eine Zeichenfolge konvertiert wird.
Josef Kufner
34

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")
}

Sie brechen Ihren Code also nicht, wenn er nicht verfügbar ist.

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

if (!window.console) { window.console = { log: function(){} }; }
Baptiste Pernet
quelle
18
Darf ich empfehlen, if(!window.console){ window.console = function(){}; }stattdessen an einer Stelle zu arbeiten und dann console.log wie gewohnt zu verwenden.
Fresheyeball
23

console.loghat nichts mit jQuery zu tun. Es handelt sich um ein allgemeines Objekt / eine Methode, die von Debuggern (einschließlich Chrome-Debugger und Firebug) bereitgestellt wird und die es einem Skript ermöglicht, Daten (oder Objekte in den meisten Fällen) in der JavaScript-Konsole zu protokollieren.

QUentin
quelle
19

console.logProtokolliert Debug-Informationen in einigen Browsern an der Konsole (Firefox mit installiertem Firebug, Chrome, IE8, alles mit installiertem Firebug Lite). 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 normalerweise bei der Verwendung mit jQuery ausgeführt werden:

  • Installieren Sie die FireQuery- Erweiterung für Firebug. Dies macht unter anderem die Protokollierung von jQuery-Objekten schöner.

  • Erstellen Sie einen Wrapper, der eher den Konventionen für den Verkettungscode von jQuery entspricht.

Dies bedeutet normalerweise ungefähr so:

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

die du dann gerne aufrufen kannst

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

zum einfachen Überprüfen in jQuery-Ketten.

Tgr
quelle
16

console.log hat nichts mit jQuery zu tun.

Es protokolliert eine Nachricht an eine Debugging-Konsole wie Firebug.

SLaks
quelle
16

Ein Punkt der Verwirrung ist manchmal, dass Sie, um eine Textnachricht zusammen mit dem Inhalt eines Ihrer Objekte mit console.log zu protokollieren, jedes der beiden als ein anderes Argument übergeben müssen. Dies bedeutet, dass Sie sie durch Kommas trennen müssen, da dies implizit die .toString()Methode Ihres Objekts aufrufen würde, wenn Sie den Operator + zum Verketten der Ausgaben verwenden würden . Dies wird in den meisten Fällen nicht explizit überschrieben und die von implementierte Standardimplementierung Objectliefert keine nützlichen Informationen.

Beispiel für einen Versuch 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 Folgendes:

>>> 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.

Thalis K.
quelle
13

Verwenden console.logSie diese Option, um Ihrer Seite Debugging-Informationen hinzuzufügen.

Viele Leute verwenden alert(hasNinjas)für diesen Zweck, aber es console.log(hasNinjas)ist einfacher, damit zu arbeiten. Wenn Sie eine Warnung verwenden, wird ein modales Dialogfeld angezeigt, das die Benutzeroberfläche blockiert.

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

Mark Byers
quelle
12

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

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

Sie verwenden es, um JavaScript-Code entweder mit Firebug for Firefox oder mit der JavaScript-Konsole in WebKit- Browsern zu 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 .

jondavidjohn
quelle
3
Ein praktischer Tipp ... Ich füge immer Folgendes in eine global zugängliche Javascript-Datei ein : if (!window.console) { window.console = { log : function() {} }; }. Auf diese Weise können Sie vergessen, die gelegentliche Debug-Anweisung zu entfernen.
Roufamatic
@roufamatic Ich weiß nicht ... das Hinzufügen von Code, um mit Code umzugehen, der nicht dazu gehört, scheint eine ziemlich schreckliche Lösung zu sein ... besonders wenn das Finden / Ersetzen so einfach ist ...
jondavidjohn
10

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

Harlo Holmes
quelle
2
Es ist nicht so, dass das Konsolenprotokoll unterbrochen wird, wenn Sie einen Windows-Computer verwenden, aber es wird Ihre Site beschädigen, wenn Sie Internet Explorer verwenden.
Kris Hollenbeck
Ich denke, dass der Blog, auf den in der Antwort verwiesen wird, nicht mehr existiert.
Tsundoku
Der ursprüngliche Link ist tot. Ich habe eine Kopie des Webarchivs gefunden.
Alex
8

In den frühen Tagen wurde das JS-Debugging über die alert()Funktion durchgeführt - jetzt ist es eine veraltete Praxis.

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

Das Konsolenobjekt ist eine Erweiterung des DOM.

Das 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()die Javascript-Datei auf dem Produktionsserver belässt .

jjpcondor
quelle
5

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

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

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, die Ihnen den Zugriff auf die JavaScript-Konsole erleichtern, basierend auf dem von Ihnen verwendeten Browser:

Tastaturkürzel für die Chrome-Konsole

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

Tastaturkürzel für die Firefox-Konsole

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

Tastaturkürzel für die Internet Explorer-Konsole

F12 Schlüssel

Tastaturkürzel für die Safari-Konsole

Cmd+ Option+C

S. Mayol
quelle
4

console.logInsbesondere ist dies eine Methode für Entwickler, um Code zu schreiben, um die Entwickler unauffällig darüber zu informieren, 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 ist, den Code zu debuggen. Aufgrund seiner asynchronen Natur stellen die protokollierten Werte nicht unbedingt den Wert dar, 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 (in Safari und Chrome integriert ), IE Developer Tools oder Visual Studio.

outis
quelle
4

Ich fühle mich wirklich einfach in der Webprogrammierung, wenn ich mit dem console.logDebuggen beginne .

var i;

Wenn ich den Wert der iLaufzeit überprüfen möchte ..

console.log(i);

Sie können den aktuellen Wert von iauf der Registerkarte "Konsole" von firebug überprüfen . Es wird speziell zum Debuggen verwendet.

aksu
quelle
4

Es wird verwendet, um sich bei der Firebug- Konsole anzumelden (alles, was Sie übergeben) . Die Hauptverwendung wäre das Debuggen Ihres JavaScript-Codes.

Poelinca Dorin
quelle
4

Neben den oben genannten Verwendungen console.logkann auch auf dem Terminal in gedruckt werden node.js. Ein mit Express erstellter Server (z. B.) kann console.logzum Schreiben in die Ausgabeprotokolldatei verwenden.

surajck
quelle
2

In Java-Skripten gibt es keine Eingabe- und Ausgabefunktionen. Zum Debuggen wird also die Methode console console.log () verwendet. Dies ist eine Methode zur Protokollierung. Es wird unter dem Konsolenprotokoll (Entwicklungstools) gedruckt.

Es ist in IE8 und darunter erst vorhanden, wenn Sie das IE-Entwicklungstool öffnen.

NavyaKumar
quelle
2

Dies ist nichts mit der jQuery zu tun. Das console.log()verweist auf die Protokollfunktion des Konsolenobjekts, die Methoden zum Protokollieren von Informationen an der Konsole des Browsers bereitstellt. Diese Methoden dienen nur zu Debugging-Zwecken und sollten nicht als Grundlage für die Präsentation von Informationen für Endbenutzer dienen.

Aravinda Meewalaarachchi
quelle