Lo confieso, me encantan los productos de Microsoft. No precisamente Windows, pero, desde que Apple y Google le dieron una paliza en el mercado de los móviles, la empresa ha desarrollado una serie de aplicaciones muy interesantes de código abierto, siendo Edge y VS Code dos de mis favoritas.

Por eso me pareció muy buena la decisión de integrar las herramientas de desarrollo del navegador en el editor de código. Aunque, no deja de preocuparme que esto ayude a consolidar el virtual monopolio en los motores de renderizado web.
Microsoft acaba de anunciar que ya está la disponible la nueva extensión Microsoft Edge Tools for VS Code. Esta nueva extensión permitirá a los desarrolladores utilizar desde el editor las herramientas para desarrolladores que vienen incluidas en su navegador.

La captura de pantalla que ven al principio del articulo es de mi propia instalación de la versión en desarrollo de Visual Studio Code en Linux.

La nueva extensión permite a los desarrolladores utilizar la herramienta Edge Elements and Network desde dentro de la aplicación. De esta forma se pueden detectar problemas de estilo, diseño y CSS y modificar el código sin tener que abrir otro programa.

Esto soluciona una carencia que algunos desarrolladores echaban de menos en Linux. Salvo BlueGriffon que es de pago, no había una aplicación que combinara un potente editor con la posibilidad de visualizar el sitio.

En principio, la apuesta de Microsoft por el software libre (que aunque mucha gente no lo recuerde data de los últimos tiempos de Steve Ballmer en la presidencia de la empresa) fue para atraer a los desarrolladores que cada vez más estaban prefiriendo las alternativas de código abierto. Sin dudas, ellos agradecerán la reducción del tiempo de depuración que traerá la nueva extension

Hasta el momento esta herramienta se encontraba en fase experimental bajo la forma de dos extensiones separadas.
n la barra de tareas.

La configuración de la extensión permite a los usuarios elegir dos modos de abrir el navegador. En el modo headless, el navegador no se abre en una ventana separada, sino que se abre en el panel izquierdo del editor.

Las principales características soportadas incluyen configuraciones de depuración para lanzar el navegador Microsoft Edge en modo de depuración remota y la conexión automática de las herramientas.

También ofrece una vista de barra lateral para listar los objetivos depurables, como las pestañas y las extensiones, y una función de screen-casting que permite a los desarrolladores ver su página y el código en forma simultánea.

Un punto importante es que la extensión necesita si o si tener instalado Microsoft Edge. No parece funcionar con Chrome u otro navegador.

Edge y Visual Studio Code ¿Funcionarán las herramientas en Linux?

Esto es algo que vale la pena destacar. Aunque la extensión ya está en la tienda de extensiones de VS Code, y los usuarios de Linux podemos instalarla, para tener acceso a una versión de prueba del navegador Edge habrá que esperar a algún momento de octubre  (aunque imagino que se puede hacer algún apaño usando enlaces simbólicos).

La versión inicial tendrá paquetes para las principales distribuciones de Linux, incluyendo Ubuntu, Fedora y openSUSE utilizando paquetes nativos en lugar de formatos multiplataforma como Snap, FlatPak o Appimage. Por el momento solo se podrá descargar de la página del proyecto.

Se sabe que salvo las opciones de sincronización usando las cuentas de Microsoft, las primeras versiones de prueba tendrán las mismas características que las versiones Windows y Mac. Por lo tanto, es de esperar que se integrará perfectamente con la extensión que estamos comentando.

Cómo utilizar la extensión

El procedimiento para usar la extensión es el siguiente
1) Instalar cualquier versión de Microsoft Edge.
2) Instalar VS Code
3) Instalar la extensión Microsoft Edge Tools for VS Code
4) Instalar la extensión Debugger for Microsoft Ede.
5) Abrir la carpeta que contiene el proyecto en el que se quiere trabajar.

Para aquellas personas que no les gusta nada que tenga que ver con Microsoft, podrían probar usando VS Codium, el código fuente de VS Code, depurado de todas  las herramientas de telemetría de Microsoft y engañando al sistema para que crean que Chromium es Edge. Claro que no estoy demasiado seguro que funcione.

Más información