tv.um.es

Hola en este vídeo vamos a ver los diferentes modos que tenemos de depurar nuestras aplicaciones web, vamos a empezar con un pequeño detalle que simplemente donde ver los errores en el código para saber qué está pasando bien aquí como vemos en este código tenemos data definido rutas, que es una renovación y es en esta función donde se cargan los valores, entonces le ha metido a propósito aquí que imprima rutas 2. No está definido así que esto nos va a dar, nos va a dar error, ahora ya tenemos la aplicación funcionando, pues me voy a abrir aquí y vemos esto se ha cargado, pero esto debería ser el menú cuyas cuidadas opciones están definidas en ese río, así que veremos quién no se ha cargado pero no nos salen, no nos salen ningún mensaje de error en la terminal de Visual Studio Code como sí lo haría en la terminal de eclipse. Qué pasa? Aquí? Lo que tenemos que hacer es irnos a la consola del navegador, podemos pulsar, f, 12 control, y también nos vamos a que directamente inspeccionarlo con Sole y vemos que nos dice rutas no está definido en a punto. Es aquí donde tendremos que sí si vemos que algo no falla, que algo no funciona como debería. Debemos estar consultando constantemente la consola del navegador para ver si nos salta algún error si hay algo que nos hemos dejado o cualquier cosa y bien hecho este pequeño apunte vamos a ver cómo utilizar el depuradora de Visual Studio Code. Bien para depurar nuestras aplicaciones admitió el estudio. Lo primero que tenemos que hacer es tener estas dos extensiones instaladas, el Google o de Booker; Firefox en mi caso voy a utilizar bien una vez lo tengamos instalado, nos vamos a estar, la de bichitos, el que es la depuradora de estudio, aquí; si no tenemos ninguna configuración creada, no saldrá así y tendremos que darle a crear con nuevo archivo. La 11. Punto será el que contenga la configuración concreta para lanzarlo, en mi caso, y si no en el navegador que sea. Como vemos, ya le he dado y nos da aquí las diferentes opciones y yo voy a elegir y ya nos cree directamente este archivo. Si nos vamos al explorador del proyecto, vemos que lo tenemos en esta carpeta, punto bien. Aquí como hemos traído diferentes parámetros son estos dos los que nos pueden interesar más. Este es simplemente el nombre de la configuración. Si lo cambio lo vemos que se cambia, aquí es el desplegable donde nos salen todas las configuraciones y bueno es realmente como digo el nombre pero la web r Sí que es importante, será la uer, que elabora en la que en la que el intento de depurar. Así que si, por ejemplo, nosotros vamos a desplegar nuestra aplicación en el puerto 80, 81, pues tendremos que cambiar esto. Ahora vamos a pasar a lanzarlo, para ello tenemos que tener funcionando nuestra aplicación, así que nos la iniciamos. Ya lo tenemos funcionando y ahora podemos lanzarlo con este triángulo verde, con este bien, y vemos que nos lo abre una ventana nueva. Qué pasa, que ahora mismo no tengo puesto ningún ningún break con ningún punto de ruptura, así que para ello nos vamos al código y a la izquierda del número de la línea podemos establecerlo, así le damos y se ha puesto el puntito rojo, así que voy a volver a lanzarlo, y vamos a ver si me va a quedar, efectivamente, se me han parado, ahí vemos que tenemos aquí a la izquierda diferentes pestañas con con información de la aplicación, la pila de todas las llamadas que se han hecho y los controles del depuradora los tenemos aquí arriba. Eso lo que ya conocemos. El depuradora de eclipse, pues también son las mismas opciones. Podemos continuar, podemos pasar a la siguiente, a la siguiente instrucción. Meternos dentro, podemos reiniciar pararlo, lo típico de depuradoras, así que, como vemos, pues pues así podemos ir depurando desde el estudio, y vamos a pasar al siguiente punto. Por último, vamos a ver una extensión del navegador, que nos puede ser muy útil, que es buena para instalarla; simplemente nos vamos a Google y buscamos, vemos que nos salen la primera opción para Craon, pero también tenemos aquí abajo que está disponible para ver cómo estoy en Crowe. Le voy a dar el primero y aquí simplemente tendremos que darle a instalar esta extensión, como como podemos ver esta ofrecida por la propia viuda es oficial, así que no nos va a traer ningún problema. Una vez la tengamos instalada, no vamos a una aplicación que tengamos funcionando, nos vamos, no sabremos esto donde tenemos la consola en el navegador para inspeccionar el código y tal, y nos saldrá una de Viu bien a que inicialmente vemos que hay diferentes opciones; inicialmente en componer no saldrá este árbol de componentes, donde vemos que no pasen los diferentes que hay y podremos meternos a ver todas sus propiedades o los valores que tienen, por ejemplo, aquí puedo acceder a la red de rutas y ver sus palabras que tiene cada elemento, lo cual no puede ser muy útil para ir comprobando los valores que tienen cada cosa y ver si hay, si todo está funcionando correctamente. También tenemos una para dónde nos va a salir todas las todas las transformaciones, todas las operaciones que se vayan haciendo con el estado global de la aplicación. También tenemos los eventos que se van a ir lanzando. Vemos, por ejemplo, ya que aparecen los clicks. También podemos ver las rutas que se van siguiendo todas las rutas disponibles a quien reformas Podemos podemos hacer como un mar, con una prueba de rendimiento. Le vamos a estar, pues eso y si vamos haciendo cosas en esta aplicación es que no hay mucho que hacer, pero así podríamos medir el rendimiento de nuestra aplicación. Vemos que aquí no salen los eventos, las rutas cada vez que hagamos una acción, que hagamos algo en la aplicación, pues no saldrán y no sale exactamente el segundo en el que se ha ejecutado. Aquí podremos, como digo, tomar diferentes medidas de rendimiento y bueno, con estos tres apuntes, básicamente, cómo vamos a depurar nuestras aplicaciones vio sobre todo más lo más importante, es tener en cuenta, acordarnos de que los errores no van a salir en la consola del navegador, que no podemos esperar verlo en la terminal de Visor estudio, y si no nos acordamos de esto, vamos, vamos a estar bastante perdido cuando no falla algo. Así que bueno, hasta aquí el vídeo, adiós.