it-swarm.com.de

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

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

Bitte beachten Sie, dass die JavaScript-Konsole nicht mit dem JavaScript-Debugger identisch ist. Sie haben unterschiedliche Syntaxen AFAIK, daher funktioniert der Befehl print im JavaScript-Debugger hier nicht. In der JavaScript-Konsole sendet print() den Parameter an den Drucker.

456
Tamas Czinege

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

 Javascript: console.log (2); 

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

589
Sergey Ilinsky

Sie können Andru's Idee verbessern und ein Skript schreiben, das Konsolenfunktionen erstellt, wenn diese nicht existieren:

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 nach Protokoll, Info, Fehler oder Warnung gefiltert werden können) und verursachen keine Fehler, wenn die Konsole nicht verfügbar ist. Diese Funktionen funktionieren in Firebug- und Chrome Konsolen.

166
Delan Azabani

Füge einfach ein cooles Feature hinzu, das viele Entwickler vermissen:

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

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:

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

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

Sowohl %o als auch new Error().stack sind in Chrome und Firefox verfügbar!

Auch für Stack-Traces in Firefox verwenden:

console.trace();

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

Viel Spaß beim Hacken!

UPDATE: Einige Bibliotheken wurden von schlechten Leuten geschrieben, die das Objekt console für ihre eigenen Zwecke neu definieren. Um den ursprünglichen Browser console nach dem Laden der Bibliothek wiederherzustellen, verwenden Sie:

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

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

47
gavenkoa

Hier ist ein kurzes Skript, das prüft, ob die Konsole verfügbar ist. Wenn dies nicht der Fall ist, 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!

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

Nur eine kurze Warnung - wenn Sie in Internet Explorer testen möchten, ohne alle console.log () zu entfernen, müssen Sie Firebug Lite verwenden, sonst werden einige nicht besonders freundliche Fehler angezeigt.

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

17
Andru

Zusätzlich zu Delan Azabanis Antwort teile ich gerne meinen console.js und verwende ihn für den gleichen Zweck. Ich erstelle eine Noop-Konsole mit einer Reihe von Funktionsnamen, was meiner Meinung nach ein sehr praktischer Weg ist, und ich habe mich um den Internet Explorer gekümmert, der eine console.log -Funktion, aber keinen console.debug hat. :

// 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() {};
  }
}
14
Tim Büthe

Oder nutzen Sie diese Funktion:

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

Hier ist meine Console-Wrapper-Klasse. Es gibt mir auch Scope-Output, um das Leben einfacher zu machen. Beachten Sie die Verwendung von localConsole.debug.call(), damit localConsole.debug im Bereich der aufrufenden Klasse ausgeführt wird und Zugriff auf ihre Methode toString gewährt.

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 gibt 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
7
Bruce

Persönlich benutze ich dies, was ähnlich zu tarek11011 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 wichtigste Punkt ist, dass es eine gute Idee ist, sich zumindest ein wenig anders anzumelden, als nur console.log() direkt in Ihren JavaScript-Code zu stecken. Wenn Sie dies vergessen und es sich auf einer Produktionsstätte befindet, kann es möglicherweise zum Bruch kommen den gesamten JavaScript-Code für diese Seite.

6
cwd

Sie könnten console.log() verwenden, wenn Sie in dem von Ihnen verwendeten Programmiersoftware-Editor einen Debug-Code haben und die Ausgabe wahrscheinlich den besten Editor für mich (Google Chrome) darstellt. Drücken Sie einfach F12 und drücken Sie die Registerkarte Konsole. Sie werden das Ergebnis sehen. Fröhliches Codieren. :)

4
stryker

Ich hatte viele Probleme damit, dass Entwickler ihre Konsolenanweisungen eingecheckt haben. (). Und ich mag das Debuggen von Internet Explorer wirklich nicht, trotz der fantastischen Verbesserungen von Internet Explorer 1 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 dem Internet Explorer auch die Funktionen console. () Hinzugefügt (stattdessen wird eine Warnung () angezeigt).

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

Beispiel Verwendung:

    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, werden Sie die console.examine () -Funktion entdecken. Ich habe es vor Jahren erstellt, damit ich in bestimmten Bereichen des Produkts Debug-Code hinterlassen kann, um die Fehlerbehebung bei QA /Kundenproblemen zu unterstützen. Zum Beispiel würde ich die folgende Zeile in einem veröffentlichten Code belassen:

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

Geben Sie dann im veröffentlichten Produkt Folgendes in die Konsole ein (oder in die Adressleiste mit dem Präfix "Javascript:"):

    top.__examine_someLabel = true;

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

4
wasatchwizard

Einfaches 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
        };
    }
}());
3
dbrin
console.debug("");

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

enter image description here

2
Nicholas Smith

Die Ideen von Delan und Andru weiter verbessern (weshalb diese Antwort eine überarbeitete Version ist); console.log ist wahrscheinlich vorhanden, während die anderen Funktionen möglicherweise nicht vorhanden sind. Die Standardzuordnung entspricht also der Funktion von 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 Möglichkeiten:

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

Diese Funktionen protokollieren verschiedene Arten von Elementen (die nach Protokoll, Info, Fehler oder Warnung gefiltert werden können) und verursachen keine Fehler, wenn die Konsole nicht verfügbar ist. Diese Funktionen funktionieren in Firebug- und Chrome Konsolen.

1
vogomatix