Ahora estoy desarrollando una aplicación y coloco un isDebug
interruptor global . Me gustaría envolver console.log
para un uso más conveniente.
//isDebug controls the entire site.
var isDebug = true;
//debug.js
function debug(msg, level){
var Global = this;
if(!(Global.isDebug && Global.console && Global.console.log)){
return;
}
level = level||'info';
Global.console.log(level + ': '+ msg);
}
//main.js
debug('Here is a msg.');
Luego obtengo este resultado en la consola de Firefox.
info: Here is a msg. debug.js (line 8)
¿Qué sucede si quiero iniciar sesión con el número de línea donde me debug()
llaman, como info: Here is a msg. main.js (line 2)
?
javascript
Rufus
fuente
fuente
console.log
para información,console.warn
para advertencia yconsole.error
para error, en lugar de agregar algo aconsole.log
través de una función de contenedor.console
es necesario usarlo. Para lograr tal objetivo, un contenedor parece ser la única manera?Respuestas:
Esta es una vieja pregunta y todas las respuestas proporcionadas son excesivamente hackeadas, tienen MAYORES problemas de navegador cruzado y no proporcionan nada súper útil. Esta solución funciona en todos los navegadores e informa todos los datos de la consola exactamente como debería. No se requieren hacks y una línea de código Echa un vistazo al codepen .
Crea el interruptor así:
Luego simplemente llame de la siguiente manera:
Incluso puede hacerse cargo de console.log con un interruptor como este:
Si desea hacer algo útil con eso ... Puede agregar todos los métodos de la consola y envolverlo en una función reutilizable que le brinde no solo control global, sino también nivel de clase:
Ahora puedes agregarlo a tus clases:
fuente
console.log
dos veces vinculando unalog()
función personalizada que contenga dos llamadas aconsole.log
, sin embargo, los números de línea reflejarían la línea en la queconsole.log
realmente reside, no dóndedebug.log
se llama. Sin embargo, podría hacer cosas como agregar prefijos / sufijos dinámicos, etc. También hay formas de compensar el problema del número de línea, pero esa es otra pregunta, creo. Vea este proyecto para ver un ejemplo: github.com/arctelix/iDebugConsole/blob/master/README.mdthis.isDebug
afalse
, no importará. Simplemente no sé si hay alguna forma de evitar esto, tal vez sea por diseño. En ese sentido, elisDebug
es bastante engañosovar
y debería ser unconst
lugar.Me gustó la respuesta de @ fredrik , así que la enrolé con otra respuesta que divide la traza de pila de Webkit , y la fusioné con el contenedor seguro console.log de @ PaulIrish . "Estandariza" el
filename:line
a un "objeto especial" para que se destaque y se vea casi igual en FF y Chrome.Pruebas en violín: http://jsfiddle.net/drzaus/pWe6W/
Esto también funciona en el nodo, y puede probarlo con:
fuente
console
métodos comowarn
,error
, etc. - stackoverflow.com/a/14842659/1037948var line = stack.split('\n')[2];
-'undefined' is not an object
if(!stack) return '?'
al método que falla, en lugar de donde se llama (así que si alguien usa el método en sí mismo, también está "protegido")Puede mantener los números de línea y generar el nivel de registro con un uso inteligente de
Function.prototype.bind
:Yendo un paso más allá, puede hacer uso de las
console
distinciones de error / advertencia / información y aún tener niveles personalizados. ¡Intentalo!fuente
console.debug(...)
confunction name
yarguments
, ¿alguna idea sobre cómo hacerlo?%s
con%o
Chrome imprimirá los parámetros de la manera que esperaría (los objetos son expandibles, los números y las cadenas están coloreados, etc.).De: ¿Cómo obtener el número de línea de la función de llamada de JavaScript? ¿Cómo obtener la URL fuente de la persona que llama JavaScript? el
Error
objeto tiene una propiedad de número de línea (en FF). Entonces algo como esto debería funcionar:En el navegador Webkit, tiene
err.stack
una cadena que representa la pila de llamadas actual. Mostrará el número de línea actual y más información.ACTUALIZAR
Para obtener el número de ropa correcto, debe invocar el error en esa línea. Algo como:
fuente
new Error();
me da el contexto donde se ejecuta, si lo pongodebug.js
, lo obtendréinfo: Here is a msg. file: http://localhost/js/debug.js line:7
.Log = Error
? Todavía estás modificando la clase Error, ¿verdad?Una forma de mantener el número de línea está aquí: https://gist.github.com/bgrins/5108712 . Se reduce más o menos a esto:
Usted podría terminar con esto con
isDebug
y establecerwindow.log
afunction() { }
si no está depurando.fuente
Puede pasar el número de línea a su método de depuración, así:
Aquí,
(new Error).lineNumber
le daría el número de línea actual en sujavascript
código.fuente
Chrome Devtools te permite lograr esto con Blackboxing . Puede crear el contenedor console.log que puede tener efectos secundarios, llamar a otras funciones, etc., y aún conservar el número de línea que llamó a la función de contenedor.
Simplemente coloque un pequeño contenedor console.log en un archivo separado, por ejemplo
Nómbrelo como log-blackbox.js
Luego vaya a la configuración de Chrome Devtools y busque la sección "Blackboxing", agregue un patrón para el nombre de archivo que desea blackbox, en este caso log-blackbox.js
fuente
Encontré una solución simple para combinar la respuesta aceptada (enlace a console.log / error / etc) con alguna lógica externa para filtrar lo que realmente se registra.
Uso:
console.assert
utiliza el registro condicional.fuente
Si simplemente desea controlar si se utiliza la depuración y tiene el número de línea correcto, puede hacerlo en su lugar:
Cuando necesite acceso a la depuración, puede hacer esto:
Si
isDebug == true
, los números de línea y los nombres de archivo que se muestran en la consola serán correctos, porquedebug.log
etc. es en realidad un alias deconsole.log
etc.Si
isDebug == false
no se muestran mensajes de depuración, porquedebug.log
etc. simplemente no hace nada (una función vacía).Como ya sabe, una función de contenedor desordenará los números de línea y los nombres de archivo, por lo que es una buena idea evitar el uso de funciones de contenedor.
fuente
isDebug = true
ydebug.js
, ¡pero esta respuesta funciona!window.debug = window.console
Sería un poco más limpio.isDebug == false
. : {isDebug===true
. O evento a esto: jsfiddle.net/fredrik/x6Jw5Las soluciones de seguimiento de pila muestran el número de línea pero no permiten hacer clic para ir a la fuente, lo cual es un problema importante. La única solución para mantener este comportamiento es unirse a la función original.
La vinculación evita incluir una lógica intermedia, porque esta lógica alteraría los números de línea. Sin embargo, al redefinir las funciones enlazadas y jugar con la sustitución de cadenas de la consola , todavía es posible algún comportamiento adicional.
Esta esencia muestra un marco de registro minimalista que ofrece módulos, niveles de registro, formato y números de línea en los que se puede hacer clic en 34 líneas. Úselo como base o inspiración para sus propias necesidades.
EDITAR: esencia incluida a continuación
fuente
La idea con Bind
Function.prototype.bind
es brillante. También puede usar npm library lines-logger . Muestra los archivos fuente de origen:Crear registrador cualquiera una vez en su proyecto:
Imprimir registros:
fuente
Aquí hay una manera de mantener sus
console
declaraciones de registro existentes mientras agrega un nombre de archivo y número de línea u otra información de seguimiento de pila en la salida:Entonces úsalo así:
Esto funciona en Firefox, Opera, Safari, Chrome e IE 10 (aún no probado en IE11 o Edge).
fuente
my test log message (myscript.js:42) VM167 mypage.html:15
, que no es tan buena de leer y además no está vinculada. Sigue siendo un buen trabajo, por lo tanto, un voto positivo.Esto me dará
info: "Here is a msg." main.js(line:2)
.Pero el extra
eval
es necesario, lástima.fuente
Código de http://www.briangrinstead.com/blog/console-log-helper-function :
fuente
log
se llamaHe estado revisando este problema yo mismo últimamente. Necesitaba algo muy sencillo para controlar el registro, pero también para retener los números de línea. Mi solución no se ve tan elegante en el código, pero proporciona lo que se necesita para mí. Si uno es lo suficientemente cuidadoso con los cierres y retenciones.
Agregué un pequeño contenedor al comienzo de la aplicación:
Para que luego pueda simplemente hacer:
Lo probé en Firefox y Crome, y ambos navegadores parecen mostrar el registro de la consola como se esperaba. Si rellena así, siempre puede extender el método 'd' y pasarle otros parámetros, de modo que pueda realizar un registro adicional.
Todavía no he encontrado inconvenientes serios para mi enfoque, excepto la línea fea en el código para iniciar sesión.
fuente
Aquí estaba mi solución sobre esta pregunta. cuando llame al método: log, imprimirá el número de línea donde imprime su log
fuente
Una pequeña variación es hacer que debug () devuelva una función, que luego se ejecuta donde la necesita: debug (message) (); y muestra correctamente el número de línea correcto y la secuencia de comandos de llamada en la ventana de la consola, al tiempo que permite variaciones como redireccionar como alerta o guardar en un archivo.
Como devuelve una función, esa función debe ejecutarse en la línea de depuración con () ;. En segundo lugar, el mensaje se envía a la función de depuración, en lugar de a la función devuelta, lo que permite el procesamiento previo o la verificación que pueda necesitar, como verificar el estado del nivel de registro, hacer que el mensaje sea más legible, omitir diferentes tipos o solo informar elementos cumplir los criterios de nivel de registro;
fuente
Podrías simplificar la lógica aquí. Esto supone que su marca de depuración global NO es dinámica y se establece en la carga de la aplicación o se pasa como alguna configuración. Esto está destinado a ser utilizado para marcar el entorno (por ejemplo, solo imprimir cuando está en modo dev y no producción)
Vanilla JS:
ES6:
Módulo:
Angular 1.x:
Todo lo que necesita hacer ahora es reemplazar todas las referencias de la consola con Logger
fuente
Esta implementación se basa en la respuesta seleccionada y ayuda a reducir la cantidad de ruido en la consola de error: https://stackoverflow.com/a/32928812/516126
fuente
Algunas de las respuestas a este problema me parecieron demasiado complejas para mis necesidades. Aquí hay una solución simple, presentada en Coffeescript. Está adaptado de la versión de Brian Grinstead aquí
Asume el objeto de consola global.
fuente
La forma en que lo resolví fue crear un objeto, luego crear una nueva propiedad en el objeto usando Object.defineProperty () y devolver la propiedad de la consola, que luego se usó como la función normal, pero ahora con la habilidad extendida.
Luego, para definir una propiedad que acaba de hacer ...
Y ahora puedes usar tu función como
fuente
Basado en otras respuestas (principalmente @arctelix one), creé esto para el Nodo ES6, pero una prueba rápida también mostró buenos resultados en el navegador. Solo estoy pasando la otra función como referencia.
fuente
Aquí está mi función de registro (basada en algunas de las respuestas). Espero que alguien pueda usarlo:
Ejemplos:
fuente