Una guía para los comandos de la consola.

La consola de depuración del desarrollador ha estado disponible de una forma u otra en los navegadores web durante muchos años. Comenzando como un medio para informar errores al desarrollador, sus capacidades han aumentado de muchas maneras; como registrar automáticamente información como solicitudes de red, respuestas de red, errores de seguridad o advertencias.

También existe una forma de JavaScript de un sitio web activo con varios comandos que se envían a la consola con fines de depuración. Estos comandos están contenidos en un objeto de consola disponible en casi todos los navegadores. Aunque estas características son en su mayoría consistentes entre navegadores, existen algunas diferencias. Algunas de estas diferencias son simplemente de naturaleza visual, mientras que otras tienen ligeras diferencias funcionales a tener en cuenta.

Para los curiosos, aquí está la especificación de WHATWG vinculada desde los documentos de la consola MDN.

Esta guía cubre lo que está disponible en el objeto de consola de Firefox y Chrome, ya que suelen ser los navegadores de desarrollo más populares y tienen algunas diferencias en varios aspectos de la consola. El nuevo Edge basado en Chromium es esencialmente igual a Chrome en muchos aspectos, por lo que, en la mayoría de los casos, los comandos de la consola funcionarán de manera muy similar.

enlaces rápidos

• inicio sesión
• claro
• Comandos comunes
• Sustitución de cadenas
• Diseñar la salida
• Afirmaciones
• Comandos de conteo
• Propiedades del listado
• Comandos de grupo
• Comando de tabla
• Comandos de tiempo
• Mostrando rastros
• comando del purificador
• Utilidades de la consola

---

El comando console.log

Lo primero que podemos hacer es registrar el objeto de la consola para ver qué ofrece realmente el navegador de su elección.

console.log(console);

Este comando generará las diversas propiedades del objeto de la consola tal como las conoce el navegador. La mayoría de ellas son funciones y serán bastante consistentes independientemente del navegador. Si hay diferencias en las propiedades del objeto de consola de un navegador a otro, de esta manera podrás ver las diferencias. Una de esas diferencias que puedo señalar entre Firefox y Chrome es que Chrome proporciona una propiedad de “memoria” que genera algunas estadísticas básicas de uso de memoria. Firefox no proporciona esta propiedad y aún así tiene una propiedad de “nombre” que Chrome no tiene.

Afortunadamente, la mayoría de las diferencias entre los navegadores tienden a ser igualmente triviales. De esa manera, puede estar bastante seguro de que su código generará el mismo resultado independientemente del navegador que utilice.

Lo primero es lo primero: borrar()

Con el uso intensivo de la consola, se produce una producción de texto muy poblada. A veces sólo quieres aclarar las cosas y empezar con una consola nueva. Los navegadores suelen proporcionar un botón en DevTools que realiza esta tarea. Sin embargo, el propio objeto de la consola también proporciona un comando para manejar esto:

console.clear();

Esto borrará la consola y le informará útilmente al mostrar un mensaje como “La consola se borró”.

Uso común: depuración(), error(), información(), registro() y advertencia()

Hay cinco comandos que a primera vista parecen hacer exactamente lo mismo. Y, técnicamente, lo hacen. Pero los navegadores proporcionan funciones adicionales vinculadas a los cinco comandos para brindar a cada uno su propio beneficio distintivo.

Estos cinco comandos son:

console.debug();console.error();console.info();console.log();console.warn();

Estoy seguro de que muchos de ustedes lo han visto console.log()antes (quiero decir, acabamos de hablar de ello arriba) y probablemente lo hayan usado antes. Antes de entrar en lo que puede iniciar sesión con estos cinco comandos, veamos nuestra primera diferencia menor entre Chrome y Firefox.

Este es un ejemplo en Chrome de cada comando que genera una cadena, como console.debug('console.debug()');. Observe que algunos de ellos tienen un tratamiento de color para dar una indicación visual del tipo de salida. Las salidas de error y advertencia tienen un icono adicional para una identificación aún más sencilla.

