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
    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 4 años

      Otro punto mas para Vue.js

    Cristian Andres MQ

    Cristian Andres MQ

    student•
    hace 5 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 4 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 5 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 5 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 5 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

    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.

    Aldo Fabro

    Aldo Fabro

    student•
    hace 5 años

    Filesystem + git = evolución.

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