El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Depurar tu código JavaScript

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
No siempre todo nos puede salir perfecto y a la primera, por lo cual es muy importante que sepas cómo depurar o debuggear tu código para que encuentres soluciones oportunas. Aprende cómo usar el depurador nativo de tu navegador y así identificar fallos o mejoras en tu desarrollo.
05:16

Transcripción

La base de toda aplicación o de todo desarrollo en el cual estaremos trabajando siempre es la correcta planeación. Es decir, nosotros debemos planear, previamente a escribir el código, cuál va a ser el algoritmo que vamos a estar utilizando. Para esto, puedes utilizar una hoja de papel e ir escribiendo todos los pasos que se van a ir detonando en tu aplicación. Una vez que nosotros tenemos estos pasos bien definidos, entonces ya pasamos a la parte de escribir código. La parte más difícil de la programación no es escribir el código o aprender un nuevo lenguaje. De hecho, es la generación de ese algoritmo que te va a permitir solucionar un problema. Cuando tú ya estás trabajando en el código y terminaste tu algoritmo correctamente, entonces viene la etapa de pruebas y comienzas a tratar de ejecutar tu aplicación. Muchas veces, puedes encontrarte con problemas. Tal vez lo hayas planeado correctamente en el papel, pero algo en la escritura salió mal, entonces es cuando nosotros necesitamos depurar nuestra aplicación o "debuggear" nuestra aplicación, es decir, encontrar errores que muy probablemente hayamos dejado pasar por alto. Para esto tenemos el navegador. Entonces, en este caso yo voy a hacer la pantalla un poco más grande y voy a actualizar mi pantalla. Ahora que yo la tengo actualizada y yo quiero depurar mi aplicación, todos los navegadores cuentan con ese depurador o "debugger". En el caso de Google Chrome, que estamos usando para este ejercicio, vamos a la pestaña de Sources. Aquí, nosotros podemos ejecutar y probar todo nuestro código. Por ejemplo, si yo actualizo mi navegador y doy clic donde dice'app. js' voy a poder revisar todo el código que tengo disponible. En este caso, estábamos trabajando directamente con una clase donde teníamos varios métodos y teníamos varias propiedades, una de ellas era la que afectaba a la garantía. Entonces, yo quiero analizar si realmente ese dato está pasando por algo. Para esto, puedo trabajar con algo llamado "breakpoints". ¿Qué hacen los "breakpoints"? Son puntos en tu programa que te van a permitir detener la ejecución en ese momento para que tú puedas hacer pruebas. Por ejemplo, yo quiero que cuando el método'set garantía' se ejecute, el programa se detenga aquí para que yo pueda ver cuál es el valor que existe. Para poder generar un "breakpoint", lo único que tengo que hacer es, en esta sección, dar un clic y vamos a ver este ícono. Una vez que ya lo tenemos, vamos a actualizar nuestra página y podemos ver lo siguiente: tenemos una pestaña que dice Breakpoints. Entonces, con esta pestaña que dice Breakpoints podemos ver en dónde lo tenemos, que en este caso es la línea 17. Ahora vamos a invocar esa función. Para esto, nosotros podemos utilizar la tecla Escape, que nos va a levantar una consola de la parte de abajo, o utilizar este símbolo que tenemos en la parte superior derecha y mostrar la opción que dice Hide console drawer –que en este caso la va a ocultar– o Show console drawer. Muy probablemente lo puedas tener en español o en algún otro idioma, pero la función es la misma. Ahora que ya lo tenemos, vamos a tratar de invocar a esta función. Para hacerlo vamos a utilizar la instancia que ya teníamos, que en este caso se llama'tvSala'. Vamos escribir 'tvSala', punto, 'encendido'. ¿Por qué'encendido'? Porque si tú recuerdas, cuando nosotros teníamos esta función de'encendido', aquí es donde modificábamos el valor de garantía, entonces vamos a ejecutarlo. Lo ejecutamos y ¿qué sucede? En la pantalla se muestran algunos elementos, uno de ellos dice 'Paused' o pausado por el "debugger". ¿Qué quiere decir? Como nosotros tenemos un "breakpoint", ahí se detuvo el programa. Del lado derecho vas a poder ver la información que tienes. Por ejemplo, estás viendo que se refiere a'pantalla' y también puedes ver toda la información que está trabajada en'pantalla'. Por ejemplo, la marca, el modelo, el número de serie, las pulgadas, etc. Y en un color más tenue podrás observar las propiedades o métodos que correspondan al padre, en este caso: 'garantia'y'peso'. Tenemos dos opciones: una, podemos ir a la opción de Watch y en la opción de Watch nosotros podemos agregar la propiedad a la cual queremos poner atención. En este caso, nosotros estamos trabajando con'tvSala' y lo que queremos ver es la garantía. Entonces, ponemos'tvSala. garantia' Si no lo escribimos correctamente, damos doble clic y escribimos, ahora sí, 'garantia'. Como ves, ahora tiene 100. Pulsamos el "step over" que tenemos en esta sección o el que tenemos aquí arriba. Cuando continuamos, ahora sí baja a 99. Podemos dar Play y, una vez de esto termina, así tenemos el nuevo valor. Si lo volvemos ejecutar, entonces se va a detener nuevamente en este "breakpoint". Continuamos, damos Play y vemos cuál es el valor actualizado. De hecho, cuando tu estás trabajando con este "debugger" y lo actualizamos, podemos colocar nuestro cursor sobre alguno de los valores y podemos ver cuál es el valor que tiene actualmente. Tú puedes agregar cuantos "breakpoints" necesites, no te limites, solamente sé un poco ordenado para que no te pierdas entre todos los "breakpoints" que puedas llegar a utilizar.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.