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

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.

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.

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.

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

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

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

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() {};
  }
}

Oder nutzen Sie diese Funktion:

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}

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

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.

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

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.

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
        };
    }
}());

console.debug("");

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

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.