- Inicio
- Cursos
- Programación
- Curso de JavaScript y jQuery = J2
22.- Prueba en Google Chrome
Vamos a realizar la prueba en Google Chrome.
Si por alguna razón cerraste la parte de inspeccionar, solo da clic derecho sobre la aplicación y da un clic en inspeccionar.
Ahora vamos a dirigirnos hacia Sources.
Luego en Page.
Tal vez todo esto lo tengas en español, pero por default está en inglés, así que guíate por el video.
En page tenemos la carpeta de sumadora, demos un doble clic para expandir los archivos o en su ícono relacionado.
Y demos un clic en sumadora.js para ver el código.
Vamos a poner algunos breakpoints para ver el comportamiento del código.
Uno dentro de la función que se encuentra dentro del evento keyup.
Y otro en la primera línea de código de la función sumar.
Ahora, en cuanto escribamos algún número en los controles de entrada, se detendrá aquí.
Al escribir cualquier número, vemos que, al soltar la tecla, automáticamente se detiene en la función de sumar, que se encuentra dentro del evento keyup, esto nos dice que si está funcionando el evento keyup, que se dispara al soltar alguna tecla.
Ahora demos en resume, para proseguir, se volverá a detener en la primer línea de código que tenemos ya dentro de la función.
Si deseáramos ver el resultado de algún fragmento de la línea, solo bastará con seleccionarlo, por ejemplo, vamos a seleccionar
$(“#numero1”).val()
Y veamos que nos presenta Chrome:
Nos muestra el número que acabamos de ingresar en formato string.
Si damos en resume, va a realizar todo el código hasta que termine, y no veremos el comportamiento, así que ahora vamos a dar clic en el botón: step over.
Si damos clic en este botón, solo va a ejecutar la línea en donde se encuentra y va a esperar en la segunda línea.
Ahora incluso, nos dá el resultado de la primera línea y nos da lo que contiene la variable
numero1_float
Prosigamos con el botón de step over.
El segundo número, nos da como resultado NaN, que significa Not A Number, “No es un número”, por qué, pues porque aún no hemos escrito nada en el segundo control.
Demos un clic, en step over.
Ahora vemos que
resultado_float
Tiene otro NaN.
Así que por eso no imprime nada en el span.
Esto, por suerte salió de esta manera, pero en alguna otra aplicación en donde si necesitamos un número, esto, sería un error.
Por esta razón, es bueno revisar el código con calma, y realizar pruebas en Chrome, que nos ayuda a ver los resultados y comprobarlos.
Poco a poco veremos más acerca del inspector de Chrome.
Hemos terminado, espero haya sido de ayuda y nos vemos en el siguiente proyecto.