DevTools como editor (IDE)

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

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.
  
  

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

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

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 😃

Usando DevTools como IDE

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.

I n c r e í b l e !! 😄

Solucion al reto:

esto esta genial

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

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

devtoools un nuewvo feature de usarlo como editor de codigo

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

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

Configuración en navegador

Esta clase vale oro.

![](

Vine buscando cobre y encontré oro!! ❤️

Listo!

Esto sin duda es genial

puedo manipular php con devtools? o que puedo hacer?

Siguiendo los cursos de Diego!

Muy bueno todo lo que se puede con Chrome DevTools, yo estoy armando mi cv aplicando lo ultimo que aprendí en el curso de GRID layout, recien empiezo pero ya va tomando forma.

Para guardar los cambios en tu local desde DevTools.

Filesystem + git = evolución.

Esto me parece extremadamente peligroso!!! cambiar cosas que no quieres cambiar y despues todo estallado!

Excelente!!! super clase

Geniales todas las funcionalidades vistas hasta ahora!!

Rayos esto no lo sabia, el curso sin duda oro puro.

Genial esta clase, no sabía que se puede hacer esto en Google Dev Tools

Me siento como con superpoderes. 😄

Excelente, nos ahorra mucho tiempo.

Empiézate a acostumbrar que DevTools va a ser tu nuevo editor de texto

que buena clase, me ahorraré mucho tiempo

Realmente no hay conexión con el editor de texto, la conexión es de Chrome con los archivos y cuando se cambia el archivo el editor de texto detecta los cambios y actualiza la vista de ese archivo.

Vengo usando Firefox developer edition pero no veo como cargar mis carpetas en las devtools, aunque puedo editar html y hojas de estilos desde alli y guardarlas…

Uhmm despues de probarlo como dijo el profe me di cuenta que esta bueno como para modificar el archivo y hacer correcciones pero como para trabajar el proyecto de cero y seguir avanzando por la devTool me parece mas rapido el editor de texto con sus atajos y ayudas

Que increíble. No conocía esta funcionalidad de DevTools. Hasta ahora tenía que ir copian y pegando todos los cambios poco a poco 😄 😄

Para los que les guste Mozilla Firefox hay un proyecto llamado
developer edition https://www.mozilla.org/es-ES/firefox/developer/
tambien se puede usar como IDE.

¡Qué maravilla de clase!

Reto:

So dope!

de verdad que util wow

Cual es la ventaja de usar FIlesystem vs LiveServer y Autosave ?, si la hay obviamente, digamos que en la práctica hacen lo mismo.

hola! use devtools como editor y fantastico para guardar los cambios no crean que es con enter es con ctrl + s cosas que pasan

editor de codigo nada mas en chrome

Definitivamente esta es la función mas importante

¿Hay alguna forma de hacer un refrescado automático con dev tools?, así como le hace con el live server de visual studio code

Súper útil

Estoy muy comodo con Visual Studio Code, pero sin duda, ligaré mi proyecto, por que los detalles los manejaba copiando y pegando desde el devTools

Angular serviria? o ningun framework de desarrollo web?

Al momento de realizar la modificación, guardaste, y la página se refrescó automáticamente o la actualizaste manualmente?

¿Siempre es necesario, copiar el código a consola para ver el resultado del programa javascript?

WOW, tocaría esperar a ver si se puede integrar con React en el futuro.

Súper eficiente para trabajar en tiempo real 😄

Si e lo pregunte desde el principio y pense que no se podia pero ya vi que si.

Que genial, poder hacer que los cambios se guarden desde el navegador.✔✌

Que padre se volvio como un IDE tipo RAD, lo cual es super, al menos para mi, por mas configurado que tenga uno una herramienta si algo nuevo ya conociendolo no se usa por ego, pero recorta tu tiempo a la hora de programar no eres eficiente, efectivo y eficaz.

🤯🤯🤯🤯

Que maravilla y hasta ahorita la conozco…

o.o Luego hago cambios y se me olvida copiar y pegalos al editar 😦 mientras tanto todo lo que hice se perdio.

Y ahora se esto … un nuevo cambio.

Aquí probandolo con un pequeño proyecto personal. Este curso esta genial Diego es un gran profesor, explica todo forma clara y simple

Wow!!!

Esto es brujería

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

Vaya!! Ahorras mucho tiempo. Pero, considero que, para los que van comenzando en el desarrollo (como yo), el buscar el “error”, el color…etc. Forja el caracter (paciencia). Algo me ayudó para comenzar éste camino fue eso.

Da igual si estoy trabajando en una rama de git? Por qué a mi no me actualiza los cambios del DevTools al VsCode?

Probé el levantar la carpeta del proyecto para dos tipos:
ASP.NET MVC y otro en Wordpress, funciona ! pero… tengo q pulsar F5 para que se reflejen los cambios en el navegador 😦
Algun truco o los overrides harían que cuando guarde se refleje en el Browser automáticamente? F1pls

Lo mejor de la vida este curso<3

Quedaría así

Adjunto el reto completado. Aplicando un proyecto en SASS para verificar que sea cierto si se puede usar dicho procesador en el navegador.

En definitiva este es un gran curso 😄!

Esto si que es otra onda 😎

quede frikiao

muy bueno este recurso, aplausos

Esto està de la chingadaaaa!!! 😮 😮

No es algo serio pero quise crear algo desde 0

Muy buena herramienta, pero a decir verdad creo que la usaría para complementar luego de haber armado el html y css en un editor tipo vs code ya que me apoya con el autocompletado de etiquetas…
(

El mismo proyecto de Google clone:

En el Reto:
curiosamente parece todos los archivos están “enlazados” menos (y el que estoy necesitando) el css … qué creen puede estar pasando?

Adjunto mi Reto. De verdad que Dev Tools es una excelente herramienta.

me encanto esta clase! 💚

Reto completado

1:09 Conectando nuestros archivos locales al FileSystem del DevTools para guardar de forma dinámica todos los cambios que hagamos sobre nuestros archivos directamente desde el navegador.

Enlaces complementarios:
Tutorial Overrides, cómo activarlo y usarlo de George Hossa
Edit Files With Workspaces
Comentarios valiosos de la comunidad: 1

Funcionó perfecto, @degranda