¿Diferencia entre console.log () y console.debug ()?

143

Google no me ha sido útil, ya que la búsqueda de "console.debug" solo muestra un montón de páginas que tienen las palabras "consola" y "depuración" en ellas.

Me pregunto cuál es la diferencia entre console.log()y console.debug(). ¿Hay alguna manera de usar un montón de console.debug()declaraciones y luego simplemente cambiar un interruptor para apagar fácilmente todas las declaraciones de depuración que se envían a la consola (como después de iniciar un sitio)?

javascript console console.log web-developer-toolbar CaptSaltyJack
fuente
Aquí se explica cómo deshabilitar las salidas de la
consola.log
Puedes poner colores. console.log ('% c Sample Text', 'color: green;'); O agregue algunos VAR en el texto usando: console.log (`Sample $ {variable}`, 'color: green;');
Gilberto B. Terra Jr.

Respuestas:

74

Para al menos las consolas IE, Firefox y Chrome, .debug () es solo un alias para .log () agregado para mejorar la compatibilidad

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

https://developers.google.com/chrome-developer-tools/docs/console-api#consoledebugobject_object

https://msdn.microsoft.com/en-us/library/ie/hh772183(v=vs.85).aspx

Pete TNT
fuente
55
En Chrome debug()aparece en azul y log()en negro
Simon_Weaver
38
Una mejora seria sobre log ().
Vael Victus
32
Desde developer.mozilla.org/en-US/docs/Web/API/console : console.debug () - Nota: a partir de Chromium 58, este método solo aparece en las consolas del navegador Chromium cuando se selecciona el nivel "Verbose".
cilf
Uso de la depuración en Chrome: no se permite llamar a la depuración
Masoud Bimar
103

Técnicamente console.log console.debugy console.infoson idénticos. Sin embargo, la forma en que muestran los datos es un poco diferente

console.log Texto en color negro sin icono

console.info Texto de color azul con icono

console.debug Texto de color negro puro

console.warn Texto de color amarillo con icono

console.error Texto de color rojo con icono

var playerOne = 120;
var playerTwo = 130;
var playerThree = 140;
var playerFour = 150;
var playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.warn("Console.warn" + " " + playerThree);
console.info("Console.info" + " " + playerFour);
console.error("Console.error" + " " + playerFive);

ingrese la descripción de la imagen aquí

Prabhakar Undurthi
fuente
En el buscador de Google Chrome info, los registros a nivel se muestran simplemente con un icono (igual que en la instantánea), pero el texto ( console.infotexto en su publicación) está en color negro y el color de fondo de la fila es blanco. Posiblemente su instantánea para el navegador Firefox.
RBT
3
Gracias por la respuesta, muy clara con la captura de pantalla. Sin embargo, tengo que preguntar, ¿por qué la concatenación de cadenas? ¿Por qué no solo en console.log("Console.log");lugar de console.log("Console.log" + " " + playerOne);? ¿Qué hace el " " + playerOne?
hofnarwillie
En mi consola, obtengo la misma pantalla conconsole.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");
kotchwane
36

Son casi idénticos: la única diferencia es que los mensajes de depuración están ocultos de forma predeterminada en las versiones recientes de Chrome (debe establecer el nivel de registro Verboseen la barra superior de Devtools mientras está en la consola para ver los mensajes de depuración; los mensajes de registro son visibles de forma predeterminada).

usuario2486570
fuente
2
Hola, esto parece cierto, pero no puedo encontrar ninguna información sobre este comportamiento. Los documentos de Chrome no lo mencionan hasta hoy.
oligofren
3
Ahora finalmente entendí "establecer el nivel de registro en Verbose en la parte superior de la consola". Quieres decir que en Dev Tools hay una consola en la parte inferior. En la parte superior de esta sección, junto con Filter y el selector de cuadros, también hay un menú desplegable de verbosidad para los registros (preestablecido en "Información")
oligofren
1
Esta es la respuesta más relevante. Todos mencionan los colores, pero esto es IMO más importante.
DurkoMatko
15

console.info, los console.debugmétodos son idénticos a console.log.

  • console.log Declaración de impresión
  • console.info Texto en color negro con el icono "i" en color azul
  • console.debug Texto de color azul

Documentación:

Venkat
fuente
Console.info imprime color azul, console.warn imprime color amarillo y console.error imprime color rojo
shivgre
He probado en Chrome 52.0.2743.82 Console.Info imprime en color negro con el icono azul, Console.warn imprime en color negro con el icono amarillo console.error imprime en color rojo con el icono rojo
Venkat
edite su respuesta en consecuencia para que pueda votar a favor o eliminar voto a favor, ¿notó el ícono "i" de color azul antes del texto impreso mientras usa console.info ()
shivgre
2

Si desea la capacidad de deshabilitar el registro después de que un producto esté terminado, puede anular la console.debug()función o hacer otra personalizada.

console.debug = function() {
    if(!console.debugging) return;
    console.log.apply(this, arguments);
};

console.debugging = true;
console.debug('Foo', {age:41, name:'Jhon Doe'});

Foo▸ {edad: 41, nombre: "Jhon Doe"}

console.debugging = false;
console.debug('Foo', {age:26, name:'Jane Doe'});

Ninguna salida

Sin embargo, tampoco he encontrado una manera de colorear las salidas.

Espen MS
fuente
1

A partir de la documentación de los navegadores, Los log, debugy también infométodos son idénticos en cuanto a la aplicación, sino que varía en color y el icono

https://jsfiddle.net/yp4z76gg/1/

Venkat
fuente
1
Esto debería ser un comentario o agregar más explicaciones con una respuesta sobre cómo ambos son idénticos o no tienen ninguna diferencia para entender OP y otros
Gracias