Home-theater-designers
La consola del navegador web es una de las herramientas más utilizadas para depurar aplicaciones de front-end. La API de la consola proporciona a los desarrolladores la capacidad de abordar errores y registrar mensajes.
console.log () es probablemente el método más utilizado en la API de la consola, pero también hay otros métodos que puede utilizar en su flujo de trabajo. Esta guía le muestra los diferentes métodos de la consola del navegador web que puede utilizar para mejorar su flujo de trabajo de depuración.
¿Por qué es importante el registro?
Iniciar sesión en la consola del navegador web es uno de los mejores métodos para depurar aplicaciones front-end o basadas en JavaScript.
Relacionado: 6 marcos de JavaScript que vale la pena aprender
La mayoría de los navegadores web modernos admiten la API de consola, lo que la hace disponible para los desarrolladores. El objeto de la consola es responsable de proporcionar acceso a la consola de depuración del navegador. La implementación puede ser diferente en los navegadores, pero la mayoría de los métodos funcionarán en todos los navegadores modernos.
Propina : La consola de su navegador puede ejecutar todo el código que se describe en esta guía. prensa F12 en su teclado para abrir las herramientas de los desarrolladores del navegador en Chrome o Firefox.
Mensajes de cadena de registro
Uno de los métodos de consola más comunes es console.log () . Simplemente envía un mensaje de cadena o algún valor a la consola web. Para valores simples o mensajes de cadena, el console.log () El método es probablemente la mejor opción para usar.
explorador de archivos de Windows 10 muy lento
Para generar un Hola Mundo mensaje, puede utilizar lo siguiente.
|_+_|Otra característica especial del console.log () El método es la capacidad de imprimir la salida de elementos DOM o la estructura de una parte de un sitio web, por ejemplo, para dar salida a la estructura del elemento del cuerpo y todo lo que contiene, utilice lo siguiente.
|_+_|
La salida es una colección de elementos DOM como un árbol HTML.
Registro de objetos JavaScript interactivos
los console.dir () El método se utiliza para registrar propiedades interactivas de objetos JavaScript. Por ejemplo, puede usarlo para ver los elementos DOM en una página web.
La salida típica del console.dir () El método consta de todas las propiedades del Objeto JavaScript especificado en formato JSON. Utilice el método siguiente para imprimir las propiedades de todos los elementos en el cuerpo de una página HTML:
|_+_|Evaluar expresiones
Es posible que esté familiarizado con los métodos de aserción de las pruebas unitarias, bueno, console.assert () El método funciona de manera similar. Utilizar el console.assert () método para evaluar una expresión o condición.
Cuando falla el método de aserción, la consola imprime un mensaje de error; de lo contrario, no imprime nada. Utilice el siguiente código para evaluar si la edad de una persona es mayor de 18 años:
|_+_|La afirmación anterior falla y se imprime un mensaje de error en consecuencia.
Registro de datos en tablas
Utilizar el mesa de consola() método para mostrar datos en formato tabular. Los buenos candidatos para mostrar en forma de tabla incluyen matrices o datos de objetos.
Nota : Algunos navegadores, como Firefox, tienen un límite máximo de 1000 filas que se pueden mostrar con el mesa de consola() método.
Suponiendo que tiene la siguiente matriz de objetos de automóvil:
|_+_|Puede mostrar la matriz de arriba en una tabla usando el método siguiente:
|_+_|Registro de mensajes por categoría
Los mensajes de la consola del navegador web se clasifican principalmente en tres grupos: error, advertencia e información.
Errores
Para imprimir específicamente mensajes de error en la consola usando el console.error () método, los mensajes relacionados con el error se muestran en fuente roja.
|_+_|Advertencias
Para imprimir advertencias, utilice lo siguiente. Como ocurre con la mayoría de los escenarios, los mensajes de advertencia se muestran en naranja:
|_+_|Información
Para imprimir información general en la consola, utilice el console.info() método:
|_+_|Es fácil filtrar o encontrar mensajes en la consola del navegador cuando están categorizados correctamente.
Seguimiento del flujo del programa
Utilizar el console.trace () método para imprimir un seguimiento de pila del flujo o ejecución del programa. Esta es una característica muy útil para la depuración porque imprime el orden en que se ejecutan las funciones en su programa.
Ver el console.trace () método en acción, puede crear tres funciones (como se muestra a continuación) y colocar un seguimiento de pila en una de las funciones.
|_+_|En la consola de su navegador, llame o active functionOne () y obtendrá un seguimiento de la pila de las llamadas de función impresas en el último en entrar, primero en salir (LIFO) porque es una pila.
Ejecución del programa de tiempo
Para calcular el tiempo que tarda una operación en ejecutarse en su programa, puede utilizar el console.time () método. console.time () se utiliza normalmente junto con el console.timeEnd () método en el que se utiliza este último para finalizar el temporizador.
Puede tener hasta 10,000 temporizadores en ejecución por página web, lo que destaca la importancia de etiquetar correctamente sus temporizadores.
Para medir el tiempo que tarda un bucle for en recorrer los números del 1 al 50.000, puede utilizar el temporizador de la siguiente manera.
|_+_|Contando
los console.count () El método se utiliza para realizar un seguimiento del número de veces que se ha llamado a una función o algún fragmento de código en un programa. Por ejemplo, podemos realizar un seguimiento del número de veces que se ha ejecutado un bucle for de la siguiente manera:
|_+_|Agrupar mensajes de registro
Al igual que el método del temporizador, el console.group() , y console.groupEnd () Los métodos se suelen utilizar por parejas.
El método de grupo le ayuda a organizar mejor sus mensajes de registro. Por ejemplo, podemos crear un grupo de mensajes de advertencia con la etiqueta advertencias de la siguiente manera.
|_+_|Los dos mensajes dentro del grupo de advertencia se clasifican visualmente como se muestra en el resultado a continuación.
Limpiar la consola
Por último, pero no menos importante, aquí hay varias formas en las que puede borrar los mensajes de registro en la consola de su navegador.
Utilizar el console.clear () método de la siguiente manera.
|_+_|También puede borrar la consola del navegador mediante los métodos abreviados de teclado del navegador.
Google Chrome : Ctrl + L
Firefox : Ctrl + Mayús + L
Usar la consola del navegador al máximo
Esta guía le ha mostrado algunos de los diferentes métodos de consola de navegador web disponibles para ayudarlo a depurar aplicaciones de front-end. La API de la consola es muy liviana, fácil de aprender y ampliamente compatible con la mayoría de los navegadores modernos.
cómo borrar mi cuenta de Outlook
¡Realice una validación CAPTCHA desde su próximo proyecto y ponga a prueba sus nuevas habilidades de depuración!
Cuota Cuota Pío Correo electrónico Cree un formulario de validación CAPTCHA usando HTML, CSS y JavaScriptProteja sus sitios web con la validación CAPTCHA.
Leer siguiente Temas relacionados- Programación
- Desarrollo web
- JavaScript
Mwiza desarrolla software de profesión y escribe extensamente en Linux y programación front-end. Algunos de sus intereses incluyen historia, economía, política y arquitectura empresarial.
Más de Mwiza KumwendaSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse