Schlechte Idee, "console.log ()" - Aufrufe in Ihrem Produktions-JavaScript-Code zu belassen?

77

Ich habe eine Reihe von console.log()Aufrufen in meinem JavaScript.

Sollte ich sie auskommentieren, bevor ich sie für die Produktion bereitstelle?

Ich möchte sie einfach dort lassen, damit ich mir nicht die Mühe machen muss, die Kommentare später erneut hinzuzufügen, wenn ich weitere Fehlerbehebungen vornehmen muss. Ist das eine schlechte Idee?

Charlie Kotter
quelle
1
Für diejenigen, die nach der Angular-Version dieser Frage suchen
rmcsharry

Antworten:

119

Dies führt zu Javascript-Fehlern und beendet die Ausführung des Javascript-Blocks, der den Fehler enthält.

Sie können jedoch eine Dummy-Funktion definieren, die nicht aktiviert ist, wenn Firebug nicht aktiv ist:

if(typeof console === "undefined") {
    console = { log: function() { } };
}

Wenn Sie andere Methoden als verwenden log, müssen Sie diese ebenfalls entfernen.

Jason Creighton
quelle
Vielen Dank. Das sieht nach einer guten Problemumgehung aus. Lass mich sehen, ob ich es verstehe. Sie sagen, wenn die Konsole undefiniert ist, setzen Sie die Konsole auf eine leere Funktion. Ich verstehe die Doppelpunktsyntax nach 'log' nicht. Was macht das und warum steht nach "console =" alles in geschweiften Klammern?
Charlie Kotter
2
Die geschweiften Klammern definieren ein Objektliteral: developer.mozilla.org/en/Core_JavaScript_1.5_Guide/… und das Bit "function () {}" definiert eine anonyme Funktion, die keine Argumente akzeptiert und nichts tut. (Es funktioniert immer noch, "console.log (foo)" mit einem Argument aufzurufen, da es JS egal ist, ob Sie eine Funktion mit zu vielen oder zu wenigen Argumenten aufrufen.)
Jason Creighton
Verstanden. Danke auch für den Link.
Charlie Kotter
1
Ausgezeichnete Lösung Mann !! :-) Ich hatte neulich gerade dieses Problem. Meine Seite funktionierte nur in FF, wenn FireBug aktiviert war, und wurde bei bestimmten Aktionen im IE zufällig angehalten. Ich war wie WTF!?! Und dann wurde mir klar, dass ich noch die Aufrufe von console.log hatte und sie durchgehen und entfernen musste. Ich werde Ihre Lösung wahrscheinlich jetzt zu meiner Haupt-JS-Datei hinzufügen und muss mich nie wieder um dieses unglückliche Szenario kümmern.
KyleFarris
6
Ich habe ein kleines (Unit-getestetes) Projekt, das Ihnen dabei hilft, genau dies mit verschiedenen Konsolenmethoden in möglichst wenig Code zu tun. Es befindet sich hier: github.com/andyet/ConsoleDummy.js
Henrik Joreteg
38

Wie andere bereits darauf hingewiesen haben, führt das Belassen in einigen Browsern zu Fehlern. Diese Fehler können jedoch durch Einfügen einiger Stubs behoben werden.

Ich würde sie jedoch nicht nur auskommentieren, sondern diese Zeilen sofort entfernen. Es scheint nur schlampig, etwas anderes zu tun. Vielleicht bin ich pedantisch, aber ich denke nicht, dass "Produktions" -Code überhaupt "Debug" -Code enthalten sollte, selbst in kommentierter Form. Wenn Sie überhaupt Kommentare hinterlassen, sollten diese Kommentare beschreiben, was der Code tut oder welche Gründe dahinter stehen - keine Blöcke mit deaktiviertem Code. (Obwohl die meisten Kommentare durch Ihren Minimierungsprozess automatisch entfernt werden sollten. Sie minimieren, richtig?)

Außerdem kann ich mich in einigen Jahren der Arbeit mit JavaScript nicht erinnern, jemals zu einer Funktion zurückgekehrt zu sein und gesagt zu haben: "Gee, ich wünschte, ich hätte diese console.logs hier an Ort und Stelle gelassen!" Wenn ich mit der Arbeit an einer Funktion "fertig" bin und später darauf zurückkommen muss, komme ich im Allgemeinen zurück, um ein anderes Problem zu beheben. Was auch immer dieses neue Problem ist, wenn die console.logs aus einer früheren Arbeitsrunde hilfreich gewesen sein könnten, hätte ich das Problem beim ersten Mal entdeckt. Mit anderen Worten, wenn ich auf etwas zurückkomme, benötige ich wahrscheinlich nicht genau die gleichen Debug-Informationen wie bei früheren Gelegenheiten.

