Herramientas para Desarrolladores en Google Chrome

Clase 3 de 17 • Curso de Configuración de Entorno de Desarrollo en Windows

Clase anteriorSiguiente clase

Patricia Mago

student•

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

Andrés Esteban Armijo

student•

Aguante edge

Sebastián Caraballo Marzola

student•

lo bueno del edge es que puede hacer aplicaciones las paginas web

Mauricio Oscar Nuñez Melgarejo

student•

Cumplí el reto y me sorprendió el resultado.

Johel Jesus Hoces Saenz

student•

x2 man

Jafet Brito

student•

Igual y cuando liberen el nuevo Platzi solucionan esos problemas.

Rodrigo Alles

student•

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.

Iván Viveros

student•

Realice la prueba con la empresa en que laboro, y el resultado es interesante

Eduardo Monzón

student•

Buena info, gracias.

Juan Valentin Coria

student•

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.

Jafet Brito

student•

¿Todavia te da cypto por navegar?

Juan Valentin Coria

student•

Así es @jafet-brito

Roberto Poblete Velázquez

student•

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

Maria Gabriela Rodriguez Cuevas

student•

🛠 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

Marcos Monteverde

student•

gracias!

Alejandro García Mateus

student•

genia el aporte gracias 😉

Jhoen Marquina

student•

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

Victor Hugo Mayhua Tijera

student•

Estoy de acuerdo

Luis Alonso Rivera Mejía

student•

NBHFGF

Esteban Ramon Padrón Urdaneta

student•

Youtube

Ana Beatriz Sierra Garrido

student•

curioso

Santiago Sarmiento

student•

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

Juan Felipe Rodriguez Martinez

student•

//Symbolab.com Solucionador matemático de ecuaciones

Sergio Daniel

student•

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.