Wie kann ich Debug-Meldungen in der Google Chrome JavaScript-Konsole drucken?
https://stackoverflow.com/questions/217957
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie drucke ich Debug-Meldungen in der Google Chrome JavaScript-Konsole?
Bitte beachten Sie, dass die JavaScript-Konsole ist nicht die gleiche wie der JavaScript-Debugger; sie haben unterschiedliche Syntaxen AFAIK, so dass die Drucken Befehl in JavaScript-Debugger wird hier nicht funktionieren. In der JavaScript-Konsole, print() die Parameter an den Drucker senden.
Lösung
Ausführen folgenden Code aus der Browser-Adressleiste:
javascript: console.log(2);
erfolgreich druckt Nachricht an die "JavaScript-Konsole" in Google Chrome.
Andere Tipps
Die 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 werden verschiedene Typen von Elementen log (die auf Protokoll, Info, Fehler basierend gefiltert werden können oder warnen) und keine Fehler verursachen, wenn Konsole nicht zur Verfügung steht. Diese Funktionen werden in Firebug und Chrome Konsolen arbeiten.
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);
Das ist die magische %o Dump anklickbar und Tief durchsuchbaren Inhalt eines JavaScript-Objekt. %s wurde nur für einen Datensatz angezeigt.
Auch das 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 zur Datei und die Zeilennummer !).
Sowohl %o und new Error().stack sind in Chrome und Firefox!
Auch für Stack-Traces in Firefox verwenden:
console.trace();
Wie https://developer.mozilla.org/en-US / docs / Web / API / console sagt.
Happy Hacking!
UPDATE : Einige Bibliotheken, die von schlechten Menschen geschrieben werden, die das console Objekt für ihre eigenen Zwecke neu definieren. Um den ursprünglichen Browser console wiederherstellen, nachdem Bibliothek geladen wurde, verwenden:
delete console.log;
delete console.warn;
....
Siehe Frage Stack-Überlauf Wiederherstellen console.log () .
Nur eine schnelle Warnung - wenn Sie in Internet Explorer testen wollen, ohne alle console.log zu entfernen () 's, Sie verwenden müssen Firebug Lite oder Sie werden einige nicht besonders freundlich Fehler erhalten.
(Oder erstellen Sie Ihre eigene console.log (), die nur false zurück.)
Hier ist ein kurzes Skript, das prüft, ob die Konsole zur Verfügung steht. Wenn dies nicht der Fall, versucht es zu laden Firebug und wenn Firebug ist nicht verfügbar es lädt Firebug Lite. Jetzt können Sie console.log in jedem Browser verwenden. Genießen Sie!
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.
}
Neben Delan Azabani Antwort , wie ich meine console.js zu teilen, und ich 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 das 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() {};
}
}
oder verwenden Sie diese Funktion:
function log(message){
if (typeof console == "object") {
console.log(message);
}
}
Hier ist meine Konsole Wrapper-Klasse. Es gibt mir auch Umfang Ausgang um das Leben leichter zu machen. Beachten Sie die Verwendung von localConsole.debug.call() so dass localConsole.debug im Rahmen der anrufenden Klasse läuft, Zugriff auf seine toString Verfahren bereitgestellt wird.
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();
Das gibt 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
Ich persönlich verwende diese, die tarek11011 die ä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 wichtigste Punkt ist, dass es eine gute Idee ist, weil zumindest haben andere eine gewisse Praxis der Anmeldung als nur kleben console.log() direkt in Ihren JavaScript-Code, wenn Sie es vergessen, und es ist auf einer Produktionsstätte, kann es potenziell alle brechen der JavaScript-Code für diese Seite.
könnten Sie verwenden console.log(), wenn Sie einen ausgetestet Code in welcher Programmiersoftware-Editor haben Sie und Sie erhalten die Ausgabe meistens wahrscheinlich den besten Editor für mich (Google Chrome) sehen. Drücken Sie einfach F12 und die Registerkarte Konsole drücken. Sie sehen das Ergebnis. Glücklich Codierung. :)
Ich habe eine Menge Probleme hat mit den Entwicklern in ihrer Konsole zu überprüfen. () Anweisungen. Und Ich mag nicht den Internet Explorer debuggen, trotz der fantastischen Verbesserungen von Internet Explorer 10 und Visual Studio 2012 , etc.
Also, ich die Konsole Objekt außer Kraft gesetzt habe selbst ... Ich habe eine __localhost Flagge hinzugefügt, die nur Konsole Aussagen ermöglicht, wenn auf localhost. Ich habe auch Konsole. () Funktionen zu Internet Explorer (die eine Warnung anzeigt () statt).
// 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 Blick auf den Code, werden Sie die console.examine () Funktion entdecken. Ich habe vor Jahren, so dass ich Debug-Code in bestimmten Bereichen rund um das Produkt troubleshoot helfen lassen kann QA / Kundenprobleme. 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 protokollierten console.examine () Aussagen sehen. Es war eine fantastische Hilfe ein Vielfaches.
Einfache Internet Explorer 7 und unter Shim , die für anderen Browser Zeilennummerierung bewahrt:
/* 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 druckt den Text in einer hellen blauen Farbe in der Konsole.
Weitere Verbesserung auf Ideen von Delan und Andru (weshalb diese Antwort ist eine bearbeitete Version); console.log ist wahrscheinlich, während die anderen Funktionen existieren nicht, so die Standard-Karte als console.log auf die gleiche Funktion haben ....
Sie können ein Skript schreiben, die Funktionen Konsole erstellt, wenn sie existieren nicht:
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 Aktionen:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Diese Funktionen werden verschiedene Typen von Elementen log (die auf Protokoll, Info, Fehler basierend gefiltert werden können oder warnen) und keine Fehler verursachen, wenn Konsole nicht zur Verfügung steht. Diese Funktionen werden in Firebug und Chrome Konsolen arbeiten.
