CursosEmpresasBlogLiveConfPrecios

Cómo guardar cambios de DevTools en archivos locales

Clase 10 de 22 • Curso de Debugging con Chrome DevTools

Clase anteriorSiguiente clase

Contenido del curso

Introducción

  • 1
    Debugging con Dev Tools: curso intermedio

    Debugging con Dev Tools: curso intermedio

    04:58 min
  • 2
    Qué son las Chrome Dev Tools y cómo abrirlas

    Qué son las Chrome Dev Tools y cómo abrirlas

    03:50 min

Elementos y Estilos

  • 3
    Manipular HTML con DevTools Elements

    Manipular HTML con DevTools Elements

    06:15 min
  • 4
    Chrome DevTools: editar CSS en tiempo real

    Chrome DevTools: editar CSS en tiempo real

    07:27 min
  • 5
    Selector de colores DevTools en Chrome

    Selector de colores DevTools en Chrome

    05:45 min
  • 6
    Generar sombras CSS con Chrome DevTools

    Generar sombras CSS con Chrome DevTools

    04:36 min
  • 7
    Animaciones CSS con Dev Tools: timing y velocidad

    Animaciones CSS con Dev Tools: timing y velocidad

    06:36 min
  • 8
    Midiendo código no utilizado con DevTools Coverage

    Midiendo código no utilizado con DevTools Coverage

    06:05 min
  • 9
    JavaScript con DOM en Dev Tools

    JavaScript con DOM en Dev Tools

    04:09 min
  • 10
    Cómo guardar cambios de DevTools en archivos locales

    Cómo guardar cambios de DevTools en archivos locales

    Viendo ahora

Mobile Simulation

  • 11
    DevTools para proyectos responsive

    DevTools para proyectos responsive

    15:07 min
  • 12
    DevTools simula red lenta y CPU débil para probar

    DevTools simula red lenta y CPU débil para probar

    08:53 min

JavaScript

  • 13
    Cómo debuguear JavaScript con DevTools

    Cómo debuguear JavaScript con DevTools

    08:56 min
  • 14
    Debuggear concatenación con DevTools

    Debuggear concatenación con DevTools

    07:11 min

Network

  • 15

    Proyecto de Clase Disponible en Platzi

    00:06 min
  • 16
    Network en DevTools: qué se descarga y pesa

    Network en DevTools: qué se descarga y pesa

    07:12 min
  • 17
    Cómo usar Network para depurar peticiones HTTP

    Cómo usar Network para depurar peticiones HTTP

    09:04 min

Performance

  • 18
    Optimización de animaciones con Performance DevTools

    Optimización de animaciones con Performance DevTools

    12:54 min

Audits

  • 19
    Auditorías móviles con Dev Tools

    Auditorías móviles con Dev Tools

    08:45 min
  • 20
    DevTools: auditoría desktop vs mobile

    DevTools: auditoría desktop vs mobile

    05:33 min

Cierre

  • 21
    Examen y siguientes cursos tras Dev Tools

    Examen y siguientes cursos tras Dev Tools

    02:23 min
  • 22
    Qué es una Progressive Web App

    Qué es una Progressive Web App

    05:02 min
