Cómo aprovechar al máximo la consola de JavaScript

Una de las herramientas de depuración más básicas de JavaScript es console.log(). El consoleviene con varios otros métodos útiles que se pueden añadir al conjunto de herramientas de depuración de un desarrollador.

Puede utilizar el consolepara realizar algunas de las siguientes tareas:

  • Genere un temporizador para ayudar con la evaluación comparativa simple
  • Genere una tabla para mostrar una matriz u objeto en un formato fácil de leer
  • Aplicar color y otras opciones de estilo a la salida con CSS

El objeto de la consola

El consoleobjeto le da acceso a la consola del navegador. Le permite generar cadenas, matrices y objetos que ayudan a depurar su código. El consolees parte del windowobjeto y lo proporciona el modelo de objetos del navegador (BOM).

Podemos acceder al consolede una de estas dos formas:

  1. window.console.log('This works')
  2. console.log('So does this')

La segunda opción es básicamente una referencia a la primera, por lo que usaremos la última para guardar las pulsaciones de teclas.

Una nota rápida sobre la lista de materiales: no tiene un estándar establecido, por lo que cada navegador lo implementa de formas ligeramente diferentes. Probé todos mis ejemplos tanto en Chrome como en Firefox, pero su resultado puede aparecer de manera diferente según su navegador.

Salida de texto

El elemento más común del consoleobjeto es console.log. En la mayoría de los escenarios, lo usará para hacer el trabajo.

Hay cuatro formas diferentes de enviar un mensaje a la consola:

  1. log
  2. info
  3. warn
  4. error

Los cuatro funcionan de la misma manera. Todo lo que hace es pasar uno o más argumentos al método seleccionado. Luego muestra un icono diferente para indicar su nivel de registro. En los ejemplos siguientes, puede ver la diferencia entre un registro de nivel de información y un registro de nivel de advertencia / error.

Es posible que haya notado el mensaje del registro de errores: es más llamativo que los demás. Muestra tanto un fondo rojo como un rastro de pila, donde infoy warn no. Aunque warntiene un fondo amarillo en Chrome.

Estas diferencias visuales ayudan cuando necesita identificar errores o advertencias en la consola de un vistazo. Querrá asegurarse de que se eliminen para las aplicaciones listas para producción, a menos que estén allí para advertir a otros desarrolladores que están haciendo algo mal con su código.

Sustituciones de cuerdas

Esta técnica utiliza un marcador de posición en una cadena que se reemplaza por los otros argumentos que pasa al método. Por ejemplo:

Entrada :console.log('string %s', 'substitutions')

Salida :string substitutions

El %ses el marcador de posición para el segundo argumento 'substitutions'que viene después de la coma. Cualquier cadena, número entero o matriz se convertirá en una cadena y reemplazará al %s. Si pasa un objeto, se mostrará [object Object].

Si desea pasar un objeto, debe usar %oo en %Olugar de %s.

console.log('this is an object %o', { obj: { obj2: 'hello' }})

Números

La sustitución de cadenas se puede utilizar con números enteros y valores de punto flotante mediante:

  • %io %dpara enteros,
  • %f para puntos flotantes.

Entrada :console.log('int: %d, floating-point: %f', 1, 1.5)

Salida :int: 1, floating-point: 1.500000

Los flotadores se pueden formatear para mostrar solo un dígito después del punto decimal usando %.1f. Puede hacer %.nfpara mostrar n cantidad de dígitos después del decimal.

Si formateamos el ejemplo anterior para mostrar un dígito después del punto decimal para el número de punto flotante, se vería así:

Entrada :console.log('int: %d, floating-point: %.1f', 1, 1.5)

Salida :int: 1, floating-point: 1.5

Especificadores de formato

  1. %s| reemplaza un elemento con una cadena
  2. %(d|i)| reemplaza un elemento con un número entero
  3. %f | reemplaza un elemento con un flotador
  4. %(o|O)| El elemento se muestra como un objeto.
  5. %c| Aplica el CSS proporcionado

Plantillas de cadenas

