Wie drucke ich Debug-Nachrichten in der Google Chrome JavaScript Console?
Beachten Sie, dass die JavaScript-Konsole nicht mit dem JavaScript-Debugger identisch ist. sie haben unterschiedliche Syntaxen AFAIK, so dass der Druckbefehl in JavaScript - Debugger wird hier nicht funktionieren. In der JavaScript-Konsole print()
wird der Parameter an den Drucker gesendet.
javascript
console
debugging
google-chrome
Tamas Czinege
quelle
quelle
console.log()
ist großartig für das Debuggen von JS ... Ich vergesse oft, es in der Praxis zu verwenden.console.log()
Code vor der Bereitstellung aus dem Produktionscode entfernt werden.Console.Log
'sollten vor der Bereitstellung aus dem Produktionscode entfernt werden. Andernfalls werden diese Nachrichten in der JavaScript-Konsole Ihrer Benutzer protokolliert. Es ist zwar unwahrscheinlich, dass sie es sehen, es beansprucht jedoch Speicherplatz auf ihrem Gerät. Abhängig vom Inhalt des Protokolls erfahren Sie möglicherweise, wie Sie Ihre App hacken / zurückentwickeln sollen.Um Andru's Idee zu verbessern, können Sie ein Skript schreiben, das Konsolenfunktionen erstellt, wenn diese nicht vorhanden sind:
Verwenden Sie dann eine der folgenden Methoden:
Diese Funktionen protokollieren verschiedene Arten von Elementen (die basierend auf Protokoll, Informationen, Fehlern oder Warnungen gefiltert werden können) und verursachen keine Fehler, wenn die Konsole nicht verfügbar ist. Diese Funktionen funktionieren in Firebug- und Chrome-Konsolen.
quelle
if (!window.console) {
und dann alles in Klammern setzen würden? Im Moment evaluierst du das gleiche Zeug viermal.Fügen Sie einfach eine coole Funktion hinzu, die viele Entwickler vermissen:
Dies ist der magische
%o
Dump- anklickbare und tief durchsuchbare Inhalt eines JavaScript-Objekts.%s
wurde nur für eine Aufzeichnung gezeigt.Auch das ist cool:
Dies gibt eine Java-ähnliche Stapelverfolgung bis zum Punkt des
new Error()
Aufrufs (einschließlich Pfad zur Datei und Zeilennummer !).Beide
%o
undnew Error().stack
sind in Chrome und Firefox verfügbar!Verwenden Sie auch für Stapelspuren in Firefox:
Wie https://developer.mozilla.org/en-US/docs/Web/API/console sagt.
Viel Spaß beim Hacken!
UPDATE : Einige Bibliotheken werden von schlechten Personen geschrieben, die das
console
Objekt für ihre eigenen Zwecke neu definieren .console
Verwenden Sie Folgendes, um den ursprünglichen Browser nach dem Laden der Bibliothek wiederherzustellen :Siehe Frage zum Stapelüberlauf Wiederherstellen von console.log () .
quelle
Nur eine kurze Warnung: Wenn Sie in Internet Explorer testen möchten, ohne alle console.log () zu entfernen, müssen Sie Firebug Lite verwenden , da sonst einige nicht besonders benutzerfreundliche Fehler auftreten.
(Oder erstellen Sie Ihre eigene console.log (), die nur false zurückgibt.)
quelle
console
Objekt erstellt und existiert, bis Sie diese Browserinstanz schließen.Hier ist ein kurzes Skript, das prüft, ob die Konsole verfügbar ist. Ist dies nicht der Fall , wird versucht, Firebug zu laden, und wenn Firebug nicht verfügbar ist, wird Firebug Lite geladen . Jetzt können Sie
console.log
in jedem Browser verwenden. Genießen!quelle
Zusätzlich zu Delan Azabanis Antwort teile ich gerne meine
console.js
und verwende sie für den gleichen Zweck. Ich erstelle eine Noop-Konsole mit einer Reihe von Funktionsnamen, was meiner Meinung nach eine sehr bequeme Möglichkeit ist, und habe mich um den Internet Explorer gekümmert, der eineconsole.log
Funktion hat, aber neinconsole.debug
:quelle
Oder nutzen Sie diese Funktion:
quelle
console.constructor === Object && (log = m => console.log(m))
Hier ist meine Konsolen-Wrapper-Klasse. Es gibt mir auch Scope-Ausgabe, um das Leben einfacher zu machen. Beachten Sie die Verwendung von
localConsole.debug.call()
so,localConsole.debug
die im Bereich der aufrufenden Klasse ausgeführt wird und Zugriff auf ihretoString
Methode bietet .Dies ergibt eine Ausgabe wie in Firebug :
Oder Chrome:
quelle
Persönlich benutze ich dies, das den von tarek11011 ähnlich ist:
Der Hauptpunkt ist, dass es eine gute Idee ist, sich zumindest ein wenig zu protokollieren, als nur
console.log()
direkt in Ihren JavaScript-Code einzusteigen. Wenn Sie ihn vergessen und sich auf einer Produktionssite befinden, kann möglicherweise der gesamte JavaScript-Code beschädigt werden für diese Seite.quelle
if(windows.console) console.log(msg)
?window.console
was meinen Sie. Der Versuch wäre nur dann nützlich, wenn ein Fehler ausgelöst wurde (wenn console.log keine Funktion war), da die Konsole neu definiert wurde. Tunwindow.console && window.console.log instanceof Function
wäre nützlicher.Sie können verwenden,
console.log()
wenn Sie einen debuggten Code in Ihrem Programmiersoftware-Editor haben und die Ausgabe wahrscheinlich der beste Editor für mich ist (Google Chrome). Drücken Sie einfach F12und drücken Sie die Registerkarte Konsole. Sie werden das Ergebnis sehen. Viel Spaß beim Codieren. :) :)quelle
Ich hatte viele Probleme mit Entwicklern, die ihre Konsolen. () -Anweisungen eincheckten. Und ich mag es wirklich nicht, Internet Explorer zu debuggen, trotz der fantastischen Verbesserungen von Internet Explorer 10 und Visual Studio 2012 usw.
Also habe ich das Konsolenobjekt selbst überschrieben ... Ich habe ein __localhost-Flag hinzugefügt, das Konsolenanweisungen nur auf localhost zulässt. Ich habe auch Internet Explorer () -Funktionen zum Internet Explorer hinzugefügt (der stattdessen eine Warnung () anzeigt).
Anwendungsbeispiel:
Chrome / Firefox:
Internet Explorer:
Für diejenigen, die sich den Code genau ansehen, finden Sie die Funktion console.examine (). Ich habe dies vor Jahren erstellt, damit ich in bestimmten Bereichen des Produkts Debug-Code hinterlassen kann, um Probleme mit der Qualitätssicherung / dem Kunden zu beheben. Zum Beispiel würde ich die folgende Zeile in einem veröffentlichten Code belassen:
Geben Sie dann vom freigegebenen Produkt Folgendes in die Konsole ein (oder in die Adressleiste mit dem Präfix "Javascript:"):
Dann werden alle protokollierten Anweisungen von console.examine () angezeigt. Es war schon oft eine fantastische Hilfe.
quelle
Simple Internet Explorer 7 und darunter Shim , das die Zeilennummerierung für andere Browser beibehält:
quelle
Mit dieser Methode wird der Text in der Konsole hellblau gedruckt.
quelle
Weitere Verbesserung der Ideen von Delan und Andru (weshalb diese Antwort eine bearbeitete Version ist); console.log ist wahrscheinlich vorhanden, während die anderen Funktionen möglicherweise nicht vorhanden sind. Die Standardzuordnung entspricht also derselben Funktion wie console.log ....
Sie können ein Skript schreiben, das Konsolenfunktionen erstellt, wenn diese nicht vorhanden sind:
Verwenden Sie dann eine der folgenden Methoden:
Diese Funktionen protokollieren verschiedene Arten von Elementen (die basierend auf Protokoll, Informationen, Fehlern oder Warnungen gefiltert werden können) und verursachen keine Fehler, wenn die Konsole nicht verfügbar ist. Diese Funktionen funktionieren in Firebug- und Chrome-Konsolen.
quelle