¿Qué pasaria si … pudieras usar Visual Studio Code como editor de las DevTools en el navegador?

Las herramientas de desarrollo tienen excelentes herramientas visuales que le permiten modificar y depurar el código de front-end. El problema es que los cambios no están sincronizados y una vez que recargas la página, todo está perdido. Los espacios de trabajo son una función para solucionar ese problema. Los de Microsoft quieren utilizar las capacidades de sincronización de los espacios de trabajo y reemplazar el editor incorporado en la herramienta Fuentes con Visual Studio Code, lo que le brinda la conveniencia del editor al que está acostumbrado y las herramientas visuales que brinda el navegador DevTools.

Con este fin, se nos ocurrió una nueva forma de invocar un espacio de trabajo y hacer que VS Code sea el editor del navegador. Es un experimento que debe activar en DevTools eligiendo el ícono de ajustes.

Una vez que habilitó el experimento «Open source files in Visual Studio Code», el navegador detectará automáticamente cuando trabajen en un archivo local o en un servidor local.

Luego les pide que defina la carpeta raíz de este archivo y les dice a DevTools dónde encontrarlo.

Pueden obtener más información u omitir la configuración de la funcionalidad. Una vez que presionaron «Establecer carpeta raíz», pueden elegir la carpeta usando Finder o Explorer (o cualquier otro administrador de archivos que use).

Una vez elegido, DevTools necesita acceso o permisos a esta carpeta para escribir archivos en ella.

Si otorgan acceso a DevTools, la activación de cualquier enlace en las herramientas ahora abrirá la carpeta con todos los archivos en Visual Studio Code en lugar del editor incorporado en la herramienta Sources.

Obtiene una nueva instancia de VS Code y el archivo se abre en la línea correcta.

Cualquiera de los cambios que hagan ahora en el CSS en DevTools cambia el archivo y se refleja dentro de VS Code. Si realizan un cambio en VS Code y guarda el archivo, también se sincroniza en vivo en el navegador.

Es permitido cambiar la configuración del experimento para no abrir archivos en VS Code y no sincronizar en vivo los cambios.

Pueden leer más sobre esto en los documentos oficiales y tambíen pueden comentar y decir que piensan al respecto. Ademas tambien comentar en Twitter en @EdgeDevTools o utilizar el mecanismo de retroalimentación integrado en las herramientas directamente.