Tomar examen

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
        Carlos David Ramírez Gómez

        Carlos David Ramírez Gómez

        student•
        hace 6 años

        Vengo a traer la información de que Filesystem es compatible con Vue.js

          Juan Christopher

          Juan Christopher

          student•
          hace 5 años

          Gracias.

          Luis Alejandro Vera Hernandez

          Luis Alejandro Vera Hernandez

          student•
          hace 5 años

          Otro punto mas para Vue.js

        Cristian Andres MQ

        Cristian Andres MQ

        student•
        hace 6 años

        muchas cosas que procesar, lo que se pierden algunos por no hacer estos pequeños cursos.

          Jose Roberto Orozco Bazua

          Jose Roberto Orozco Bazua

          student•
          hace 5 años

          La verdad, yo subestime este curso en un principio, valió la pena dejar el ego a un lado.

          Diego Camino Reinoso

          Diego Camino Reinoso

          student•
          hace 4 años

          Totalmente de acuerdo con ustedes, cualquier curso por más básico que sea, siempre te deja algo nuevo que no sabías, no podemos pretender saberlo todo.

        Christian David Sánchez

        Christian David Sánchez

        student•
        hace 6 años

        SOURCES - FILESYSTEM

        • Ir a la pestaña de sources.
        • Agregar la carpeta donde están tus arhivos HTML y CSS desde la pestaña de Filesystem.
        • Modificar tu código HTML o CSS dentro del tab de sources.
          FileSystem.PNG
          Andrés Felipe Lopez gomez

          Andrés Felipe Lopez gomez

          student•
          hace 5 años

          Gracias

          Luis Alejandro Vera Hernandez

          Luis Alejandro Vera Hernandez

          student•
          hace 5 años

          Esta clase es oro.

        Jorge Ossa

        Jorge Ossa

        student•
        hace 6 años

        Les comparto otra buena herramienta que tienen los DevTools: Overrides, cómo activarlo y usarlo

          Luis Fernando Pedroza Taborda

          Luis Fernando Pedroza Taborda

          student•
          hace 6 años

          Excelente aporte George.

          Jesús Joel Sarabia Félix

          Jesús Joel Sarabia Félix

          student•
          hace 6 años

          No viene siendo lo mismo que vimos en la clase?

        Edward Rodríguez

        Edward Rodríguez

        student•
        hace 5 años

        Comparto que es compatible en tiempo real también con Git! O sea que si te arrepientes de las cosas que has hecho, también puedes arreglar todo con Git, y ni siquiera hay que reiniciar el Inspector de Elementos. Hermosa herramienta :)

          Joel Dominguez Merino

          Joel Dominguez Merino

          student•
          hace 5 años

          Gracias por el dato! Y que genial que podamos deshacernos de los cambios en caso de que no nos sirvan en tiempo real!!

          Andrés Felipe Lopez gomez

          Andrés Felipe Lopez gomez

          student•
          hace 5 años

          gracias

        Efraín Hernández García

        Efraín Hernández García

        student•
        hace 6 años

        Usando DevTools como IDE

        4.png

          Jimmy Buriticá Londoño

          Jimmy Buriticá Londoño

          student•
          hace 5 años

          👍

        Luis Fernando Pedroza Taborda

        Luis Fernando Pedroza Taborda

        student•
        hace 6 años

        Nunca pense que DevTools fuera una herramienta tan poderosa, llegar a servir como editor IDE y mas aún ver nuestros cambios en tiempo real.

        Edito IDE DevTools.jpg
          YULISSA RESTREPO ARANGO

          YULISSA RESTREPO ARANGO

          student•
          hace 3 años

          Genial :D

        Uriel Mojica Mejía

        Uriel Mojica Mejía

        student•
        hace 6 años

        I n c r e í b l e !! :D

        Jorge Méndez Ortega

        Jorge Méndez Ortega

        student•
        hace 6 años

        esto esta genial

        Captura de Pantalla 2020-05-19 a la(s) 20.53.01.png

        Guillermo González López

        Guillermo González López

        student•
        hace 4 años

        Vine buscando cobre y encontré oro!! <3

        Erick Daniel Pérez Mata

        Erick Daniel Pérez Mata

        student•
        hace 6 años

        Solucion al reto:

        reto_1.png
        Cristobal Nyram

        Cristobal Nyram

        student•
        hace 5 años

        Un curso que supera mis expectativas como siempre

        "No sabes lo que no sabes"

          Alex Camacho

          Alex Camacho

          teacher•
          hace 5 años

          ¿Qué es lo que más te gustó del curso? ¿Lo recomiendas ampliamente?

        Aarón Fabricio Santa Cruz Valdez

        Aarón Fabricio Santa Cruz Valdez

        student•
        hace 6 años

        Me parece buena herramienta, pero prefiero mi editor de código ahí ya lo tengo todo personalizado para trabajar.

          Markin Piero Pulache Guarniz

          Markin Piero Pulache Guarniz

          student•
          hace 2 años

          x2

        Jean Nuñez

        Jean Nuñez

        student•
        hace 6 años

        devtoools un nuewvo feature de usarlo como editor de codigo

        Carolina Salazar Rios

        Carolina Salazar Rios

        student•
        hace 6 años

        En mi google-clone el micrófono lo agregue como un icono y por medio de devtools logre que los colores fueron mas parecidos con puro CSS

        Capture.PNG
        Angel Hernandez

        Angel Hernandez

        student•
        hace 4 años

        En brave browser tambien es posible. Aqui un screenshot, y esta clase estuvo increble!

        Captura de pantalla de 2022-01-27 21-47-30.png
        Steven Mosquera

        Steven Mosquera

        student•
        hace 5 años

        Si utilizan Visual Studio Code podrían bajar la extensión Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Es lo mismo pero desde el editor de codigo

        Nuria Campo Durán

        Nuria Campo Durán

        student•
        hace un año

        Sinceramente tengo sentimientos encontrados con esta utilidad, ya que si las DevTools las utilizamos para probar nuestro código y ver si nos convencen o no los cambios que estamos realizando... al quedarse automáticamente guardados en nuestro editor de código no podremos deshacer estos cambios y volver al código anterior. No me convence, creo que no lo usaré.

        Jorge Méndez Ortega

        Jorge Méndez Ortega

        student•
        hace 6 años

        Recuerdo que en una ocación me comentaban que es posible debuggear desde devTools nodejs, en verdad es posible?

          Favio Sauto

          Favio Sauto

          student•
          hace 6 años

          Sí, es posible, tienes que seguir unos pasos primero.

          Te dejo el link que encontré de cómo hacerlo, está bien explicado y todo.

          Link: https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

          Jorge Méndez Ortega

          Jorge Méndez Ortega

          student•
          hace 6 años

          Gracias

        Julian Camilo Carvajal Mellizo

        Julian Camilo Carvajal Mellizo

        student•
        hace 5 años

        Mi sistema operativo es Windows 10 pero actualmente trabajo con WSL2 y tengo todos mis proyectos ahí.... ¿alguien sabe si existe alguna forma de vincularlo con ubuntu?

          Daniel Adolfo Ordoñez Rubio

          Daniel Adolfo Ordoñez Rubio

          student•
          hace 5 años

          Hola, Julian :) ¿Podrías explicarme un poco mejor qué es lo que quieres conseguir? Creo que no termino de entender 😬

          Si te refieres a poder agregar un espacio de trabajo (workspace) en Chrome con un OS Ubuntu, puedes hacerlo como en Windows: vas a Sources y Fylesystem, presiones en el botón [+] y selecciones el directorio de trabajo.

          Screenshot from 2020-12-28 17-12-06.png

          Puedes ver más en worspaces.

          Si tu duda es ¿dónde están mis proyectos de Ubuntu en WSL? puedes verlo aquí.

          Espero haberte ayudado aunque sea un poco, cuéntame si te sirvió alguno de los enlaces anteriores o si aún tienes dudas 👍 ¡Nunca pares de aprender! 💚

          Brayan Stiven Hernandez Manrique

          Brayan Stiven Hernandez Manrique

          student•
          hace 5 años

          Hola daniodonez, quiero hacer la segunda propuesta que hiciste en el anterior comentario, pero aun con el blog que compartiste sigo sin poder acceder a mis archivos del Ubuntu de WSL2, de pronto conoces otra manera de hacerlo, gracias. Lo que quiero es conectar esos archivos al DevTools.