Aquí está la misma lista en Firefox y, aunque parece similar, hay tres diferencias menores. Por ejemplo, console.debug()no está codificado por colores y console.info()tiene un ícono adicional al lado. En Chrome, ambos console.error()y console.warn()se pueden expandir para mostrar información adicional sobre la salida, mientras que Firefox solo lo hace con console.error(). Esta información adicional proporciona un rastro de las líneas de código involucradas para llegar al lugar donde se llama el comando en particular.

Una cosa útil de estos cinco comandos es que los navegadores brindan opciones de filtrado para mostrar u ocultar cada tipo como desee. Firefox los tiene allí, en la parte superior de la consola, encima de la salida, mientras que Chrome los oculta en un menú desplegable, denominado “Todos los niveles”, que puede ver en la captura de pantalla anterior de la consola Chrome. “Todos los niveles” está ahí porque tengo los cinco configurados para mostrarse. Si elige la opción “Predeterminada”, la salida de depuración (que aparece como “Detallada”) se oculta mientras se muestran las demás. Al desmarcar “Información”, “Advertencias” o “Errores”, el menú desplegable muestra un título diferente, como “Niveles personalizados” o “Solo errores”, según lo que esté seleccionado.

Las intenciones de uso de error y advertencia son fáciles de determinar; Cómo utilizar las otras opciones depende de usted. Si hace un uso extensivo de las diferentes opciones, entonces podría considerar documentar las expectativas de cada una para no confundir las cosas al final del proyecto, especialmente si se trata de un proyecto de equipo.

Ahora, analicemos qué podemos realmente iniciar sesión dentro de estos comandos. Como todos se comportan igual, me centraré únicamente en el registro como ejemplo.

Los ejemplos más simples implican simplemente pasar una cadena, número, objeto o matriz al comando de registro. Técnicamente, se puede utilizar cualquiera de los tipos de datos de JavaScript, pero para la mayoría de ellos, el resultado es prácticamente el mismo.

console.log('string');console.log(42);console.log({object: 'object'});console.log(['array', 'array']);

Estoy mostrando estos ejemplos en Chrome con el objeto y la matriz ya expandidos. Normalmente están colapsados, pero el resultado junto a la flecha es coherente entre ambos estados. Firefox se muestra un poco diferente pero, en su mayor parte, el resultado es el mismo. Firefox le indica si muestra un objeto o una matriz antes de expandirse, pero muestra lo mismo que Chrome mientras está expandido.

Una cosa interesante que agregar es que puede pasar más de un elemento al registro como parámetros y los mostrarán en línea.

console.log('string', 'string');console.log(42, 1138);console.log({object: 'object'}, {object: 'object'});console.log(['array', 'array'], ['array', 'array']);

A menudo, cuando trabajo con coordenadas xey, como lo que pueden generar los eventos del mouse, es útil registrar las dos juntas en una sola declaración.

Sustitución de cadenas

Los diferentes comandos de registro de la consola proporcionan sustitución de cadenas que permiten insertar diferentes valores en la cadena para la salida. Esto es útil para describir una variable en el registro y dejar claro lo que se informa.

console.log('This is a string: %s', 'string');console.log('This is a number: %i', 42);console.log('This is an object: %o', {object: 'object'});

Aquí hay una lista de los tipos de datos que se pueden sustituir en la cadena de salida:

Tipo de datos	Símbolo de sustitución
Objetos y matrices	%ooh%O
enteros	%doh%i
Instrumentos de cuerda	%s
flotadores	%f

El primer parámetro sería la cadena a generar con los símbolos colocados en las ubicaciones apropiadas. Luego, cada parámetro posterior es el valor a sustituir dentro de la cadena del primer parámetro. Tenga en cuenta que deberá mantener los tipos de sustitución y los parámetros en el orden específico para obtener resultados inesperados.

Si su consola admite literales de plantilla, es un poco más fácil obtener resultados similares a los de la sustitución de cadenas.

console.log(`This is a string: ${'string'}`);console.log(`This is a number: ${42}`);console.log(`This is an object: ${{object: 'object'}}`);

Tenga en cuenta que el objeto se maneja un poco mejor con la sustitución de cadenas, así que elija la opción adecuada a sus necesidades. Dado que es posible insertar más de un valor en la salida, comparemos los dos.

console.log('This is a string: %s. This is a number: %i', 'string', 42);console.log(`This is a string: ${'string'}. This is a number: ${42}`);

Con la sustitución de cadenas, cada valor se agrega como un parámetro para insertarse en la salida. Con los literales de plantilla, por otro lado, los agrega donde sea necesario en la salida. Además, puedes combinarlos.

console.log(`This is a number: ${42}. This is an object: %o`, {object: 'object'});

Por lo tanto, hay muchas opciones para elegir para que pueda elegir las mejores opciones para sus necesidades.

Diseñar la salida

Otra cosa potencialmente útil y divertida es que puedes aplicar estilos CSS a la salida de la consola. Funciona igual que el método de sustitución de cadenas en el que se inserta una %cvariable para que se apliquen estilos desde los parámetros.

He aquí un ejemplo sencillo:

console.log('%cThis is large red text', 'color: red; font-size: 30px;');

Esta vez hay una ligera diferencia en la salida de Firefox:

Realmente no es una gran diferencia, pero es algo a tener en cuenta.

Lo que esencialmente sucede es que %clee las cadenas en los parámetros para determinar qué estilo aplicar. Entonces, digamos que se pasa un segundo estilo, %cse pasa al siguiente parámetro, muy parecido a la sustitución de cadenas. Una cadena vacía en la lista de parámetros restablece el estilo al valor predeterminado.

console.log('This is %cred text %cand this is %cgreen text.', 'color: red;', '', 'color: green;');

Las propiedades de estilo disponibles son bastante limitadas en comparación con el estilo CSS típico de una página web. Puedes verlo como una especie de bloque de texto en línea que te permite manipular un conjunto limitado de propiedades de estilo.

Con un poco de trabajo y experimentación, puedes crear mensajes interesantes dentro de la consola. Una idea es llamar la atención sobre un registro en particular, especialmente sobre un error de algún tipo.

console.log('%cHello there!', `  background: white;  border: 3px solid red;  color: red;  font-size: 50px;  margin: 40px;  padding: 20px;`);

En este ejemplo, podemos ver que CSS es un poco detallado, pero hay algo que podemos hacer para imitar el sistema de clases que aprovechamos en CSS. Los valores de cada parámetro para el estilo se pueden almacenar en variables para permitir un uso repetido sin tener que duplicar la cadena de estilos en cada parámetro.

const clearStyles = '';const largeText = 'font-size: 20px;';const yellowText = 'color: yellow;';const largeRedText = 'font-size: 20px; color: red;';const largeGreenText = 'font-size: 20px; color: green;';
console.log(`This is %clarge red text.%cThis is %clarge green text.%cThis is %clarge yellow text.`,  largeRedText,  clearStyles,  largeGreenText,  clearStyles,  largeText + yellowText);

Están sucediendo varias cosas aquí, así que analicémoslas un poco. Primero, tenemos una colección de variables que contiene nuestras cadenas de estilo. Piense en cada uno como una especie de clase que se puede reutilizar en los parámetros del registro de la consola.

También utilizamos una plantilla literal en el registro, lo que significa que podemos tener saltos de línea en nuestra salida. Luego, para cada parte %cdel texto, hay una variable correspondiente que se usa en un parámetro para definir los estilos para esa parte particular del texto de salida. Además de cada variable que contiene estilo, también hay un clearStylesargumento que se puede utilizar para restablecer estilos y prepararse para el siguiente conjunto de estilos. Podrías usar una cadena vacía como en ejemplos anteriores, pero me gusta la intención clara que surge al usar el nombre de la variable. El último parámetro muestra que las variables se pueden combinar, lo que abre más formas posibles de manejar los estilos.

