Wie drucke ich Debug-Nachrichten in der Google Chrome JavaScript Console?

466

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.

Tamas Czinege
quelle

Antworten:

597

Ausführen des folgenden Codes aus der Adressleiste des Browsers:

Javascript: console.log (2);

druckt die Nachricht erfolgreich in die "JavaScript-Konsole" in Google Chrome.

Sergey Ilinsky
quelle
13
Gerade realisiert, console.log()ist großartig für das Debuggen von JS ... Ich vergesse oft, es in der Praxis zu verwenden.
Ish
Wie lang kann einer dieser "Ausgänge" sein? Upvote übrigens, das war wirklich hilfreich
nbura
3
@dbrin Dies ist in Ordnung für die Entwicklung, jedoch sollte jeglicher console.log()Code vor der Bereitstellung aus dem Produktionscode entfernt werden.
Samuel MacLachlan
2
@Sebas 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.
Samuel MacLachlan
166

Um Andru's Idee zu verbessern, können Sie ein Skript schreiben, das Konsolenfunktionen erstellt, wenn diese nicht vorhanden sind:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

Verwenden Sie dann eine der folgenden Methoden:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

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.

Delan Azabani
quelle
Dank dafür. Wäre der Code nicht enger, wenn Sie das "Wenn" einmal ausführen if (!window.console) {und dann alles in Klammern setzen würden? Im Moment evaluierst du das gleiche Zeug viermal.
Dan Rosenstark
Nein, b / c nur window.console zu haben, garantiert nicht, dass Sie ein window.console.log oder .warn & c haben
Paul
18
Seien Sie vorsichtig, denn wenn dieses Skript mit der Seite geladen wird und das Konsolenfenster nicht geöffnet ist, wird die Dummy-Konsole erstellt, die verhindern kann, dass die echte Konsole funktioniert, wenn Sie die Konsole nach dem Laden der Seite öffnen . (Zumindest ist dies in älteren Versionen von Firefox / Firebug und Chrome der Fall)
CWD
1
Ich habe Ergänzungen dazu, siehe meine Antwort unten
Tim Büthe
1
Nein, dies führt nicht dazu, dass Chrome mit einem TypeError abgebrochen wird. Bei der oben verlinkten Frage geht es darum, damit anzurufen . Der obige Code macht das nicht und funktioniert gut in Chrome
gman
47

Fügen Sie einfach eine coole Funktion hinzu, die viele Entwickler vermissen:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

Dies ist der magische %oDump- anklickbare und tief durchsuchbare Inhalt eines JavaScript-Objekts. %swurde nur für eine Aufzeichnung gezeigt.

Auch das ist cool:

console.log("%s", new Error().stack);

Dies gibt eine Java-ähnliche Stapelverfolgung bis zum Punkt des new Error()Aufrufs (einschließlich Pfad zur Datei und Zeilennummer !).

Beide %ound new Error().stacksind in Chrome und Firefox verfügbar!

Verwenden Sie auch für Stapelspuren in Firefox:

console.trace();

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 consoleObjekt für ihre eigenen Zwecke neu definieren . consoleVerwenden Sie Folgendes, um den ursprünglichen Browser nach dem Laden der Bibliothek wiederherzustellen :

delete console.log;
delete console.warn;
....

Siehe Frage zum Stapelüberlauf Wiederherstellen von console.log () .

Gavenkoa
quelle
3
Eine andere habe ich gerade entdeckt: console.dir developer.mozilla.org/en-US/docs/Web/API/console.dir
dbrin
17

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

Andru
quelle
2
Ich vermeide browserübergreifende Fehler wie diese: if (console) console.log ()
Craig Wohlfeil
Wenn Sie die Entwicklertools in IE (F12) öffnen, wird das consoleObjekt erstellt und existiert, bis Sie diese Browserinstanz schließen.
Tim Büthe
17

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.login jedem Browser verwenden. Genießen!

if (!window['console']) {

    // Enable console
    if (window['loadFirebugConsole']) {
        window.loadFirebugConsole();
    }
    else {
        // No console, use Firebug Lite
        var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
            if (F.getElementById(b))
                return;
            E = F[i+'NS']&&F.documentElement.namespaceURI;
            E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
            E[r]('id', b);
            E[r]('src', I + g + T);
            E[r](b, u);
            (F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
            E = new Image;
            E[r]('src', I + L);
        };
        firebugLite(
            document, 'createElement', 'setAttribute', 'getElementsByTagName',
            'FirebugLite', '4', 'firebug-lite.js',
            'releases/lite/latest/skin/xp/sprite.png',
            'https://getfirebug.com/', '#startOpened');
    }
}
else {
    // Console is already available, no action needed.
}
Vegar
quelle
14

Zusätzlich zu Delan Azabanis Antwort teile ich gerne meine console.jsund 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 eine console.logFunktion hat, aber nein console.debug:

// Create a noop console object if the browser doesn't provide one...
if (!window.console){
  window.console = {};
}

// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
  if (!window.console.debug && typeof window.console.log !== 'undefined') {
    window.console.debug = window.console.log;
  }
}

// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

for (var i = 0; i < names.length; ++i){
  if(!window.console[names[i]]){
    window.console[names[i]] = function() {};
  }
}
Tim Büthe
quelle
12

Oder nutzen Sie diese Funktion:

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}
Tarek Saied
quelle
console.constructor === Object && (log = m => console.log(m))
Josh Habdas
7

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.debugdie im Bereich der aufrufenden Klasse ausgeführt wird und Zugriff auf ihre toStringMethode bietet .

localConsole = {

    info: function(caller, msg, args) {
        if ( window.console && window.console.info ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.info.apply(console, params);
        }
    },

    debug: function(caller, msg, args) {
        if ( window.console && window.console.debug ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.debug.apply(console, params);
        }
    }
};

someClass = {

    toString: function(){
        return 'In scope of someClass';
    },

    someFunc: function() {

        myObj = {
            dr: 'zeus',
            cat: 'hat'
        };

        localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
    }
};

someClass.someFunc();

Dies ergibt eine Ausgabe wie in Firebug :

In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}

Oder Chrome:

In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object
Bruce
quelle
6

Persönlich benutze ich dies, das den von tarek11011 ähnlich ist:

// Use a less-common namespace than just 'log'
function myLog(msg)
{
    // Attempt to send a message to the console
    try
    {
        console.log(msg);
    }
    // Fail gracefully if it does not exist
    catch(e){}
}

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.

cwd
quelle
warum nicht if(windows.console) console.log(msg)?
CJStuart
window.consolewas 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. Tun window.console && window.console.log instanceof Functionwäre nützlicher.
Aram Kocharyan
4

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

Stryker
quelle
4

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

// Console extensions...
(function() {
    var __localhost = (document.location.host === "localhost"),
        __allow_examine = true;

    if (!console) {
        console = {};
    }

    console.__log = console.log;
    console.log = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__log === "function") {
                console.__log(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__info = console.info;
    console.info = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__info === "function") {
                console.__info(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__warn = console.warn;
    console.warn = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__warn === "function") {
                console.__warn(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__error = console.error;
    console.error = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__error === "function") {
                console.__error(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__group = console.group;
    console.group = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__group === "function") {
                console.__group(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert("group:\r\n" + msg + "{");
            }
        }
    };

    console.__groupEnd = console.groupEnd;
    console.groupEnd = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
                console.__groupEnd(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg + "\r\n}");
            }
        }
    };

    /// <summary>
    /// Clever way to leave hundreds of debug output messages in the code,
    /// but not see _everything_ when you only want to see _some_ of the
    /// debugging messages.
    /// </summary>
    /// <remarks>
    /// To enable __examine_() statements for sections/groups of code, type the
    /// following in your browser's console:
    ///       top.__examine_ABC = true;
    /// This will enable only the console.examine("ABC", ... ) statements
    /// in the code.
    /// </remarks>
    console.examine = function() {
        if (!__allow_examine) {
            return;
        }
        if (arguments.length > 0) {
            var obj = top["__examine_" + arguments[0]];
            if (obj && obj === true) {
                console.log(arguments.splice(0, 1));
            }
        }
    };
})();

Anwendungsbeispiel:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

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:

    function doSomething(arg1) {
        // ...
        console.examine("someLabel", arg1);
        // ...
    }

Geben Sie dann vom freigegebenen Produkt Folgendes in die Konsole ein (oder in die Adressleiste mit dem Präfix "Javascript:"):

    top.__examine_someLabel = true;

Dann werden alle protokollierten Anweisungen von console.examine () angezeigt. Es war schon oft eine fantastische Hilfe.

wasatchwizard
quelle
Danke für diese wundervolle Idee. War ziemlich inspirierend. Von Ihrer Prüfungsfunktion ging ich unabsichtlich auf die Idee des Spielraums für das Debuggen von PHP ein. mydebug_on ('somescope'), mydebug ('somescope', $ data) usw. Jetzt kann ich das selektive Debuggen und Protokollieren von Themen für PHP-Code ein- und ausschalten. Und genau wie normale Linux-Programme kann es sich in einem normalen, ausführlichen usw. Sprachgeschmack anmelden. Eine ganz schöne Idee!
Johan
3

Simple Internet Explorer 7 und darunter Shim , das die Zeilennummerierung für andere Browser beibehält:

/* Console shim */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());
dbrin
quelle
2
console.debug("");

Mit dieser Methode wird der Text in der Konsole hellblau gedruckt.

Geben Sie hier die Bildbeschreibung ein

Nicholas Smith
quelle
1

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:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log;  // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log

Verwenden Sie dann eine der folgenden Methoden:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

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.

Vogomatix
quelle