Nur meine zwei Cent ... Viel Glück!

Chris Nielsen
quelle
1
Das Problem tritt häufig während des Produktionszyklus auf, wenn etwas debuggt oder getestet wird. Die Leute sehen es außerhalb des Entwicklungsteams, die keine Entwicklungskonsole haben. Meine persönliche Präferenz ist es, die App nicht auf ihnen sterben zu lassen, damit wir keine Anrufe wie "Ihr neuer Code tut nichts für mich" erhalten.
Dimitar Christoff
10
Permanente Debug-Zeilen sind fantastisch. Sie bedeuten, dass Sie sich oft nicht nach der Ursache eines Fehlers umsehen müssen, sondern sofort sehen können, was passiert. Es gibt viele Codeabschnitte, in denen eine Protokollanweisung keinen signifikanten Leistungsunterschied bewirkt.
Casebash
4
Eine gute Protokollierung sollte für eine Vielzahl von Zwecken nützlich sein. Die Aussage, dass log () -Anweisungen nur zum Debuggen eines Problems nützlich waren, erinnert mich an die Java-Protokollierung von Personen, die nicht wissen, wie man eine ordnungsgemäße Protokollierung schreibt.
Thomas W
7
Kurz gesagt: Protokollieren Sie wichtige (übergeordnete) Entscheidungen und die Ereignisbehandlung, damit der Geschäftsablauf, die übergeordnete Benutzeroberfläche und der Ablauf der wichtigen Ereignisbehandlung verfolgt werden können. Diese sind für die Entwicklung der Anwendung auf Dauer wertvoll. Die Protokollierung von 'Eingabe von Methode A', 'Verlassen von Methode A', 'param1 77' ist OTOH nicht gut.
Thomas W
10

Wenn Sie über ein Bereitstellungsskript verfügen, können Sie damit die Aufrufe von console.log entfernen (und die Datei minimieren).

Während Sie gerade dabei sind, können Sie Ihre JS über JSLint werfen und die Verstöße zur Überprüfung protokollieren (oder die Bereitstellung verhindern).

Dies ist ein gutes Beispiel dafür, warum Sie Ihre Bereitstellung automatisieren möchten. Wenn Ihr Prozess es Ihnen ermöglicht, eine js-Datei mit console.logs zu veröffentlichen, werden Sie dies irgendwann tun.

Nosredna
quelle
9

Meines Wissens gibt es keine kürzere Methode zum Ausstechen console.logals die folgenden 45 Zeichen:

window.console||(console={log:function(){}});

Dies ist die erste von drei verschiedenen Versionen, je nachdem, welche Konsolenmethoden Sie entfernen möchten. Alle sind winzig und wurden in IE6 + und modernen Browsern getestet.

Die beiden anderen Versionen behandeln verschiedene andere Konsolenmethoden. Eine behandelt die vier Grundlagen und die andere alle bekannten Konsolenmethoden für Firebug und Webkit. Wieder in den kleinstmöglichen Dateigrößen.

Das Projekt ist auf Github: https://github.com/andyet/ConsoleDummy.js

Wenn Sie sich eine Möglichkeit vorstellen können, den Code weiter zu minimieren, sind Beiträge willkommen.

- BEARBEITEN - 16. Mai 2012

Ich habe diesen Code seitdem verbessert. Es ist immer noch winzig, bietet aber die Möglichkeit, die Konsolenausgabe ein- und auszuschalten: https://github.com/HenrikJoreteg/andlog

Es wurde in der Changelog Show vorgestellt

Henrik Joreteg
quelle
5

Sie sollten mindestens einen Dummy erstellen, console.logwenn das Objekt nicht vorhanden ist, damit Ihr Code keine Fehler auf den Computern der Benutzer auslöst, ohne dass ein Firebug installiert ist.

Eine andere Möglichkeit wäre, die Protokollierung nur im 'Debug-Modus' auszulösen, dh wenn ein bestimmtes Flag gesetzt ist:

if(_debug) console.log('foo');
_debug && console.log('foo');
Christoph
quelle
Stimmen Sie mit Cristoph überein, für Safari ist dies kein Problem, aber in anderen Browsern werden Fehler ausgegeben und möglicherweise wird Javascript gestoppt, um fortzufahren. Im Allgemeinen keine gute Idee ...
Sinan
5

Hoffe, es hilft jemandem - ich habe vor einiger Zeit einen Wrapper dafür geschrieben, der etwas flexibler ist als die akzeptierte Lösung.