Con la llegada de ES6, los literales de plantilla son una alternativa a las sustituciones o la concatenación. Usan comillas invertidas (``) en lugar de comillas, y las variables van dentro ${}:

const a = 'substitutions';
console.log(`bear: ${a}`);
// bear: substitutions

Los objetos se muestran como [object Object]literales de plantilla, por lo que deberá utilizar la sustitución con %oo %Opara ver los detalles, o registrarlo por separado por sí mismo.

Using substitutions or templates creates code that’s easier to read compared to using string concatenation: console.log('hello' + str + '!');.

Pretty color interlude!

Now it is time for something a bit more fun and colorful!

It is time to make our console pop with different colors with string substitutions.

I will be using a mocked Ajax example that give us both a success (in green) and failure (in red) to display. Here’s the output and code:

const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center'].join(';');
const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center'].join(';');
console.info('%c /dancing/bears was Successful!', success);console.log({data: { name: 'Bob', age: 'unknown'}}); // "mocked" data response
console.error('%c /dancing/bats failed!', failure);console.log('/dancing/bats Does not exist');

You apply CSS rules in the string substitution with the %c placeholder.

console.error('%c /dancing/bats failed!', failure);

Then place your CSS elements as a string argument and you can have CSS-styled logs. You can add more than one %c into the string as well.

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

This will output the words ‘red’, ‘blue’ and ‘white’ in their respected colors.

There are quite a few CSS properties supported by the console. I would recommend experimenting to see what works and what doesn’t. Again, your results may vary depending on your browser.

Other available methods

Here are a few other available console methods. Note that some items below have not had their APIs standardized, so there may be incompatibilities between the browsers. The examples were created with Firefox 51.0.1.

Assert()

Assert takes two arguments — if the first argument evaluates to a falsy value, then it displays the second argument.

let isTrue = false;
console.assert(isTrue, 'This will display');
isTrue = true;
console.assert(isTrue, 'This will not');

If the assertion is false, it outputs to the console. It’s displayed as an error-level log as mentioned above, giving you both a red error message and a stack trace.

Dir()

The dir method displays an interactive list of the object passed to it.

console.dir(document.body);

Ultimately, dir only saves one or two clicks. If you need to inspect an object from an API response, then displaying it in this structured way can save you some time.

Table()

The table method displays an array or object as a table.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);

The array’s indices or object property names come under the left-hand index column. Then the values are displayed in the right-hand column.

const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table(superhero);

Note for Chrome users: This was brought to my attention by a co-worker but the above examples of the table method don’t seem to work in Chrome. You can work around this issue by placing any items into an array of arrays or an array of objects:

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);
const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table([superhero]); 

Group()

console.group() is made up of at least a minimum of three console calls, and is probably the method that requires the most typing to use. But it’s also one of the most useful (especially for developers using Redux Logger).

A somewhat basic call looks like this:

console.group();console.log('I will output');console.group();console.log('more indents')console.groupEnd();console.log('ohh look a bear');console.groupEnd();

This will output multiple levels and will display differently depending on your browser.

Firefox shows an indented list:

Chrome shows them in the style of an object:

Each call to console.group() will start a new group, or create a new level if it’s called inside a group. Each time you call console.groupEnd() it will end the current group or level and move back up one level.

I find the Chrome output style is easier to read since it looks more like a collapsible object.

You can pass group a header argument that will be displayed over console.group:

console.group('Header');

You can display the group as collapsed from the outset if you call console.groupCollapsed(). Based on my experience, this seems to work only in Chrome.

Time()

The time method, like the group method above, comes in two parts.

A method to start the timer and a method to end it.

Once the timer has finished, it will output the total runtime in milliseconds.

To start the timer, you use console.time('id for timer') and to end the timer you use console.timeEnd('id for timer') . You can have up to 10,000 timers running simultaneously.

The output will look a bit like this timer: 0.57ms

It is very useful when you need to do a quick bit of benchmarking.

Conclusion

There we have it, a bit of a deeper look into the console object and some of the other methods that come with it. These methods are great tools to have available when you need to debug code.

There are a couple of methods that I have not talked about as their API is still changing. You can read more about them or the console in general on the MDN Web API page and its living spec page.