Este va a ser un video bastante rápido.
Solo quiero resaltar algunas de las herramientas de desarrollador que Google Chrome nos brinda para trabajar
con cada equipo y ver evaluar.
Esta es la lista de tareas pendientes que hicimos en el último video.
Todavía es tan feo como lo era entonces y quiero resaltar dos cosas.
Entonces, lo primero que podemos ver es la fuente de la página tal como lo hicimos con otras personas.
Cada uno salió al principio de este curso, pero eso no es tan útil.
Realmente no podemos cambiar esto ni nada, pero lo que podemos hacer es hacer clic derecho y hacer clic en inspeccionar elemento.
Y lo que esto hará es lanzar el inspector de elementos.
Entonces verán que tenemos esta nueva vista aquí.
Entonces, hay un montón de pestañas que vamos a aprender sobre todo esto a tiempo.
Por ahora solo estamos comenzando en la pestaña de este elemento.
Entonces, ¿qué es esto? Es en realidad una buena representación interactiva de todos los elementos.
Entonces puedes ver que tenemos nuestro doctype.
Cada equipo tendrá la cabeza del cuerpo.
nosotros y nuestros aliados, así como las entradas, y lo primero que quiero que noten es al pasar sobre estos elementos.
O cada uno de
Así que pasemos sobre este H-1.
En realidad está resaltado aquí.
Así que coloco el cursor aquí y se resalta para mostrarme que aquí está el que está hablando.
Aquí está la UL o aquí está la casilla de verificación de entrada.
Aquí está el texto, etc.
Entonces esto es útil en sí mismo.
cosas y ver qué espacio está ocupando un elemento y dónde cae en el flujo de un documento.
Solo para depurar
Pero lo que realmente quiero enfocar es la pestaña CSSA aquí la pestaña de estilos.
Entonces, seleccionemos una de estas cosas.
Seleccionemos este aliado con la clase completada la parte superior o la segunda.
Y voy a hacer clic en él.
Y aquí estoy viendo una vista interactiva de todos los estilos que este elemento le ha
aplicado actualmente.
a la clase completa tiene esta línea de decoración de texto debido al código de vuelo que escribí para todos los aliados.
Entonces vemos que debido
Tiene un borde rojo y lo que podemos hacer es encenderlo o apagarlo.
Así que ahora he desactivado todos los aliados con bordes rojos.
Puedo volver a encenderlos y puedo cambiar esto en vivo aquí para que sea de 6 píxeles o 10 o un píxel.
Puedo hacer clic en el color y elegir un nuevo color para darle un borde azul.
Una cosa que destacaré es que esto en realidad no cambia nuestro archivo en absoluto.
Esto solo está en el navegador tan pronto como actualice esta página o cierre la ventana, mis cambios desaparecerán.
Entonces esto es útil en dos formas diferentes.
Una de ellas es trabajar en su propio código en su propia página y probar cosas y ver qué sucede cuando cambia el color
o si cambia el borde o si cambia algún otro atributo de alguna de sus propiedades y
simplemente lo ve de forma visual inmediatamente.
La otra cosa que es útil es mirar el código de otra persona.
Entonces, tengo MVNO abierto solo en la página de inicio.
Digamos que quería saber un poco más sobre este texto aquí mismo.
Lo que puedo hacer es hacer clic derecho en él y hacer clic en inspeccionar elemento.
Y si hago clic en un elemento en particular, en realidad se destacará para mí.
Entonces puede ver que saltó de inmediato a la etiqueta correcta, que es un conocimiento compartido H-1.
Y luego hay un lapso allí también.
Dice para la web abierta.
Así que echemos un vistazo a la H-1.
Y aquí obtengo todos los estilos.
Entonces el primero es color.
Si cambio, el color de ese H-1 cambia.
poder desplazarme hacia abajo y en algún momento alguien que Mazola escribió los estilos que aplica una fuente.
Digamos que quería saber la fuente para
Aquí está el asunto y esto es en lo que nos vamos a enfocar en los próximos videos es que
esto podría ser heredado de otro selector en alguna parte.
Por lo tanto, podría haberse aplicado directamente a todo el cuerpo, no solo a H-1.
Entonces, si te desplazas hacia abajo, parece que está aquí.
La familia de fuentes abierta envía luz a un sentido muy real si y eso parece que lo hace.
Así que esto no es para mostrar cómo hacemos la fuente.
Es un video por separado que aparecerá pronto.
Esto es solo para mostrarte que si querías encontrar algo sobre una página digamos
que quería saber qué tipo de elemento tienen estos botones aquí.
El papel del ícono que puedo seleccionar es una lupa y colocar el cursor sobre las cosas y hacer clic y me
mostrará justo aquí un ojo.
Entonces, un ojo es otra etiqueta utilizada para iconos y podemos ver todos los estilos aquí.
Lo mismo si quiero ver qué elemento es aquí, puedo hacer clic en él
una vez que tienen la lupa y veo que es una etiqueta de anclaje y parece.
es una etiqueta de anclaje que debe significar que están configurando una imagen de fondo en algún lugar y veamos dónde está.
Por lo tanto, no es una etiqueta de imagen,
Aquí vamos.
Están configurando la imagen de fondo para que sea esta imagen aquí.
Así que para resumir todo esto, solo quería demostrar que puede abrir este Inspektor en Google Chrome
y puede ver la HMO y puede ver la evaluación y no solo puede verla, sino que puede manipularla, puede interactuar
con ella. puede intentar cambiar cosas y puede hacerlo en sus propios sitios o puede hacerlo
en el sitio de otra persona.
útil cuando quieres salir y replicar el diseño de alguien donde quieras replicar en efecto.
Por lo tanto, es muy
Y cuando llegamos a Javascript, realmente vemos que podemos hacer exactamente lo mismo con JavaScript.