Ahora, esa es una gran cantidad de texto que cubre esencialmente cinco comandos de consola que solo envían texto a la consola. Entonces, pasemos a otros comandos del objeto de consola. Aunque algunos de estos aún pueden usar muchas de las características descritas hasta ahora, no nos centraremos tanto en ese aspecto con los siguientes comandos.

Ser asertivo: afirmar()

El console.assert()comando es similar al comando de error mencionado anteriormente. La diferencia es que la afirmación permite el uso de una condición booleana para determinar si debe enviar el texto a la consola.

Por ejemplo, digamos que desea probar el valor de una variable y asegurarse de que no sea mayor que un valor numérico determinado. Si la variable está por debajo de ese número y la condición se resuelve como verdadera, el comando de afirmación no hace nada. Si la condición se resuelve como falsa, se muestra el texto de salida. De esta manera, no es necesario incluir un console.error()comando con una ifdeclaración para determinar si el mensaje de error es necesario en primer lugar.

let value = 10;console.assert(value = 7, 'The value is greater than 7.');

Podemos ver que afirmar tiene la misma apariencia que el comando de error, excepto que también antepone “Error de afirmación:” al texto de salida. Chrome también puede expandir esta salida para mostrar un rastro de dónde vino la afirmación.

El seguimiento puede resultar muy útil con patrones comunes de funciones dentro de funciones que llaman a otras funciones, etc. Sin embargo, puedes ver en el ejemplo anterior que la línea de la que proviene la afirmación no te dice cómo llegó el código a esa línea.

let value = 10;
function function_one () {  function_two();}
function function_two () {  function_three();}
function function_three() {  console.assert(value  7, 'This was false.');}
function_one();

En realidad, esta secuencia está en orden inverso en términos del código. La última línea muestra una entrada anónima (que en este caso es una etiqueta de script HTML) en la línea 78. Ahí es donde function_onese llamó. Dentro de esa función, tenemos una llamada a function_two, que, a su vez, llama a function_three. Dentro de esa última función es donde se ubica la afirmación. Entonces, en este mundo de desarrollo de funciones que comparten otras funciones; una descripción del camino hasta ese punto de la afirmación es bastante útil.

Desafortunadamente, este seguimiento no se proporciona en Firefox con el comando de afirmación, como ocurre con el comando de error.

Llevar la cuenta: count() y countReset()

¿Alguna vez te has preguntado cuántas veces sucede algo determinado en tu código? Por ejemplo, ¿cuántas veces se llama a una función particular durante una secuencia de eventos? Ahí es donde el console.count()comando puede ayudar.

Por sí solo, el comando de conteo es bastante simple y tiene un uso limitado. Si usa el comando en su estado predeterminado, solo obtendrá un recuento simple. Por ejemplo, si lo llamamos tres veces seguidas, obtenemos un recuento secuencial.

console.count();console.count();console.count();

Como puede ver, obtenemos una cuenta simple del uno al tres. El comportamiento predeterminado significa que el recuento simplemente incrementa la salida en uno cada vez que se ejecuta, sin importar dónde aparezca en el código. Obtienes el número de línea en el código donde sucedió, pero el recuento es un total simple sin importar la situación.

Para que este comando sea un poco más útil, podemos proporcionar una etiqueta para mantener un recuento separado para esa etiqueta.

console.count('label A');console.count('label B');console.count('label A');console.count('label B');console.count('label A');console.count('label B');

Aunque el uso del comando de conteo con etiquetas hace que la salida alterne entre etiquetas, cada una mantiene su propio conteo. Un escenario en el que esto resulta útil es colocar un recuento dentro de una función para que cada vez que se llame a esa función, el recuento se incremente. La opción de etiqueta permite mantener un recuento de funciones individuales para proporcionar una buena idea de cuántas veces se llama a cada función. Esto es excelente para solucionar problemas de cuellos de botella en el rendimiento o simplemente para ver cuánto trabajo está haciendo una página.

