Manejo básico de las DevTools

Mi favorito es Chrome, pero estoy probando Edge para poder utilizar la Inteligencia Artificial.

Cumplí el reto y me sorprendió el resultado.

Manejo básico de las DevTools

Las DevTools de Google Chrome son una herramienta poderosa y útil para desarrolladores web. Estas herramientas permiten a los desarrolladores depurar, inspeccionar y optimizar el rendimiento de las aplicaciones web. Aquí hay un breve resumen del manejo básico de las DevTools:

Acceder a las DevTools: Puedes abrir las DevTools haciendo clic derecho en cualquier página web y seleccionando “Inspeccionar elemento” o presionando Ctrl + Shift + I en Windows o Cmd + Option + I en Mac. También puedes acceder a las DevTools desde el menú principal de Chrome haciendo clic en “Más herramientas” y seleccionando “Herramientas de desarrollo”.

Inspeccionar elementos: Las DevTools te permiten inspeccionar cualquier elemento de la página, incluyendo HTML, CSS y JavaScript. Simplemente haz clic en el elemento que deseas inspeccionar y las DevTools te mostrarán la información relevante.

Modificar el código en tiempo real: Puedes editar el código HTML, CSS o JavaScript en tiempo real directamente desde las DevTools. Esto te permite experimentar con diferentes cambios y ver cómo afectan el aspecto o la funcionalidad de la página.

Depurar errores: Las DevTools te permiten depurar errores de JavaScript en tiempo real, lo que significa que puedes ver exactamente dónde se encuentra el problema y corregirlo de manera rápida y eficiente.

Optimizar el rendimiento: Las DevTools ofrecen herramientas para analizar el rendimiento de la página, incluyendo la velocidad de carga y el uso de recursos. Puedes utilizar esta información para identificar problemas y optimizar el rendimiento de la página.

En conclusión, las DevTools son una herramienta esencial para cualquier desarrollador web. Al permitirte inspeccionar, editar y depurar el código de la página en tiempo real, las DevTools te ayudan a mejorar la funcionalidad, el aspecto y el rendimiento de tu sitio web.

Mi navegador favorito desde hace un tiempo es Brave, por el hecho de ser muy rápido y bloquear anuncios, me super acostumbré, y además te va dando cierta cantidad de tokens acumulables y luego los podes canjear aunque no tengo muy en claro aún como funciona ese tema.

🛠 Clase #3: Manejo básico de las DevTools 3/17 🛠

Usando DevTools de los navegadores 🪛

¿En qué idioma deberíamos de tener configurado nuestro computador y por qué? 🆗

 
• Deberíamos de tener nuestro computador configurado en inglés ya que la industria del desarrollo web gira en este idioma.
 

¿En dónde podemos descargar las DevTools de Microsoft Edge? ❓

 
• En la Microsoft Store.
 

¿Qué es Microsoft Edge DevTools? 🔵

 
• El explorador Microsoft Edge incluye herramientas de desarrollo web integradas, denominadas Microsoft Edge DevTools. DevTools es un conjunto de herramientas de desarrollo web que aparece junto a una página web representada en el explorador. Fuente: aquí
 

¿Cómo accedemos a las DevTools de Google Chrome? 🟡

 
• F12
• CTRL + Shift + I
• Clic derecho -> Inspeccionar
 

¿Cómo instalar extensiones en Google Chrome?

 
• Dar click a los 3 puntos alineados en forma vertical (están en la esquina superior derecha del navegador), aparece un menú al lado izquierdo, desplazar hasta abajo y seleccionar a Extensiones.
 
• Se puede buscar las extensiones cuado se da click al recuadro de líneas horizontales (esquina superior izquierda) y dar click en Abrir Chrome Web Store, aparece otra página y en el cuadro del buscador se puede poner por ejemplo Lighthouse (Google Lighthouse es una herramienta automatizada de código abierto para medir la calidad de las páginas web, fuente: aquí), seleccionar entre los resultados el que queremos instalar, luego dar en el botón azul que dice Agregar a Chrome, aparece un cuadro de dialogo y hay que confirmar la instalación, esperar y listo.
 

¿Con cuales Navegadores deberíamos de quedarnos para desarrollar web? ☯

 
• Google Chrome Dev.
• Firefox Developer Edition.
 

¿Cómo hacer un Shortcut? ✂

 
• Presonar teclas Windows + Mayús + S
 

Hay un error en el quiz especificamente en esta pregunta

¿Cómo se denomina la extensión que permite conectar y desconectar rápidamente el JavaScript en tu página web?

ninguna de las opciones que dan es la correcta que debería ser toggle JavaScript

Parece que el Diccionario de la Real Academia tiene un sitio muy bien parado. 😂

curioso

Youtube

Yo siempre uso Chrome! Pero para páginas que no puedo ver desde Colombia, uso Tor (no es para nada raro, aclaro😁)

Personalmente, llevo casi 2 años utilizando Brave como navegador principal, y me parece muy bueno, además que te evita los anuncios en videos de YouTube.

//Symbolab.com
Solucionador matemático de ecuaciones

no me da la posibilidad de subir el pantallazo

Esta clase la tomo desde el nuevo navegador. No sabía que existia, ando emocionado jajaja

mi aporte

Página: Prezi

Esta es una pagina que desarrollé para una empresa de protecciones para bicicletas.

Hola. Esta es mi captura :

El reto lo realice con codepen

Lo hice en esrte curso … Creeme, no les gustará lo que dice de Platzi, a mi tampoco, por eso no lo subí.

Brave

Mis navegadores favoritos: Firefox y Brave

Hice un analisis de airbnb.

Facebook, siempre a la vanguardia

Hice la calidad de platzi en su apartado Student home😊

La seguridad del navegador web depende de varios factores, como la calidad del código, la rapidez con la que se actualiza para corregir vulnerabilidades y la capacidad de proteger la privacidad del usuario. En términos generales, los navegadores más seguros son aquellos que ofrecen actualizaciones frecuentes y oportunas para solucionar problemas de seguridad y privacidad, y que tienen características incorporadas que protegen al usuario de amenazas en línea.