¡Ah, qué chulo!
Mira, some dirty secrets.
Hostia, qué miedo esto.
A ver, trabajar de forma íntima
con developer tools.
Bueno, developer tools
have become complex and overwhelming.
Totalmente. ¿Cómo arreglar este?
Ah, mira, sorting tools
into use cases.
Bueno, estos son las herramientas de Edge
por lo que veo, ¿no? No sabía que ahora
que tenía que ir a la izquierda ahora como también
le han puesto este
tipo de iconos a la izquierda.
In context explanations.
Pues estas son cosas que están haciendo ellos, me parece, ¿no?
CCS mirroring.
A ver, ¿esto qué es?
No sabía que existía esta extensión.
Tiene buena pinta. La vamos a instalar ahora.
¡Hostia, qué chulo!
Claro, este es el problema.
¡Ah! ¡No!
¡Holio!
A ver, a ver, a ver.
Vamos a probar esto. Espera, espera.
Me he puesto hasta nervioso.
Me he puesto hasta nervioso. A ver, a ver, a ver.
Elige el navegador que prioriza tus necesidades.
Me encanta, ¿eh?
La verdad es que nunca me había parado a leer un poco...
Tengo que decir que de Microsoft
cada vez me gusta más.
Microsoft, en general, como que me gusta
el movimiento que tiene y tal.
Pero sigo sin poder tragar, con todo mi cariño,
a la gente de Microsoft.
No trago un poco con su diseño.
¿Sabes? O sea, los diseños de Microsoft
es como que...
No sé, no me terminan.
No me terminan. Este online...
Todo, todo. No sé.
No sé. Igual soy yo, ¿eh?
Igual soy yo.
Pero no me termina.
Creo que necesita Microsoft como un...
Renovar la UI de todo.
No sé.
Como que no me gusta...
Y claro, como lo tienen todos los sitios,
pues yo creo que son bastante mejorables.
Vale.
Vamos a ver si se ha instalado ahora Edge.
Y vamos a probarlo.
Vamos a probar la magia esta.
Si te acabas de conectar...
Espero que no pete ahora mucho el directo.
La animación es un poco caca.
Ese corte en la animación se lo podría haber currado un poco más.
Sí, en general se lo podría haber currado un poco más.
Mira, encima, genial, ¿eh?
Que te sale aquí...
A ver si buscamos aquí MiduDev.
¿Qué buscador utiliza?
Bing.
Madre mía, Bing.
Bing, que cada vez se parece menos a Bing y más a Google.
O sea, ya me parece...
Hostia, qué bonito.
Pues esto está chulo, ¿no?
Al menos.
Este oso aquí...
No sé, pero me parece un poco ya descaradísimo como se parece.
Madre mía, es que ni regalándome cosas.
Ni regalándome cosas.
Pero bueno, está bien.
Tenemos aquí bien.
Venga, vamos a probar esto.
Vámonos a localhost 3000.
A ver si funciona...
Vaya, sí.
La tengo que levantar.
Vamos a levantar mi blog.
Vamos a ver...
Estoy...
Voy...
¿Qué estoy haciendo?
Te voy a explicar qué estoy haciendo antes de que...
Básicamente, voy a levantar el blog en modo desarrollo.
Y estábamos viendo que Edge tiene, al parecer, una extensión que es esta.
Launch and Instance...
Vale.
O sea, que primero hay que lanzar la instancia desde aquí.
Vale.
Pues vamos a lanzar la instancia.
Lanzamos la instancia.
DevTools for Visual Studio Code.
Ahora puedes utilizar Edge Developer Tools, que son las que salen aquí.
¿Vale?
Podemos ver que tengo aquí unas Edge DevTools.
Las tengo aquí en el editor.
Dentro de tu editor para inspeccionar, cambiar y hacer debug.
O sea, dice que directamente vaya al proyecto donde quiero trabajar.
¿Vale?
Es este proyecto.
Y aquí me dice que si yo cambio...
A ver.
Aquí dice...
Todo el Mirror Editing off.
Vale.
Mirror Editing is Correlion.
Lo que se supone que va a ocurrir es que si yo cambio propiedades del CSS, no sé con qué magia oscura, pero me parece que no.
Me parece que no va a funcionar en este caso.
Creo que no va a funcionar en este caso por cómo funciona este proyecto.
Me parece a mí.
Me da la sensación.
Porque esto lo que hace es editarlo y ponerlo en línea y tal.
Me parece que no va a funcionar.
A ver.
Lo podemos probar, pero yo creo que no va a funcionar.
A ver.
Vámonos a los estilos.
A ver dónde tengo los estilos.
¿Dónde tengo los estilos yo?
Static.
No.
Static no.
No sé dónde tengo los estilos.
Styles.
Style.
Global CSS.
Vale.
Bueno, se supone que utilizando estas Edge Tools, estas del editor, si yo cambio algo, como por ejemplo el body, que yo le pongo aquí, background red, ¿no?
¿Ves?
Me dice, ha ocurrido un problema porque no ha podido encontrar un workspace mapping, no ha sido encontrado en localhost 1313.
Esto es, entiendo que esto es por cómo funciona esta herramienta.
Si nos vamos a otro, igual es este proyecto que no iba a funcionar.
A ver, otro proyecto como el de Codilink.
Vamos a probar Codilink.
A ver si con este tenemos más suerte.
Va.
Y ahí sí que tiene un map.
Porque ahora entiendo un poco cómo debe funcionar esto.
Esto debe estar funcionando utilizando el map.
Que se te deja un comentario al final que te dice justamente dónde está realmente el archivo real.
A ver, vamos a ponernos aquí.
Vamos a levantar Codilink.
Vale.
Puerto 3000.
Vale.
Aquí veo que ha cambiado.
Parece que ha ido bien.
Un software de pruebas automáticamente está controlando Microsoft Edge.
Vale.
A ver, vamos a probar aquí.
Mira, ahora sí.
Fíjate lo que ha pasado.
¡Dios, cómo mola!
Mira, he cambiado aquí el color rojo.
Lo he cambiado aquí.
Y me ha abierto automáticamente, señor, que haga nada.
Me ha abierto el archivo de estilos.
Está el punto CSS.
Y me ha cambiado el valor.
De hecho, si vuelvo a poner aquí blue.
Fíjate.
¡Oh, Dios mío!
¡Qué pasada!
Hostia, qué chulo.
¿Habéis visto eso?
Y además, o sea, entiendo...
A ver, para que veamos esto bien, ¿eh?
Hostia, esto está muy chulo, ¿eh?
Para que veamos esto bien...
Pero bueno, ahí podéis ver el color un poco del fondo.
Yo entiendo que le puedo dar a este botón.
Me voy aquí.
Edito, ¿vale?
Y digo, venga, el aside...
Aside...
Le vamos a poner...
Yo qué sé.
Azulito, ¿vale?
Pues fíjate.
Yo ahora refresco...
Ah.
Ah, porque hay que guardar los cambios.
Perdón, perdón.
Ahí he sido cagada mía, ¿eh?
Perdón.
Claro, porque sí que los pone...
Mira, aside.
Pa, pa, pa.
Y ahora, si yo aquí, ¿ves?
Me ha editado esto.
Y aquí me ha cambiado en el aside.
Me ha cambiado el color.
O sea, me está sincronizando los cambios que estamos haciendo.
Hostia, qué chulo.
Contexto, me dicen por aquí.
Contexto rápido, básicamente.
Contexto rápido es...
Tenemos unas herramientas...
Bueno, una extensión de Edge.
De Edge DevTools.
Que se abren dentro del Visual Studio Code.
Que lo que hace es sincronizar los cambios que tú haces en las herramientas, en las DevTools.
De estas que estás utilizando.
Las sincroniza con el archivo real.
Y me imagino que también podríamos hacer que lo guarde automáticamente.
No sé si eso podría ser.
Pero bueno, me parece increíble.
O sea, yo voy cambiando aquí el color.
Pongo white.
Y ves, es que me lo guarda.
O sea, es que lo sincroniza el cambio en tiempo real.
Lo que es una pena es que no guarde.
El cambio, ¿sabes?
O sea, el cambio aparece aquí como sin guardar.
Eso es un poco rollo.
Me gustaría...
No sé si...
Seguramente se podrá, ¿eh?
Seguramente habrá algún tipo de configuración por ahí.
Pero mira, aquí encima tendríamos todas las pestañas que hemos ido abriendo.
Mira, aquí tenemos toda la información de la página.
¡Buah!
Estoy flipando, ¿eh?
Estoy alucinando.
A ver, vamos a ver un momento si se puede mejorar esto del...
A ver.
Edge Dev Tools.
Edge Dev Tools.
Auto Attach.
Default.
Mirror Edits.
Enable Mirror Edits.
¿Vale?
Es que lo único que me falta es que haga el...
¿Sabes?
Que guarde los cambios automáticamente.
Pero veo que no.
Estaría genial que además de que te los cambie...
O sea, que los cambia, ¿no?
O sea, ¿ves?
En tiempo real los cambia.
Solo que no guarda el archivo.
Que eso ya sería increíble, ¿no?
Dice, está bien que no te lo guarde automáticamente para evitar errores.
Hombre, ya, pero que te dé la opción.
O, por ejemplo, una cosa que me gustaría, ya que si no te lo guarda automáticamente, sería genial poder guardarlo desde aquí.
¿Sabes?
O sea, yo darle aquí a comando S y que lo guarde.
Pero es que no lo hace.
Eso ya sería increíble, ¿sabes?
Si no lo guarda automáticamente, al menos poder hacer un comando S aquí y que lo guarde, que guarde el archivo.
Eso ya sería brutal.
O sea, al menos un comando S.
Es que lo malo es que tienes que cambiar el foco y guardarlo.
Activa el autosave de Visual Studio Code.
Hombre, claro.
Ya, pero yo quiero...
O sea, yo solo quiero cuando pase esto.
No quiero autosave.
No quiero autosave.
Si no, eso es más general, ¿eh?
Si añades esta en el element style, ¿lo pone HTML?
A ver, es que me imagino además...
A ver, podemos probar una cosa.
Si yo me pongo...
Si yo pongo un HTML.
¿Vale?
A ver, un HTML no creo.
No, no creo que un HTML lo ponga, ¿no?
Porque no tenía mucho sentido.
A ver, editamos HTML.
Y yo aquí le pongo...
¿Hola?
Nah.
Solo CSS.
Que tiene sentido, ¿eh?
Y si lo ponemos en el element style...
No, tampoco.
Tiene que ser...
Tiene que ser así.
Tiene que ser...
Aquí, por ejemplo, sí que funcionaría.
Aquí sí que funcionaría.
¿Ves?
Aquí está funcionando.
Aquí está funcionando.
¿Por qué?
Porque tiene...
En el element style no va a funcionar.
Solo va a funcionar en...
Voy a dejarlo así.
Solo funciona en aquellos que tiene este enlace al archivo real.
Claro.
Que tiene sentido, ¿eh?
Que tiene bastante sentido.
Pero, bueno, me gusta, me gusta.
Me gusta.
Sí, con el save all me imagino que a lo mejor sí que funciona, ¿eh?
A ver.
Cuatro.
¡Guau!
¡Qué chulo esto, eh!
Esto sería...
¿Cuándo es ese?
Pues...
Pues me parece que no funciona, ¿eh?
No.
No, es como que no funcionan los...
Es como que no funcionan...
Mira, es como...
Claro.
¿Sabes qué pasa?
Que...
Que no funcionan los...
No están funcionando los shortcuts.
No funcionan los shortcuts aquí.
Cuando tú estás aquí no funcionan los shortcuts de Visual Studio Code.
Pero, bueno, bastante interesante, ¿eh?
Esto no lo esperábamos.
Y ahí está.
Ahí está.
Bueno, vamos a ver si descubrimos alguna cosa más, ¿no?
Ahora que...
Sorting...
Providing in context explanations...
Cessers mirroring...
Esto está muy chulo, ¿eh?
What if Visual Studio Code became the editor of in browser developer tools?
Bueno, que es un poco lo que hemos visto.
Tú eres la audiencia...
Bueno, esto es por si quieres añadir algún tipo de feedback y más trabajo.
Bueno, ha terminado aquí, pero ha terminado por todo lo alto, ¿eh?
O sea, bien.
Bien.
Me ha gustado.
Me ha gustado.
No me lo esperaba.
No me esperaba...
No sé si aparte del CSS mirroring...
Que está muy bien.
Me parece una idea brutal.
Pero no sé si hay más.
Más que esto.
¿Sabes?
No sé si me quedo un poco...
Ay, sí.
Os lo paso.
Es que os lo he pasado antes.
Esta es la charla...
Os dejo ahí el artículo, ¿vale?
Muy interesante, ¿eh?
Muy interesante.
Vale.
Más.
Que tengo más cositas por aquí.
Tengo...
DisplayGrid is not supported by Internet Explorer.
Como si me importase Internet Explorer.
Gracias por...
Gracias por...
Mr. Obvio.
No sé...
No sé quién...
Mierdas.
Me está metiendo estos...
¿Quién me está metiendo esto?
Compact API...
Ah, Microsoft Edge Tools.
¿Será joputa?
¿Será cabrón?
¿Para eso te instalo?
¿Para que me des por culo?
Acuéstate.
A dormir.
A dormir.
A dormir.