¿Cómo imprimo mensajes de depuración en la Consola JavaScript de Google Chrome?
https://stackoverflow.com/questions/217957
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Cómo imprimo mensajes de depuración en la Consola de JavaScript de Google Chrome?
Tenga en cuenta que la Consola de JavaScript no es lo mismo que el Depurador de JavaScript; tienen diferentes sintaxis AFAIK, por lo que el comando imprimir en el depurador de JavaScript no funcionará aquí. En la Consola de JavaScript, print () enviará el parámetro a la impresora.
Solución
Ejecutando el siguiente código desde la barra de direcciones del navegador:
javascript: console.log(2);
imprime correctamente el mensaje en la " Consola de JavaScript " en Google Chrome.
Otros consejos
Mejorando la idea de Andru, puedes escribir un script que cree funciones de consola si no existen:
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};
Luego, usa cualquiera de los siguientes:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Estas funciones registrarán diferentes tipos de elementos (que pueden filtrarse según el registro, la información, el error o la advertencia) y no causarán errores cuando la consola no esté disponible. Estas funciones funcionarán en las consolas Firebug y Chrome.
Simplemente agregue una característica interesante que muchos desarrolladores no pueden ver:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
Este es el contenido mágico de % o dump en el que se puede hacer clic y se puede navegar en profundidad de un objeto de JavaScript. % s se mostró solo para un registro.
También esto es genial también:
console.log("%s", new Error().stack);
Lo que proporciona un seguimiento de pila similar a Java hasta el punto de la invocación de new Error () (incluida ruta al archivo y número de línea !).
Tanto % o como new Error (). stack están disponibles en Chrome y Firefox.
También para trazas de pila en el uso de Firefox:
console.trace();
Como https://developer.mozilla.org/en-US / docs / Web / API / console dice.
¡Feliz piratería!
ACTUALIZACIÓN : algunas bibliotecas están escritas por personas malas que redefinen el objeto consola para sus propios fines. Para restaurar el navegador original consola después de cargar la biblioteca, use:
delete console.log;
delete console.warn;
....
Consulte la pregunta sobre desbordamiento de pila Restaurando console.log () .
Solo una advertencia rápida: si desea realizar una prueba en Internet & nbsp; Explorer sin eliminar todos los console.log (), deberá usar Firebug Lite o obtendrás algunos errores no especialmente amigables.
(O cree su propia console.log () que solo devuelve false.)
Aquí hay un breve script que comprueba si la consola está disponible. Si no lo está, intenta cargar Firebug y si Firebug no está disponible carga Firebug Lite. Ahora puedes usar console.log en cualquier navegador. ¡Disfruta!
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.
}
Además de la respuesta de Delan Azabani , me gusta compartir mi console.js , Y lo uso para el mismo fin. Creo una consola noop utilizando una matriz de nombres de funciones, lo que, en mi opinión, es una forma muy conveniente de hacerlo, y me ocupé de Internet & nbsp; Explorer, que tiene una función console.log , pero 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() {};
}
}
O use esta función:
function log(message){
if (typeof console == "object") {
console.log(message);
}
}
Aquí está mi clase de contenedor de consola. Me da un alcance de salida también para hacer la vida más fácil. Tenga en cuenta el uso de localConsole.debug.call () para que localConsole.debug se ejecute en el alcance de la clase que llama, brindando acceso a su toString método.
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();
Esto da un resultado similar en 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 uso esto, que es similar a 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){}
}
El punto principal es que es una buena idea al menos tener alguna práctica de inicio de sesión que no sea simplemente pegar console.log () directamente en su código JavaScript, porque si lo olvida, y está en un sitio de producción, potencialmente puede romper todo el código JavaScript para esa página.
Puede usar console.log () si tiene un código depurado en el editor de software de programación que tiene y verá que la salida es probablemente el mejor editor para mí (Google Chrome). Simplemente presione F12 y presione la pestaña Consola. Verás el resultado. Feliz codificación :)
He tenido muchos problemas con los desarrolladores que verificaron sus consolas. () sentencias. Y, realmente no me gusta depurar Internet & nbsp; Explorer, a pesar de las fantásticas mejoras de Internet & nbsp; Explorer 10 y Visual & nbsp; Studio & nbsp; 2012 , etc.
Por lo tanto, he anulado el objeto de la consola en sí ... He agregado un indicador __localhost que solo permite sentencias de consola cuando está en localhost. También agregué funciones de consola. () A Internet & nbsp; Explorer (que muestra una alerta () en su lugar).
// 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));
}
}
};
})();
Ejemplo de uso:
console.log("hello");
Chrome / Firefox:
prints hello in the console window.
Internet Explorer:
displays an alert with 'hello'.
Para aquellos que observan detenidamente el código, descubrirán la función console.examine (). Creé este año atrás para poder dejar el código de depuración en ciertas áreas alrededor del producto para ayudar a solucionar QA / problemas del cliente. Por ejemplo, dejaría la siguiente línea en algún código publicado:
function doSomething(arg1) {
// ...
console.examine("someLabel", arg1);
// ...
}
Y luego, desde el producto publicado, escriba lo siguiente en la consola (o barra de direcciones con el prefijo 'javascript:'):
top.__examine_someLabel = true;
Luego, veré todas las declaraciones de console.examine () registradas. Ha sido una ayuda fantástica muchas veces.
Simple Internet & nbsp; Explorer & nbsp; 7 y debajo shim que conserva la numeración de línea para otros navegadores:
/* Console shim */
(function () {
var f = function () {};
if (!window.console) {
window.console = {
log:f, info:f, warn:f, debug:f, error:f
};
}
}());
console.debug("");
El uso de este método imprime el texto en un color azul brillante en la consola.
Mejorando aún más las ideas de Delan y Andru (por lo que esta respuesta es una versión editada); es probable que console.log exista mientras que las otras funciones no, así que tenga el mapa predeterminado para la misma función que console.log ....
Puede escribir un script que cree funciones de consola si no existen:
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
Luego, use cualquiera de los siguientes:
console.log(...);
console.error(...);
console.info(...);
console.warn(...);
Estas funciones registrarán diferentes tipos de elementos (que pueden filtrarse según el registro, información, error o advertencia) y no causarán errores cuando la consola no esté disponible. Estas funciones funcionarán en las consolas Firebug y Chrome.
