Change language
Python.Engineering Wiki Consola Javascript

Consola Javascript

__del__ | __main__ Python module | ast Python module | cmd Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | logging Python module | Lua PHP module | os Python module | PS PHP module | Python Development | Python functions | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | tty Python module | UI PHP module | uu Python module | warnings Python module
Michael Zippo Michael Zippo 04.11.2021

La programación, si bien es divertida, también puede volverse bastante aburrida.

Hay días en los que comienzas a programar, te das cuenta de que algo anda mal y te sientes muy frustrado. Es aún más molesto cuando tu código se está ejecutando, pero no puedes entender por qué no funciona correctamente; cuando hay algo en su código que necesita arreglar.

Aquí es donde la consola de JavaScript puede resultar útil. La consola le permite realizar un seguimiento de lo que sucede en su código. Esto hace que sea más fácil entender qué es lo que está mal con su código.

En esta guía, veremos cómo usar la consola de JavaScript. También proporcionaremos una aplicación de muestra usando la consola para que pueda dominar rápidamente la consola de JavaScript.

La consola de JavaScript

Desarrollador, conozca la consola. Pasará mucho tiempo en la consola durante su tiempo como desarrollador, por lo que es algo con lo que deberá familiarizarse.

La consola es un lugar donde puede ver mensajes mientras su aplicación se está ejecutando y donde puede manipular el contenido de una página web.

Puede indicarle a su código que registre mensajes en la consola y se mostrarán cuando los señale. También puede usar la consola para modificar variables, valores e inspeccionar valores ‚Äã‚Äãalmacenados en una variable.

Para mostrar su consola, debe abrir las herramientas de desarrollo. En Chrome, puede hacer esto usando Ctrl + Shift + I en Windows o Cmd + Alt + I en Mac. En Firefox, puede abrir las Herramientas para desarrolladores usando Comando + Opción + K.

Cuando lo haga, aparecerá una ventana como esta abierta:

TLj9KUG2pZw3HEqt1Kd SIV W S3Q7V6c ENnQRQE3n6NLVfYCr8zKt87A6nme3UmpfmSQTH23pRMpqIpTae3nm6ynDMkbHfBJnd5ukbHBxsW8edoMJJGT4iwEZDZ6nNrXDsIlk> Todos los modernos los navegadores tienen su propia consola de herramientas . margen superior: 0em; margen inferior: 0.5em ; . u6ff3233254f965cfe7e30aab4cadena: 0 ; relleno: 0; arriba: 1 em! Importante ; parte inferior del relleno: 1 em! Importante ; ancho: 100 % ; bloqueo de pantalla ; peso de fuente: 700; color de fondo: #FFF ; borde: 0! Importante ; border -left: ¡Herencia sólida de 4px! Importante ; decoración de texto: ninguno} .u6ff3233254f965cfe7e30aab4ca92b86: activo, .u6ff3233254f965cfe7e30aab4ca92b86: hover {opacidad: 1; transición: opacidad 250 ms; transición de webkit: 250 ms; opacidad 250ms; webkit 30 72ms; transición: opacidad 250 ms .u6ff3233254f965cfe7e30aab4ca92b86 .ctaText} {peso de fuente: 700; color: # 000; decoración de texto: ninguna; tamaño de fuente: 16px} .u6ff3233254f30965cfe72 86 ; # 3Title9595 -decoration: underline> important}

Presentación de la consola

Comenzaremos mostrando un mensaje en la consola. puede hacer esto sin siquiera tener una página web abierta. Simplemente abra la consola del navegador y escriba las instrucciones de JavaScript que desea ejecutar.

Hay tres métodos principales que usará en la consola:

  • console .log(): muestra un mensaje en la consola.
  • console.warn(): muestra una advertencia en la consola.
  • console.error (): muestra un error en la consola.

Antes de continuar, no debe pegar nada en su consola sin antes saber para qué es el código. Muchos sitios modernos le advierten sobre esto porque hay estafas que usan la consola para obtener acceso a información confidencial del usuario. < br>

Dicho esto, vamos ! Para mostrar un mensaje en la consola, puede usar este código:

Tan pronto como ejecute este comando, se devolverá lo siguiente.

