Come faccio a stampare i messaggi di debug nella Console JavaScript di Google Chrome?
https://stackoverflow.com/questions/217957
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Come si stampano i messaggi di debug nella Console JavaScript di Google Chrome?
Si noti che la console JavaScript non è la stessa del debugger JavaScript; hanno diverse sintassi AFAIK, quindi il comando stampa in JavaScript Debugger non funzionerà qui. Nella console JavaScript, print () invierà il parametro alla stampante.
Soluzione
Eseguendo il seguente codice dalla barra degli indirizzi del browser:
javascript: console.log(2);
stampa correttamente il messaggio nella " Console JavaScript " in Google Chrome.
Altri suggerimenti
Migliorando l'idea di Andru, puoi scrivere uno script che crei le funzioni della console se non esistono:
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};
Quindi, utilizzare uno dei seguenti:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Queste funzioni registreranno diversi tipi di elementi (che possono essere filtrati in base a registro, informazioni, errori o avvisi) e non causeranno errori quando la console non è disponibile. Queste funzioni funzioneranno nelle console Firebug e Chrome.
Basta aggiungere una funzionalità interessante che molti sviluppatori mancano:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
Questo è il magico % o dump cliccabile e navigabile in profondità di un oggetto JavaScript. % s è stato mostrato solo per un record.
Anche questo è bello:
console.log("%s", new Error().stack);
Che fornisce una traccia dello stack simile a Java al punto della chiamata new Error () (incluso percorso al file e numero di riga !).
Sia % o che new Error (). stack sono disponibili in Chrome e Firefox!
Anche per tracce di stack in Firefox utilizzare:
console.trace();
Come https://developer.mozilla.org/en-US / docs / Web / API / console dice.
Happy hacking!
AGGIORNAMENTO : alcune librerie sono scritte da persone cattive che ridefiniscono l'oggetto console per i propri scopi. Per ripristinare la console del browser originale dopo aver caricato la libreria, utilizzare:
delete console.log;
delete console.warn;
....
Vedi la domanda di overflow dello stack Ripristino console.log () .
Solo un breve avvertimento: se vuoi testare in Internet & nbsp; Explorer senza rimuovere tutti i file console.log (), dovrai utilizzare Firebug Lite o otterrai alcuni errori non particolarmente amichevoli.
(O crea il tuo console.log () che restituisce semplicemente false.)
Ecco uno script breve che controlla se la console è disponibile. In caso contrario, prova a caricare Firebug e se Firebug non è disponibile carica Firebug Lite. Ora puoi usare console.log in qualsiasi browser. Buon divertimento!
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.
}
Oltre a la risposta di Delan Azabani , mi piace condividere il mio console.js , e io uso per lo stesso scopo. Creo una console noop usando una serie di nomi di funzioni, qual è secondo me un modo molto conveniente per farlo, e mi sono occupato di Internet & nbsp; Explorer, che ha una funzione console.log , ma no 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() {};
}
}
Oppure usa questa funzione:
function log(message){
if (typeof console == "object") {
console.log(message);
}
}
Ecco la mia classe wrapper per console. Mi dà anche l'output dell'ambito per semplificare la vita. Nota l'uso di localConsole.debug.call () in modo che localConsole.debug venga eseguito nell'ambito della classe chiamante, fornendo l'accesso al suo toString metodo.
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();
Questo fornisce un output simile in Firebug :
In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}
O Chrome:
In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object
Personalmente lo uso, che è simile a quello di tarek11011:
// 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){}
}
Il punto principale è che è una buona idea avere almeno qualche pratica di registrazione oltre a inserire console.log () direttamente nel tuo codice JavaScript, perché se te ne dimentichi, e è su un sito di produzione, può potenzialmente rompere tutto il codice JavaScript per quella pagina.
Potresti usare console.log () se hai un codice di debug in quale editor di software di programmazione hai e vedrai l'output probabilmente il miglior editor per me (Google Chrome). Premi F12 e premi la scheda Console. Vedrai il risultato. Buona codifica. :)
Ho avuto molti problemi con gli sviluppatori che controllavano le loro consolle. () dichiarazioni. E non mi piace molto il debug di Internet & nbsp; Explorer, nonostante i fantastici miglioramenti di Internet & nbsp; Explorer 10 e Visual & nbsp; Studio & nbsp; 2012 , ecc.
Quindi, ho ignorato l'oggetto console stesso ... Ho aggiunto un flag __localhost che consente le istruzioni console solo su localhost. Ho anche aggiunto le funzioni console. () A Internet & nbsp; Explorer (che mostra invece un avviso ()).
// 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));
}
}
};
})();
Esempio di utilizzo:
console.log("hello");
Chrome / Firefox:
prints hello in the console window.
Internet Explorer:
displays an alert with 'hello'.
Per coloro che osservano attentamente il codice, scoprirai la funzione console.examine (). Ho creato questi anni fa in modo da poter lasciare il codice di debug in alcune aree intorno al prodotto per aiutare a risolvere QA / problemi dei clienti. Ad esempio, lascerei la seguente riga in un codice rilasciato:
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}
E quindi dal prodotto rilasciato, digitare quanto segue nella console (o nella barra degli indirizzi con il prefisso 'javascript:'):
top.__examine_someLabel = true;
Quindi, vedrò tutte le istruzioni console.examine () registrate. È stato di grande aiuto molte volte.
Semplice Internet & nbsp; Explorer & nbsp; 7 e inferiore shim che conserva la numerazione delle righe per altri browser:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
console.debug("");
L'uso di questo metodo stampa il testo in blu brillante nella console.
Migliorare ulteriormente le idee di Delan e Andru (motivo per cui questa risposta è una versione modificata); è probabile che console.log esista mentre le altre funzioni potrebbero non esserlo, quindi la mappa predefinita ha la stessa funzione di console.log ....
Puoi scrivere uno script che crei le funzioni della console se non esistono:
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
Quindi, utilizzare uno dei seguenti:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Queste funzioni registreranno diversi tipi di elementi (che possono essere filtrati in base a registro, informazioni, errori o avvisi) e non causeranno errori quando la console non è disponibile. Queste funzioni funzioneranno nelle console Firebug e Chrome.
