CursosEmpresasBlogLiveConfPrecios

Herramientas para Desarrolladores en Google Chrome

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

Clase anteriorSiguiente clase

Contenido del curso

Herramientas para la web
  • 1
    Configuración de Entorno de Desarrollo en Windows

    Configuración de Entorno de Desarrollo en Windows

    02:10
  • 2
    Instalación y uso de Google Chrome para desarrollo web

    Instalación y uso de Google Chrome para desarrollo web

    07:29
  • 3
    Herramientas para Desarrolladores en Google Chrome

    Herramientas para Desarrolladores en Google Chrome

    10:11
  • Herramientas para la web

Editor de texto
  • 4
    Uso de Visual Studio Code para Desarrollo Web Básico

    Uso de Visual Studio Code para Desarrollo Web Básico

    07:23
  • 5
    Extensiones esenciales para personalizar Visual Studio Code

    Extensiones esenciales para personalizar Visual Studio Code

    12:31
  • quiz de Editor de texto

Cómo usar Linux dentro de Windows
  • 6
    Instalación y configuración de Windows Subsystem for Linux 2

    Instalación y configuración de Windows Subsystem for Linux 2

    04:35
  • 7
    Instalación de WSL y solución de errores en Windows 10

    Instalación de WSL y solución de errores en Windows 10

    10:53
  • 8
    Configuración y Uso de Windows Subsystem for Linux (WSL) con Ubuntu

    Configuración y Uso de Windows Subsystem for Linux (WSL) con Ubuntu

    06:24
  • 9
    Instalación de Máquina Virtual con VirtualBox en Windows

    Instalación de Máquina Virtual con VirtualBox en Windows

    10:19
  • 10
    Uso de Ubuntu en Máquinas Virtuales: Instalación y Configuración

    Uso de Ubuntu en Máquinas Virtuales: Instalación y Configuración

    13:42
  • 11
    Comandos básicos de terminal en Linux y edición con Visual Studio Code

    Comandos básicos de terminal en Linux y edición con Visual Studio Code

    07:54
  • 12
    Instalación de Node.js y npm en Ubuntu paso a paso

    Instalación de Node.js y npm en Ubuntu paso a paso

    08:02
  • 13
    Instalación y Ejecución Básica de Python en Linux

    Instalación y Ejecución Básica de Python en Linux

    08:02
  • Como usar Linux dentro de Windows

Git y Github
  • 14
    Registro y configuración inicial de GitHub en WSL

    Registro y configuración inicial de GitHub en WSL

    03:23
  • 15
    Creación y Configuración de Llave SSH para GitHub

    Creación y Configuración de Llave SSH para GitHub

    10:36
  • 16
    Subir y gestionar repositorios en GitHub con Git

    Subir y gestionar repositorios en GitHub con Git

    11:50
  • Git y Github

