Vamos a ver lo que son los developer tools.
Voy a dar clic derecho y vamos a darle clic en inspeccionar.
En español lo más seguro es que lo como Inspeccionar Elemento.
También en la parte superior en View developer vas a encontrar developer tools existe developer tool
si JavaScript Consol que nos interesa es de verlo Pertuz cualquier navegador de los que utilices ya
sea Firefox Safari o Crom.
Todos tienen herramientas de desarrollo.
Su ventaja principal es que te permiten inspeccionar el código es decir del lado derecho tenemos el
código fuente el código HTML que se imprime en nuestra página y del lado izquierdo tenemos la página.
Veamos una demostración de developer tools en este botón que está aquí en la esquina puedo dar click
e inspeccionar así se le conoce a la tarea de seleccionar algún elemento.
Supongamos que quiero seleccionar esta parte de cursos en línea.
Doy click aquí y vemos que se destaca el HTML H1 y vengo con una Heydi aparecen Heydi una clase y el
texto de cursos en línea en la parte inferior aparece un poco de CSS y por ejemplo si yo quisiera cambiar
este color puedo hacerlo aquí mismo para ir viendo cómo se ve la propiedad de CSS cambiar colores color
como tal y aquí puedes utilizar los distintos colores que existen vamos a cambiarlo por rojo y tal vez
digas no me gusta o tal vez digas nada no me gusta dependiendo del navegador puedes dar clic en el color
y esto te va a abrir los colores.
Aquí puedes arrastrar los elementos arrastras distintos colores y elegir el color que más te guste.
Supongamos que nos gusta este color de color morado voy a copiar este color que está aquí.
Este se le conoce como un código hexadecimal una vez que finalice este color me gustó voy a ver el color
y dijoBuenas que me gustó.
El problema de hacer cambios aquí es que una vez que recargas se pierdan esos cambios para que estos
cambios que hacemos aquí en la consola tomen lugar sean permanentes.
Nota cómo junto al selector este encabezado aparece un archivo y dice custom punto CSS y luego dice
2.37 este es el archivo que tiene los estilos.
La hoja de estilos lo que está después de los dos puntos es la línea donde se encuentra.
Aquí yo tengo abierto el proyecto.
Vamos a ver que si abro la carpeta de CSS voy a encontrar un custom puntuó CSS.
Si busco la línea 37 vas a notar que aparece el encabezado entonces aquí yo puedo ponerle color y pegar
el color que me había gustado.
Guardo cambios y recargamos y vemos que ahora sí el color ya se queda.
Esa es una de las grandes ventajas que tiene developer tools.
Supongamos también que yo quiero cambiar este color de esta barra puedo inspeccionar la barra de nuevo
recuerda das click en esta parte click en la barra y vemos que dice Barra y lo viene un custom punto
CSS que es el mismo archivo y la línea 95 busco esa línea 95 y vemos que aparecen los colores de fondo
digamos que yo digo bueno voy a eliminar todo esto y voy a dejar un Bagram rojo como Red recargamos
y aparecer color rojo voy a deshacer los cambios.
Me gustaba más el diseño como estaba pero puedes ver en qué te sirven los developer tools.
Si quieres ver cómo se ve tu sitio web en dispositivos diferentes puedes dar clic en el segundo icono
click aquí.
Aquí puedes seleccionar distintos dispositivos.
Supongamos que queremos ver cómo se ve en un iPhone 6.
Cambiamos iPhone 6 y vamos a poder previsualizar el sitio web como si tuviéramos un iPhone.
Lo cambiamos por un iPad y vemos que también podemos ver el sitio web.
Incluso aquí puedes rotar el dispositivo horizontal o vertical.
Si presionas aquí vuelve el sitio web en su estado original.
Si quieres cerrar vuelos Pertuz das clic en la X y eso no va a cerrar.
Quieres abrir inspeccionar elemento y estos botones que están aquí estos tres te van a permitir por
ejemplo quitar developer Tut en una ventana aparte.
También lo puedes poner del lado izquierdo lo puedes poner del lado derecho o lo puedes poner debajo
puedes posicionarlo donde tú quieras de la forma que te sientas mejor en la forma que mejor te encuentres
trabajando.
Puedes ver que hay muchos Tapsa aquí se dé clic en Network y recargo este sitio web.
Vas a notar que en la parte inferior viene el tamaño de los archivos.
Puedes hacer esto más grande.
Developer tools también te va a permitir monitorear el distinto tamaño de las imágenes y así puedes
optimizar tu proyecto un poco mejor.
Por ejemplo esta imagen dice que mide 56 kilobytes puedes dar clic sobre la imagen te va a decir qué
imágenes y puedes optimizarla hacerla más ligera para que tu sitio web sea más rápido.
Es importante conocer developer Atul si quieres ser un desarrollador web aquí vas a encontrar mucha
información.
Deja mostrarte algo si recargamos vemos que aquí tenemos este proyecto tenemos este carrito si yo presiono
vaciar carrito vemos que hace algo muchas veces te va a tocar tener proyectos heredar proyectos de otros
desarrolladores y tal vez digas bueno y esa funcionalidad dónde está.
Dónde está esto de eliminar del carrito porque si recargo ya no aparece.
Si voy hacia abajo y presiona Agregar carrito en los distintos cursos y voy hacia arriba vemos que aparecen
los carritos tres veces si recargo vemos que se mantiene.
Entonces tal vez digas bueno y esto dónde está.
Se ve difícil no.
Este proyecto es muy sencillo nada más tienen algunos cuantos archivos pero va a haber proyectos que
tengan miles de archivos cientos miles de archivos entonces developer tools te pueda ayudar bastante.
Abrimos la consola nuevamente después de Elements viene sources aquí del lado derecho vas a encontrar
mucha información que nos interesa es este que dice Ben Lycée nerds tal vez de momento no tenga sentido
que es una bendición.
Entonces damos un poco de scroll y la idea es mostrarte más bien que son los de vuelo perdut vas a encontrar
que podemos monitorear distintos eventos que suceden en el proyecto en este caso podemos monitorear
cualquier elemento cualquier evento del mouse doy clic en el triángulo y vemos que viene el click puedes
seleccionar click aquí y tenemos que presionar con Mansiche o recargar la página.
Este recargar de página nos va a permitir que ya empieza a leer el archivo entonces tenemos click aquí
y vamos a dar scroll hacia abajo va a dar clic en Agregar al carrito y vemos que se nos abre un archivo
que dice apuntó J.V y aquí viene pasado El debugger podemos ver qué dice aquí.
Función que añade el cursor carrito y esto ya nos lleva a esta parte desde aquí vamos a encontrar muchísima
información muchísima información.
La verdad es que un curso de vuelo Pertur tomaría varias horas pero vamos a ver que hay mucha información
que podemos utilizar si presiono de nuevo la flecha azul aquí esto te va a permitir por ejemplo ver
qué código se está ejecutando pero si presiona la flecha va a ir paso a paso
agrega.
Agregar al carrito por ejemplo se vaya hacia arriba y les doy eliminar de este proyecto aquí vemos que
este va a abrir la función de eliminar al carrito y aquí se elimina el curso del carrito donde podrás
saber hacia adelante y eliminar el carrito de nuevo si voy a hacer carrito y presiono vaciar carrito.
Vemos que se eliminan los cursos del carrito y viene a correr la función vaciar carrito para eso son
los developer Pertuz tal vez nosotros no escribimos nada de este código pero utilizando estas herramientas
podemos ver qué parte del código se está ejecutando y ya sabiendo un poco de JavaScript podemos saber
qué es lo que hace esta parte podemos cerrarlo y como dije los desvelos Pertuz estos fueron los de Crom
para mí son los mejores pero Firefox Safari Opera cada uno tiene sus propios developer Tours yo recomiendo
que utilices los que conozcas mejor te sientas en mi opinión los de Crom son los mejores pero tal vez
algunos prefieran los de Firefox.
Otras personas prefieren los así que continuamos con los fundamentos de programación en el próximo video.