Wenn Sie andere Methoden wie console.info usw. verwenden, können Sie den Effekt natürlich replizieren. Wenn Sie mit Ihrer Staging-Umgebung fertig sind, ändern Sie einfach den Standard-C.debug für die Produktion in false, und Sie müssen keinen anderen Code ändern / Zeilen entfernen usw. Sehr einfach, um später darauf zurückzugreifen und zu debuggen.

var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function() {
        if (!C.debug) return false;

        if (typeof console == 'object' && typeof console.log != "undefined") {
            console.log.apply(this, arguments); 
        }
        else {
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";

                alert(result);
            }
        }
    }
}; // end console wrapper.

// example data and object
var foo = "foo", bar = document.getElementById("divImage");
C.log(foo, bar);

// to surpress alerts on IE w/o a console:
C.quietDismiss = true;
C.log("this won't show if no console");

// to disable console completely everywhere:
C.debug = false;
C.log("this won't show ever");
Dimitar Christoff
quelle
4

das scheint bei mir zu funktionieren ...

if (!window.console) {
    window.console = {
        log: function () {},
        group: function () {},
        error: function () {},
        warn: function () {},
        groupEnd: function () {}
    };
}
Nick Fox
quelle
3

Ich dachte, ich würde eine andere Perspektive teilen. Wenn Sie diese Art der Ausgabe in einer PCI-Anwendung für die Außenwelt sichtbar lassen, sind Sie nicht konform.

McGovern-Theorie
quelle
Mir wäre das nie in den Sinn gekommen. Vielen Dank.
Charlie Kotter
Er könnte sich auf en.wikipedia.org/wiki/ beziehen ...
Simon East
2
Wenn also jemand mit der rechten Maustaste auf Ihre Website klickt, um die Quelle anzuzeigen, sind Sie nicht konform?
Dan Loewenherz
2

Ich bin damit einverstanden, dass der Konsolenstub ein guter Ansatz ist. Ich habe verschiedene Konsolen-Plugins und Code-Snippets ausprobiert, darunter einige ziemlich komplexe. Sie alle hatten ein Problem in mindestens einem Browser, so dass ich mich für etwas Einfaches wie das Folgende entschieden habe. Dies ist eine Zusammenführung anderer Ausschnitte, die ich gesehen habe, und einiger Vorschläge des YUI-Teams. Es scheint in IE8 +, Firefox, Chrome und Safari (für Windows) zu funktionieren.

// To disable logging when posting a production release, just change this to false.
var debugMode = false;

// Support logging to console in all browsers even if the console is disabled. 
var log = function (msg) {
    debugMode && window.console && console.log ? console.log(msg) : null;
};

Hinweis: Es unterstützt das Deaktivieren der Protokollierung an der Konsole über ein Flag. Vielleicht können Sie dies auch über Build-Skripte automatisieren. Alternativ können Sie die Benutzeroberfläche oder einen anderen Mechanismus verfügbar machen, um dieses Flag zur Laufzeit umzudrehen. Mit Protokollierungsstufen und Ajax-Übermittlung von Protokollen basierend auf dem Protokollschwellenwert können Sie natürlich viel ausgefeilter werden (z. B. werden alle Anweisungen zur Fehlerstufe zur Speicherung an den Server übertragen usw.).

Viele dieser Threads / Fragen zur Protokollierung scheinen Protokollanweisungen als Debug-Code und nicht als Code- Instrumentierung zu betrachten . Daher der Wunsch, die log-Anweisungen zu entfernen. Die Instrumentierung ist äußerst nützlich, wenn sich eine Anwendung in der Natur befindet und es nicht mehr so ​​einfach ist, einen Debugger anzuhängen, oder wenn Informationen von einem Benutzer oder über den Support an Sie gesendet werden. Sie sollten niemals sensible Daten protokollieren, unabhängig davon, wo sie protokolliert wurden, damit Datenschutz und Sicherheit nicht beeinträchtigt werden. Wenn Sie sich die Protokollierung als Instrumentierung vorstellen, wird sie jetzt zum Produktionscode und sollte nach demselben Standard geschrieben werden.

Bei Anwendungen mit immer komplexerem Javascript halte ich die Instrumentierung für kritisch.

tidmutt
quelle
1

Wie andere bereits erwähnt haben, wird in den meisten Browsern ein Fehler ausgegeben. In Firefox 4 wird kein Fehler ausgegeben, die Nachricht wird in der Webentwicklerkonsole protokolliert (neu in Firefox 4).

Eine Problemumgehung für solche Fehler, die mir sehr gut gefallen hat, war de && bug :

var de = true;
var bug = function() { console.log.apply(this, arguments); }

// within code
de&&bug(someObject);
mhitza
quelle
0

Ein schöner Einzeiler:

(!console) ? console.log=function(){} : console.log('Logging is supported.');
Pedro
quelle