Hay una manera de restablecer el conteo. Digamos que tenemos un bucle que se llama varias veces, pero el número de iteraciones del bucle puede ser dinámico. Esto se hace con el console.countReset()comando con la misma etiqueta del comando de conteo.

console.count();console.count();console.countReset();console.count();
console.count('this is a label');console.count('this is a label');console.countReset('this is a label');console.count('this is a label');

Cada recuento, con y sin etiqueta, se llama dos veces y console.countReset()se aplica justo antes de otra instancia de recuento. Puede ver que Chrome cuenta hasta dos y luego se reinicia cuando encuentra countReset. No hay nada en DevTools que indique que ocurrió el reinicio, por lo que se supone que sucedió porque el conteo comenzó de nuevo.

Y, sin embargo, el mismo código es un poco diferente en Firefox.

Aquí, el reinicio se indica cuando el conteo se restablece completamente a cero. Ese es el indicador de que se realizó el reinicio, mientras que no tenemos tal indicación en Chrome.

En cuanto a las opciones de etiquetas, se puede utilizar casi cualquier cosa. Supongo que una forma sencilla de describirlo es que si le das algo que pueda resolverse en una cadena, probablemente funcionará como etiqueta. Incluso podría usar una variable que tenga valores que cambien con el tiempo, donde el recuento usará el valor actual de la variable como etiqueta cada vez que se encuentre. Por lo tanto, puede llevar la cuenta de los valores a medida que cambian con el tiempo.

Describe esa cosa: dir() y dirxml()

La idea principal detrás de estos dos comandos es mostrar propiedades de un objeto Javascript con console.dir()o elementos descendientes de un elemento XML/HTML con console.dirxml(). Parece que Chrome los tiene implementados como se esperaba, mientras que Firefox solo usa ambos como alias para console.log().

Demos console.log(), console.dir()y console.dirxml()el mismo objeto simple para ver qué obtenemos. Tenga en cuenta que normalmente no registraría un objeto con console.dirxml().

const count = {  one: 'one',  two: 'two',  three: 'three'};
console.log(count);console.dir(count);console.dirxml(count);

Firefox nos ofrece prácticamente lo mismo, excepto que console.dir()se expande automáticamente.

Otra comparación simple console.log()es repetir el objeto en el mismo comando.

En realidad, no es muy diferente aparte de que Chrome no muestra el segundo objeto console.dir()como lo hace Firefox. Lo cual tiene sentido porque Chrome intenta mostrar las propiedades de un objeto (ignorando el segundo) mientras que Firefox simplemente asigna un alias a todo a un archivo console.log(). Entonces, para situaciones como ésta con objetos hay poca diferencia entre console.log(), console.dir()y console.dirxml()en los navegadores.

Un beneficio útil de console.dir()Chrome que puedo señalar es cómo se manejan los elementos DOM. Por ejemplo, así es como console.log()se muestra en Chrome y Firefox cuando se le asigna un elemento DOM.

Ahora, siempre me ha gustado cómo Firefox genera un elemento DOM dentro de a console.log(), ya que te brinda todas las propiedades de ese elemento DOM. Entonces, cuando quería buscar una propiedad específica de un elemento DOM para manipularla con JavaScript, solo estaba a una console.log()distancia de encontrarla. Chrome, por otro lado, nos proporciona el código HTML del elemento DOM tal console.log()como lo haría en console.dirxml().

Para obtener las propiedades en Chrome, utilícelas console.dir()con el elemento DOM. Me alegró mucho descubrir que console.dir()en Chrome proporciona las propiedades de un elemento DOM tal como llegué a confiar en esa información en Firefox.

En cuanto console.dirxml()a Chrome, puede resultar útil para mostrar un elemento HTML y sus elementos secundarios fuera del desorden del Inspector DOM. Incluso puedes editar parte del HTML existente en vivo en la consola, pero no tendrás el mismo nivel de habilidades que en el Inspector DOM.

Reunámonos: grupo(), grupoCollapsed() y grupoEnd()

