Si participa en la programación web, esto significa que no necesita hablar sobre la importancia de la depuración en su trabajo. A menudo, las bibliotecas externas se utilizan para escribir datos en registros, formatearlos o mostrarlos en la pantalla, sin tener en cuenta el hecho de que los programadores tienen comandos JavaScript para trabajar con consolas integradas en los navegadores. Y estas consolas tienen capacidades mucho más serias de lo que parece a primera vista.
Quizás lo primero que piensan muchas personas cuando dicen "consola" es el comando
console.log() . Sin embargo, ella es solo uno de muchos de esos equipos. El material, cuya traducción publicamos hoy, está dedicado a las características de trabajar con la consola de JavaScript.
¿Qué es una consola?
La consola de JavaScript es un mecanismo integrado en los navegadores modernos que admite herramientas de desarrollo integradas en una interfaz de línea de comandos. Usando la consola, un desarrollador puede hacer lo siguiente:
- Ver registros de errores y advertencias que se producen en una página web.
- Interactúa con una página web utilizando comandos de JavaScript.
- Depure aplicaciones y trabaje con el DOM directamente desde el navegador.
- Investigar y analizar la actividad de la red.
En general, la consola le da al desarrollador la capacidad de escribir código JavaScript directamente en el navegador, monitorear lo que sucede en las páginas y administrar estos procesos.
Métodos console.log, console.error, console.warn y console.info
Probablemente los métodos más utilizados cuando se trabaja con la consola son
console.log() ,
console.error() ,
console.warn() y
console.info() . Puede pasar uno o más parámetros a estos métodos. El sistema calcula el valor de cada uno de ellos y combina todos los resultados en una cadena, partes de las cuales están separadas por espacios. En el caso de objetos o matrices, estos comandos le permiten mostrarlos en una forma que le permite ver su contenido. Así es como se ve.
Usando varios comandos para enviar datos a la consolaMétodo Console.group
El método
console.group() permite recopilar una serie de llamadas a
console.log() (así como otros métodos similares) en grupos cuyo contenido se puede contraer y expandir. El uso de este método es muy simple: después de llamar a
console.group() (o después de
console.groupCollapsed() , si desea mostrar el grupo minimizado inmediatamente), debe colocar todas las llamadas de
console.log() que deben agruparse. Luego, al final del conjunto de comandos que desea agrupar, debe colocar el comando
console.groupEnd() . Considera un ejemplo.
function doSomething(obj){ console.group('doSomething Profile'); const _data = new Date(); console.log('evaluating data: ', _data); const _fullName = `${obj.firstName} ${obj.lastName}`; console.log('fullName: ', _fullName); const _id = Math.random(1); console.log('id: ', _id); console.groupEnd(); } doSomething({"firstName":"Riccardo", "lastName":"Canella"});
Después de la ejecución de este fragmento de código, lo siguiente llegará a la consola.
Agrupando datos en la consola usando el método console.group ()Método Console.table
Después de enterarme de la existencia del método
console.table() , mi vida cambió para siempre. Por ejemplo, usar el comando regular
console.log() para generar código JSON o grandes matrices JSON es una pesadilla. El método
console.table() permite mostrar estructuras de datos complejas dentro de tablas agradables, cuyas columnas pueden recibir nombres pasándolas como parámetros (no todos los navegadores admiten esta característica
console.table() ). Aquí hay un ejemplo de trabajo con este equipo.
const typeOfConsole = [ {name:'log', type:'standard'}, {name:'info', type:'standard'}, {name:'table', type:'wow'} ]; console.table(typeOfConsole); const mySocial = { facebook: true, linkedin: true, flickr: true, instagram: true, VKontaktebadoo: false }; console.table(mySocial, ["Socials", "I'v an account"]);
Lo que sucedió, se ve muy bien y puede facilitar la depuración.
Tabularice la salida usando console.table ()Métodos console.count, console.time y console.timeEnd
Los métodos
console.count() ,
console.time() y
console.timeEnd() se pueden llamar algo así como un cuchillo suizo para un desarrollador que se dedica a depurar aplicaciones. Entonces, el método
console.count() permite contar el número de sus propias llamadas y mostrarlo en la consola con la etiqueta dada. El método
console.time() permite ejecutar un temporizador con nombre (el nombre se le pasa como parámetro, pueden estar presentes hasta 10,000 temporizadores en una página). Para detener un temporizador específico, el comando
console.timeEnd() se usa con la etiqueta del temporizador pasada como parámetro. Ella detiene el temporizador y muestra la hora de su trabajo en la consola. Aquí se explica cómo usar estos métodos.
console.time('total'); console.time('init arr'); const arr = new Array(20); console.timeEnd('init arr'); for(var i = 0; i < arr.length; i++){ arr[i] = new Object(); const _type = (i % 2 === 0) ? 'even' : 'odd'; console.count(_type+'added'); } console.timeEnd('total');
Y aquí está el resultado del trabajo de este código en la consola.
Uso de los métodos console.count (), console.time () y console.timeEnd ()Console.trace y console.assert métodos
Los métodos
console.trace() y
console.assert() permiten generar información de la pila desde el lugar donde fueron llamados. Imagine que está desarrollando una biblioteca JS y quiere decirle al usuario dónde ocurrió el error. En tal caso, estos métodos pueden ser muy útiles. El método
console.assert() es similar a
console.trace() , la diferencia entre ambos es que
console.assert() solo generará datos si no se cumple la condición que se le pasó. Aquí se explica cómo trabajar con estos métodos.
function lesserThan(a,b){ console.assert(a<b, { "message":"a is not lesser than b", "a": a, "b": b }); } lesserThan(6,5); console.trace("End");
Es fácil notar que el resultado generado por este fragmento de código se parece a algo similar en React (o en cualquier otra biblioteca) cuando el marco informa una excepción.
El resultado del uso de los comandos console.assert () y console.trace ()Comandos para trabajar con la consola y el código de producción.
Los comandos para trabajar con la consola son necesarios en la etapa de desarrollo y depuración de aplicaciones. Esto significa que cuando llegue el momento del lanzamiento del producto, estos comandos deberán eliminarse del código. Simplemente puede olvidarse de ello y, un tiempo después de ensamblar la versión de producción del proyecto, observe que el programa escribe algo en la consola cuando no es necesario. No cargue computadoras con trabajo innecesario, aunque parezca tan insignificante como enviar datos a la consola. Al mismo tiempo, dado que los comandos para trabajar con la consola pueden ser útiles durante el desarrollo de la aplicación, es mejor no eliminarlos del código fuente del programa de forma permanente, sino eliminarlos solo de su versión de producción. Aquí, los fondos para ensamblar proyectos vendrán en nuestra ayuda. Por lo tanto, uso constantemente Webpack, tanto en el trabajo como en mis propios proyectos. Esta herramienta le permite eliminar todos los comandos innecesarios para trabajar con la consola (puede distinguirlos de otros comandos) de los ensambles de producción utilizando el
complemento uglifyjs-webpack-plugin .
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') var debug = process.env.NODE_ENV !== "production"; ..... optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // uglifyOptions: { // comments: false, compress: { // warnings: false, // drop_console: true }, } })] : [] }
Esta configuración es muy simple, pero facilita el trabajo diario del programador y elimina el problema de los comandos de consola olvidados.
Resumen
En este artículo, hablamos sobre algunos comandos útiles para trabajar con la consola. Permiten, utilizando herramientas que forman parte de los navegadores modernos, resolver muchos problemas que acompañan el desarrollo y la depuración de aplicaciones JavaScript del lado del cliente.
Estimados lectores! ¿Qué tipo de comandos utiliza para trabajar con la consola de JavaScript?