Trucos de Windows
  • 17
    Instalación y Uso de PowerToys en Windows

    Instalación y Uso de PowerToys en Windows

    06:23
  • Trucos de Windows

    Patricia Mago

    Patricia Mago

    student•
    hace 3 años

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

      Andrés Esteban Armijo

      Andrés Esteban Armijo

      student•
      hace 3 años

      Aguante edge

      Sebastián Caraballo Marzola

      Sebastián Caraballo Marzola

      student•
      hace 3 años

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

    Mauricio Oscar Núñez Melgarejo

    Mauricio Oscar Núñez Melgarejo

    student•
    hace 3 años
    Screenshot 2023-03-28 141913.png

    Cumplí el reto y me sorprendió el resultado.

      Johel Jesus Hoces Saenz

      Johel Jesus Hoces Saenz

      student•
      hace 3 años

      x2 man

      Jafet Brito

      Jafet Brito

      student•
      hace 3 años

      Igual y cuando liberen el nuevo Platzi solucionan esos problemas.

    Rodrigo Alles

    Rodrigo Alles

    student•
    hace 3 años

    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

      Iván Viveros

      student•
      hace 3 años

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

      Eduardo Monzón

      Eduardo Monzón

      student•
      hace 3 años

      Buena info, gracias.

    Juan Valentin Coria

    Juan Valentin Coria

    student•
    hace 3 años

    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

      Jafet Brito

      student•
      hace 3 años

      ¿Todavia te da cypto por navegar?

      Juan Valentin Coria

      Juan Valentin Coria

      student•
      hace 3 años

      Así es @jafet-brito

    Maria Gabriela Rodriguez Cuevas

    Maria Gabriela Rodriguez Cuevas

    student•
    hace 3 años

    🛠 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

      Marcos Monteverde

      student•
      hace 3 años

      gracias!

      Alejandro García Mateus

      Alejandro García Mateus

      student•
      hace 2 años

      genia el aporte gracias 😉

    Roberto Poblete Velázquez

    Roberto Poblete Velázquez

    student•
    hace 2 años

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

    Captura de pantalla 2023-08-06 122926.png
    Jhoen Marquina

    Jhoen Marquina

    student•
    hace 3 años

    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

      Victor Hugo Mayhua Tijera

      student•
      hace 2 años

      Estoy de acuerdo

      Luis Alonso Rivera Mejía

      Luis Alonso Rivera Mejía

      student•
      hace 2 años

      NBHFGF

    Esteban Ramon Padrón Urdaneta

    Esteban Ramon Padrón Urdaneta

    student•
    hace 3 años
    foto1.png

    Youtube

    Ana Beatriz Sierra Garrido

    Ana Beatriz Sierra Garrido

    student•
    hace 3 años
    2023-03-29.png

    curioso

    Santiago Sarmiento

    Santiago Sarmiento

    student•
    hace 3 años

    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

    Juan Felipe Rodriguez Martinez

    student•
    hace 3 años
    Temp.png

    //Symbolab.com Solucionador matemático de ecuaciones

    Sergio Daniel

    Sergio Daniel

    student•
    hace 3 años

    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.

      alexander perez

      alexander perez

      student•
      hace 2 años

      los yutuber están triste por tu comentario jaja

    Leonardo Fabio Narváez López

    Leonardo Fabio Narváez López

    student•
    hace 3 años

    no me da la posibilidad de subir el pantallazo

      Jafet Brito

      Jafet Brito

      student•
      hace 3 años

      Solo tienes que guardar la captura de pantalla y literalmente arrastrar el archivo a los comentarios y se sube la imagen.

    Daniela Ortiz Piedra

    Daniela Ortiz Piedra

    student•
    hace 3 años
    Captura de pantalla 2023-03-28 kibegrafik.com.png
    Felipe Zarza

    Felipe Zarza

    student•
    hace 3 años

    ¿Esta extensión para analizar nuestra web, es la misma que ingresando a https://pagespeed.web.dev/ ?

      Marcos Monteverde

      Marcos Monteverde

      student•
      hace 3 años

      Creo que es lighthouse, no se si hacen lo mismo

      Brian Steven Gutiérrez Prieto

      Brian Steven Gutiérrez Prieto

      student•
      hace un año

      Por lo que veo, una hace uso de la otra.

    Gustavo Antonio Vega Padron

    Gustavo Antonio Vega Padron

    student•
    hace 3 años
    test twitch.jpg
    Sergio Ivan Galvis Esteban

    Sergio Ivan Galvis Esteban

    student•
    hace 3 años
    Captura de pantalla 2023-03-30 220743.png
      Andrés Valencia

      Andrés Valencia

      student•
      hace 9 meses
    Ricardo Guzman

    Ricardo Guzman

    student•
    hace 2 años

    Encontré la extensión LIghthouse en Firefox y decidí hacer el reporte al mismo sitio web de los addons de Mozilla. Esta es la nota que obtuvo

    Camilo Tuñón Madrid

    Camilo Tuñón Madrid

    student•
    hace 2 años

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

    PEDRO DIAZ VARGAS

    PEDRO DIAZ VARGAS

    student•
    hace 5 meses

    2025 pero dandole con todo :)

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads