Wie drucke ich Debug-Meldungen in der JavaScript-Konsole von Google Chrome?

Question

Wie drucke ich Debug-Meldungen in der JavaScript-Konsole von Google Chrome?

Bitte beachten Sie, dass die JavaScript-Konsole nicht dasselbe ist wie der JavaScript-Debugger; sie haben unterschiedliche Syntaxen AFAIK, so dass die drucken Befehl im JavaScript Debugger funktioniert hier nicht. In der JavaScript-Konsole, print() wird der Parameter an den Drucker gesendet.

Answer 1

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

javascript: console.log(2);

gibt erfolgreich eine Meldung an die "JavaScript-Konsole" in Google Chrome aus.

Answer 2

In Weiterentwicklung von Andru's Idee 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 Möglichkeiten:

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

Diese Funktionen protokollieren verschiedene Arten von Elementen (die auf der Grundlage von log, info, error oder warn gefiltert werden können) und verursachen keine Fehler, wenn die Konsole nicht verfügbar ist. Diese Funktionen funktionieren in Firebug- und Chrome-Konsolen.

Answer 3

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 die magische %o abladen anklickbar und tief durchsuchbar Inhalt eines JavaScript-Objekts. %s wurde nur zur Erinnerung gezeigt.

Auch das ist cool:

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

Das ergibt einen Java-ähnlichen Stack-Trace bis zum Punkt der new Error() Aufrufen (einschließlich Pfad zur Datei und Zeilennummer !).

Beide %o y new Error().stack sind in Chrome und Firefox verfügbar!

Auch für Stack Traces in Firefox verwenden:

console.trace();

Como https://developer.mozilla.org/en-US/docs/Web/API/console sagt.

Viel Spaß beim Hacken!

UPDATE : Einige Bibliotheken werden von schlechten Menschen geschrieben, die die console Objekt für ihre eigenen Zwecke zu nutzen. So stellen Sie den ursprünglichen Browser wieder her console nach dem Laden der Bibliothek, verwenden:

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

Siehe Stack Overflow Frage Wiederherstellung console.log() .

Answer 4

Nur eine kurze Warnung - wenn Sie im Internet Explorer testen wollen, ohne alle console.log()'s zu entfernen, müssen Sie Folgendes verwenden Firebug Lite oder Sie erhalten einige nicht besonders freundliche Fehlermeldungen.

(Oder erstellen Sie Ihre eigene console.log(), die einfach false zurückgibt).

Answer 5

Hier ist ein kurzes Skript, das überprüft, ob die Konsole verfügbar ist. Ist dies nicht der Fall, versucht es, die Firebug und wenn Firebug nicht verfügbar ist, wird Firebug Lite geladen. Jetzt können Sie verwenden console.log in jedem Browser. Viel Spaß!

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