Aquí hay uno simple: agrupe diferentes salidas de consola para mostrar una forma de relación entre ellas. Tiene características algo limitadas por lo que su utilidad dependerá en gran medida de cómo planees usarlo. Este es el console.group()comando.

console.group();console.log('one');console.log('two');console.log('three');console.groupEnd();
console.group('this is a label');console.log('one');console.log('two');console.log('three');console.groupEnd();

En el primer bloque de código llamamos console.group()en su estado predeterminado, tenemos tres registros y finalmente llamamos console.groupEnd(). Simplemente console.groupEnd()define el final de la agrupación. El segundo bloque tiene una cadena como parámetro que esencialmente se convierte en la etiqueta de ese grupo. Observe que en el primer bloque sin etiqueta simplemente se identifica como console.groupen Chrome mientras que en Firefox se muestra como no group label. En la mayoría de los casos, querrás una etiqueta adecuada para distinguir entre grupos.

Observe también la flecha al lado de las etiquetas. Al hacer clic en eso, se colapsa el grupo. En los ejemplos de código anteriores, si cambiamos console.group()a console.groupCollapsed(), comienzan contraídos y deben abrirse para ver el resultado.

También puedes anidar los grupos. El console.groupEnd()comando simplemente hace referencia al último grupo abierto.

console.group('outer group');console.log('outer one');console.log('outer two');console.group('inner group');console.log('inner one');console.log('inner two');console.log('inner three');console.groupEnd();console.log('outer three');console.groupEnd();

Solo como nota rápida, si desea que la etiqueta del grupo se destaque un poco más en una lista de salida en la consola, puede aplicarle estilo tal como lo hicimos anteriormente con las cadenas.

console.group('%cstyled group', 'font-size: 20px; color: red;');console.log('one');console.log('two');console.log('three');console.groupEnd();

Tome asiento en la: mesa()

En ejemplos anteriores, hemos visto lo que sucede cuando colocamos una matriz u objeto dentro de console.log()o console.dir(). Hay otra opción para estos tipos de datos para una visualización más estructurada, que es console.table().

Aquí hay un ejemplo simple con una matriz:

let basicArray = [  'one',  'two',  'three'];console.table(basicArray);

Aquí tienes el mismo ejemplo en Firefox para comparar.

Una ligera diferencia visual, pero más o menos igual. Dicho esto, Chrome todavía te ofrece la salida expandible debajo de la mesa, como se ve en console.log(). Chrome también proporcionará una clasificación básica de columnas si hace clic en el encabezado.

El resultado es similar al pasar un objeto:

let basicObject = {  one: 'one',  two: 'two',  three: 'three'};console.table(basicObject);

Entonces, ese fue un ejemplo bastante simple con resultados básicos. ¿Qué tal algo un poco más complejo y que se use a menudo en proyectos de codificación? Veamos una serie de objetos.

let arrayOfObjects = [  {    one: 'one',    two: 'two',    three: 'three'  },  {    one: 'one',    two: 'two',    three: 'three'  },  {    one: 'one',    two: 'two',    three: 'three'  }];console.table(arrayOfObjects);

Como puede ver, esto nos da un bonito diseño de objetos con claves repetidas como etiquetas de columna. Imagine datos como información del usuario, fechas o cualquier otro dato que se utilice a menudo en bucles. Tenga en cuenta que todas las claves en cada uno de los objetos se representarán como una columna, ya sea que existan claves correspondientes con datos en los otros objetos. Si un objeto no tiene datos para la columna de una clave, aparece vacío.

Una matriz de matrices es similar a una matriz de objetos. En lugar de que las claves sean etiquetas para las columnas, utiliza el índice de las matrices internas como etiquetas de columna. Entonces, si una matriz tiene más elementos que otras matrices, habrá elementos en blanco en la tabla para esas columnas. Al igual que con la variedad de objetos.

Hasta ahora, las matrices y objetos simples muestran resultados simples. Incluso un conjunto de objetos un poco más complejo todavía tiene una estructura sólida y útil. Sin embargo, las cosas pueden volverse un poco diferentes al mezclar los tipos de datos.

Por ejemplo, una matriz de matrices donde uno de los elementos internos de la matriz es un objeto.

let arrayOfArraysWithObject = [  ['one', 'two', {three: 'three', four: 'four'}],  ['one', 'two', {three: 'three', four: 'four'}],  ['one', 'two', {three: 'three', four: 'four'}]];console.table(arrayOfArraysWithObject);

Ahora, para ver qué contienen esos objetos en la tercera columna, tendremos que expandir la salida de esa matriz debajo de la tabla. No está tan mal, de verdad. Así es como Firefox maneja el mismo resultado.

Firefox simplemente nos permite expandir el objeto dentro de la tabla.

¿Qué tal mezclar los tipos de datos al revés, donde tenemos un objeto con matrices como valores para cada clave? Funciona de manera muy similar a la matriz de matrices. La diferencia es que cada fila está etiquetada con una clave en lugar del índice. Por supuesto, para cada nivel de tipo de datos que agregue a la combinación, se obtendrá una tabla de apariencia más compleja.

Se trata de: time(), timeLog() y timeEnd()

Aquí tenemos una forma sencilla de registrar cuánto tiempo tarda algo en completarse. Llamamos console.time()con una etiqueta, llamamos console.timeLog()con la misma etiqueta para una actualización y console.timeEnd()volvemos a llamar con la misma etiqueta para detener el cronómetro.

console.time('this is a timer');console.timeLog('this is a timer');console.timeEnd('this is a timer');

El resultado para Chrome y Firefox es muy similar. A continuación se muestra un resultado de ejemplo con código que registra el tiempo cada segundo durante cinco segundos y luego se detiene.

Tenga en cuenta que los tiempos informados no son exactamente los mismos, pero probablemente sean lo suficientemente cercanos para la mayoría de los requisitos. Además, Firefox es lo suficientemente amable como para notar que el cronómetro ha finalizado, mientras que Chrome requiere una suposición una vez que la etiqueta deja de aparecer. Las primeras cuatro líneas de salida provienen de la llamada console.timeLog('this is a timer');y la última línea es de la llamada a console.timeEnd('this is a timer');.

Dejar caer migas de pan con: trace()

En realidad, el console.trace()comando es similar a console.error()y console.warn(). Llamar a este comando generará un seguimiento de la pila en la consola que muestra la ruta a través del código hasta esa llamada. Incluso podemos pasarle una cadena como forma de etiqueta, pero se pueden pasar otros tipos de datos como matrices u objetos. El comportamiento de pasar datos como ese es el mismo que obtendríamos de una console.log()llamada. Es una forma sencilla de transmitir información a la consola sin provocar una mirada console.error()o console.warn()llamada más grave.

depurador

Este es un comando simple para activar una pausa en el depurador de la consola, si existe. Es similar a colocar un punto de interrupción en el depurador, o su equivalente en el navegador, para provocar el mismo tipo de pausa mientras se ejecuta el código. He aquí un ejemplo sencillo:

function whatsInHere() {  debugger;  // rest of the code}

En este ejemplo particular, el depurador de la consola abierta pausará la ejecución del código y el navegador abrirá el archivo fuente para mostrar la línea de código tan pronto como se llame a la función. Podría resultar útil para puntos de interrupción fáciles con algunos proyectos complicados.

Técnicamente, el debuggercomando no forma parte del objeto de la consola en el navegador. Es una característica útil a la que la consola responderá desde el código JavaScript.

Algunas utilidades adicionales de la consola

Este es un buen vistazo a la mayoría de los comandos estándar disponibles para nosotros en el objeto de la consola. Cada uno de estos funcionará más o menos igual en los navegadores modernos. Puede haber algunas diferencias entre navegadores, como vimos en algunos de los ejemplos. Pero hay algunas cosas más que me gustaría tomar un momento para señalar, ya que podrían res