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

Question

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

Bitte beachten Sie, dass die JavaScript-Konsole nicht mit dem JavaScript-Debugger identisch ist. Sie haben unterschiedliche Syntax AFAIK, so dass die Drucken Befehl in JavaScript Debugger wird hier nicht funktionieren. In der JavaScript-Konsole sendet print() den Parameter an den Drucker.

Answer 1

Ausführen von der Browser-Adressleiste folgenden Code:

 
javascript: console.log(2); 

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

Answer 2

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

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

Answer 3

Verbesserung auf Andru Idee, können Sie ein Skript schreiben, die Funktionen Konsole erstellt, wenn sie existieren nicht:

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 Aktionen:

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

Diese Funktionen verschiedene Arten von Gegenständen log wird (die auf Protokoll, Info, Fehler basierend gefiltert werden können oder warnen) und werden Fehler nicht dazu führen, wenn die Konsole nicht verfügbar ist. Diese Funktionen funktionieren in Firebug- und Chrome-Konsolen.

Answer 4

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

Answer 5

Hier ist meine Konsole Wrapper-Klasse. Es gibt mir auch Spielraum, um das Leben einfacher zu machen. Beachten Sie die Verwendung von localConsole.debug.call(), so dass localConsole.debug im Bereich der aufrufenden Klasse ausgeführt wird, Zugriff auf seine -Methode.

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 so 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 

Answer 6

Oder diese Funktion nutzen:

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

Answer 7

persönlich dieses Ich verwende, was ist Tarek11011 ähnlich ‚S:

// 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, zumindest ein wenig Übung hat andere Anmeldung als nur console.log() direkt in Ihren JavaScript-Code kleben, denn wenn Sie es vergessen, und es ist auf einer Produktions Website kann es möglicherweise den gesamten JavaScript-Code für diese Seite brechen.

Answer 8

Sie könnten console.log() verwenden, wenn Sie einen debugged Code in welcher Programmiersoftware-Editor haben Sie und Sie werden die Ausgabe wahrscheinlich die beste Editor für mich (Google Chrome) sehen. Drücken Sie einfach F12 und drücken Sie die Registerkarte Konsole. Sie werden das Ergebnis sehen. Glückliche Kodierung. :)

Answer 9

Neben Delan Azabani's answer teile ich gerne meine console.js, und ich benutze für den gleichen Zweck. Ich erstelle eine noop Konsole eine Reihe von Funktionsnamen verwenden, was meiner Meinung nach ist eine sehr bequeme Art und Weise, dies zu tun, und ich kümmerte mich um Internet   Explorer, die eine console.log Funktion hat, aber keine 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() {}; 
    } 
} 

Answer 10

Ich hatte eine Menge Probleme mit Entwicklern, die ihre console.() Anweisungen eincheckten. Und Ich mag nicht Internet Explorer debuggen   trotz der fantastischen Verbesserungen von Internet Explorer 10 und Visual Studio 2012 usw.

Also, ich habe außer Kraft gesetzt die Konsole Objekt selbst ... Ich habe eine __localhost Flagge hinzugefügt, dass nur Erlaubt Konsolenkonten wenn auf localhost. Ich fügte auch Konsole hinzu.() Funktioniert Internet   Explorer (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)); 
      } 
     } 
    }; 
})(); 

Beispiel für die Verwendung:

console.log("hello"); 

Chrome/Firefox:

prints hello in the console window. 

Internet Explorer:

displays an alert with 'hello'. 

Für diejenigen, die eng auf den Code anschauen, werden Sie Entdecken Sie die Funktion console.examine(). Ich habe dies vor Jahren erstellt, damit ich Debug-Code in bestimmten Bereichen um das Produkt lassen kann, um die Fehlerbehebung bei QA/Kundenproblemen zu erleichtern. Zum Beispiel würde ich die folgende Zeile in einigem freigegebenen Code verlassen:

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

Und dann aus dem freigesetzten Produkt, geben Sie Folgendes in die Konsole (oder Adressleiste mit dem Präfix ‚javascript:‘):

top.__examine_someLabel = true; 

Dann werde ich alle protokollierte console.examine() -Anweisungen sehen. Es war schon immer eine fantastische Hilfe.

Answer 11

Einfache Internet Explorer 7 und unter shim, die für andere Browser Zeilennummerierung bewahrt:

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

Answer 12

Fügen Sie einfach ein cooles Feature, das viele Entwickler verpassen:

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

Dies ist die magische %o Dump anklickbar und tief durchsuchbar Inhalt eines JavaScript-Objekts. %s wurde nur für eine Aufzeichnung gezeigt.

Auch dies ist auch cool:

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

, die an der Spitze des new Error() Aufruf einer Java-ähnlichen Stack-Trace gibt (einschließlich Pfad und die Zeilennummer in Datei!).

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

Auch für Stack-Traces in Firefox Verwendung:

console.trace(); 

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

Happy hacken!

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

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

Siehe Stack-Überlauf Frage Restoring console.log().

Answer 13

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 funktionieren, daher muss die Standardzuordnung dieselbe Funktion wie console.log ... haben.

Sie können ein Skript schreiben, das Konsolenfunktionen erstellt, wenn sie nicht vorhanden sind :

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

Diese Funktionen verschiedene Arten von Gegenständen wird log (die basierend auf log gefiltert werden können, info, Fehler oder warn) und wird nicht dazu führen:

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 

eine der folgenden Aktionen verwenden Dann Fehler, wenn die Konsole nicht verfügbar ist. Diese Funktionen funktionieren in Firebug- und Chrome-Konsolen.

Answer 14

console.debug(""); 

Mit dieser Methode wird der Text in der Konsole in einer hellblauen Farbe gedruckt.