También puede ver los errores y advertencias en la consola La diferencia entre errores y advertencias y una declaración tradicional de log () es que los errores y las advertencias se muestran en naranja y rojo, respectivamente:

nuestro código devuelve: ITALIA

GXz6eGAaJ96el M5cfzcRpa196fdNovCUxjUJQ2PhfTS6qzu40XrYivl5mtxBeUZGiTWoAe PIwF4SarOiG4St KfpQwMepeoqJTBjs0T52cxigKuo1Kuo1RE / figureReq2 <coJh2GK2 </ aplicación coJsquo2 <coJuc5> </ figureRij64> coJuc5> </ figureRij64> coJuc5 crear una aplicación en el modelo del selector de cookies para mostrar la acción objeto de la consola. Esta aplicación se muestra un contador que nos muestra cuántas veces se ha hecho clic en la imagen de una taza de té. Registraremos cada clic en la consola para que podamos realizar un seguimiento de cuándo suceden.</p><h3>Front-end desarrollo </h3> <p>Nuestro primer paso es desarrollar el front-end de nuestra aplicación. Crea un archivo llamado

Este código muestra cuatro elementos en nuestra página web : un título, una descripción del juego, una imagen de una taza de té y un mensaje que informa al usuario cuántas veces ha hecho clic en la taza de té.

También agregamos algunos estilos a nuestro código para hacerlo atractivo. Cree un archivo llamado "styles.css" y péguelo código:

Estos estilos crean un cuadro para nuestro juego tea clicker, establece el clic cambie el color a amarillo y cree esquinas redondeadas para nuestra imagen. Así es como se ve nuestra página web ahora:

Cuando haces clic en la taza de té, no pasa nada. Esto se debe a que no hemos agregado nuestro código JavaScript. Escribamos el código JavaScript para nuestra aplicación.

Agregar funcionalidad usando JavaScript

Cuando el usuario hace clic en la taza de té, el contador debe aumentar en uno. Antes de que podamos incrementar nuestro contador, debemos seleccionar los elementos DOM con los que vamos a trabajar: la imagen y el contador. Los elementos DOM, o Document Object Model, son etiquetas en nuestra página Web.

También definiremos una variable que realiza un seguimiento del número de clics en la taza de té:

Nuestro siguiente paso es crear una función que registre cuándo se hace clic en nuestro botón e incremente nuestro contador en uno. Podemos hacer esto usando el siguiente código:

La primera línea imprimirá el mensaje de la consola "Se hizo clic en el botón" en la consola. A continuación, agreguemos 1 a nuestro contador de "clics". Luego cambiamos el contenido del texto en nuestra etiqueta para reflejar la cantidad de clics actualizados usando el método innerText.

Miremos nuestra página web y hagamos clic en la imagen de la taza de té:

EIKDPoZ9JdR7K2z9gO1tF3EgmA SiXEKFGhG1IX2582CL9fAqROhwvP5GUrKZ2hJRxU O5PDdjUonsg6FUhmM7xwziHS1teOdzM8LqZV Sofm0 NnTl2mJPEDot4bvH64ElzOQm3

es que, cuando se hace clic en la taza de té contra los incrementos - una. además, en la consola se imprime el mensaje que especificamos en nuestro código. Esto nos ayuda a comprender cuándo el usuario hace clic en la taza de té.

Aunque esta es una implementación básica de console.log (), en una aplicación más grande puede ver que el registro de iones es ampliamente utilizado. En su mayor parte, los registros solo se guardan en las versiones de desarrollo de las aplicaciones. Esto se debe a que los usuarios no necesitan ver lo que sucede detrás de escena. Dicho esto, el registro sigue siendo una herramienta extremadamente valiosa para los desarrolladores.

Conclusión

La consola es una herramienta que puede usar para aprender cómo funciona su código. Puede usarlo para mostrar mensajes de depuración mientras se ejecuta el código o para rastrear advertencias y errores.

Solo debe usar las instrucciones de registro si está desarrollando su propia aplicación o desea crear mensajes de error personalizados para su código que puede usar para la depuración. No debe mantener demasiados registros en una aplicación web que está disponible en línea.