Herramientas para desarrolladores en el nuevo Microsoft Edge

El nuevo navegador basado en Chromium de Microsoft ha tenido recientemente su segunda versión pública estable, presentando Edge 80 con soporte completo ARM64, así como herramientas mejoradas para ayudarlo a construir y trabajar con contenido web. Al igual que las versiones anteriores del ahora heredado Edge, el nuevo navegador de Microsoft mantiene el familiar acceso directo F12 para iniciar sus herramientas de desarrollo, ya sea adjunto al navegador o en un panel separado.

Vale la pena familiarizarse con las cosas nuevas, ya que aunque existen similitudes con el Edge heredado, ahora está trabajando en un mundo Chromium y hay mucho más en común con Chrome y otros navegadores basados ​​en Chromium. Eso no es malo. Es más fácil transferir habilidades entre navegadores, y si ha estado usando Chrome como navegador de desarrollo, será fácil comenzar a trabajar en el nuevo Edge. Sin embargo, Microsoft ha realizado algunos cambios propios y está trabajando para extender la experiencia del desarrollador de Edge al código de Visual Studio para que pueda desarrollar y probar aplicaciones JavaScript en un solo entorno.

Una experiencia de desarrollador multiplataforma

Con el nuevo Edge disponible en Windows 7 y macOS, y con una versión de Linux en desarrollo, hay acceso a las mismas herramientas de desarrollo en diferentes plataformas. Obtiene los mismos inspectores, depuradores y consolas, por lo que es fácil ejecutar las mismas pruebas donde sea que esté trabajando y en cualquier sistema operativo que esté usando. Un desarrollador familiarizado con Edge en Windows debería poder cambiar a una Mac para probar el código sin tener que esperar la ayuda de un desarrollador de Mac.

Al igual que Edge heredado, las nuevas herramientas de desarrollo de Edge basadas en Chromium lo ayudan a examinar el HTML, CSS y JavaScript en su sitio, con un depurador de JavaScript y una consola para ver la salida de registro de la consola al ejecutar JavaScript. Puede usar las herramientas para activar rápidamente una barra de herramientas del navegador que agrega modos de vista del dispositivo, lo que le brinda la opción de probar el diseño receptivo sin salir de una PC de desarrollo.

Usar las herramientas para desarrolladores de Edge

Las herramientas de desarrollo de Edge se encuentran en nueve paneles diferentes, cada uno de los cuales le brinda información diferente sobre su aplicación web. Es más probable que utilice la primera: la vista Elementos.

Esto profundiza en su HTML y CSS, mostrando qué elementos en una página son generados por qué secciones de código. Apuntar a un elemento en la ventana de su navegador resalta el código relevante, lo que ayuda a aislar el HTML o CSS que desea depurar. Un panel muestra HTML; el otro muestra el CSS actual, con los estilos aplicados actualmente y los detectores de eventos que se están utilizando. Puede ver qué reglas CSS se están utilizando actualmente y cuáles se ignoran.

El panel Elementos también está disponible como una extensión de Visual Studio Code, lo que lleva la inspección del diseño junto con la edición de HTML. Es una forma útil de ver rápidamente cómo los cambios en su código afectan los diseños de su página. Incluso puede adjuntar código a una instancia del navegador, lo que le brinda acceso directo a cualquier documento HTML abierto.

Preparándose para las PWA

Una de las herramientas más útiles es el panel Rendimiento. Desde aquí puede registrar las actividades de su navegador. Una vez que se completa una secuencia de prueba, puede usar la línea de tiempo de la herramienta para perfilar los recursos que usa su aplicación. Es mejor usarlo junto con las herramientas de Red y Memoria, especialmente si está usando mucho JavaScript. Comprender el rendimiento de una aplicación web es especialmente importante si planea usarla como una PWA (aplicación web progresiva), y aquí un panel de aplicación agrega herramientas para examinar los componentes clave de una PWA, incluidos los trabajadores de servicio y almacenamiento local.

Con Edge facilitando la identificación e instalación de PWA, vale la pena explorar estas herramientas con más detalle, especialmente el panel Aplicación. Con una apariencia similar a un tablero, es una manera rápida de obtener una visión en profundidad de lo que sucede dentro de sus aplicaciones y cómo funcionarán fuera del navegador. Puede utilizar la herramienta Aplicación para explorar cómo funcionan los servicios integrados de Edge, como el controlador de pagos.

Usar complementos en Edge DevTools

Otra característica del cambio a una experiencia de desarrollador basada en Chromium es la compatibilidad con complementos de terceros. Algunos ya están disponibles en la propia tienda de complementos de Edge (aunque actualmente solo a través de enlaces profundos privados en la tienda). Para una selección más amplia, si ha habilitado la compatibilidad con tiendas de terceros en Edge, tiene acceso a todas las extensiones en Chrome Web Store. Aquí hay mucho, incluidas herramientas que agregan soporte enfocado para marcos de JavaScript específicos o ayudan con la depuración. Estos incluyen React de Facebook, el gRPC de código abierto, herramientas para ayudar a trabajar con las API GraphQL y soporte para linters como webhint.

La especificación del complemento para desarrolladores de Chromium es pública y cualquiera puede crear y publicar sus propias herramientas de desarrollo, ya sea internamente o para que las utilice todo el mundo. Como los complementos de Edge comparten un formato común con otros navegadores Chromium, el mismo complemento se puede entregar a través de otras tiendas de navegadores, lo que simplifica el desarrollo de herramientas.

Agregar una extensión a las herramientas de desarrollo es como agregar una al navegador. Navega a una tienda, haz clic en la herramienta que deseas agregar y deja que se descargue e instale. Se instalará en el navegador y es posible que desee ocultar el icono de la extensión en el menú del navegador antes de abrir las herramientas de desarrollador para ver una nueva pestaña. La ejecución de webhint en un sitio muestra un conjunto de métricas clave que le brindan sugerencias para funciones importantes como la accesibilidad o para la compatibilidad con funciones de PWA.

Es bueno ver que la personalización finalmente forma parte de las herramientas de Edge. Todos usamos diferentes cadenas de herramientas, y brindarle lo que necesita para respaldar las tecnologías que está utilizando es un enfoque muy amigable para los desarrolladores. Cuando Microsoft anunció el cambio a Chromium para su navegador, indicó que una de sus razones era brindar a los desarrolladores las características que necesitan para crear las aplicaciones que desean. Eso podría haber significado solo mejorar la compatibilidad del navegador con HTML5, CSS y JavaScript, por lo que llevar la gama completa de herramientas de desarrollo de Chromium a Edge, en todos sus sistemas operativos compatibles, es un movimiento bienvenido.

Cambios de Microsoft en la experiencia de desarrollador de Chromium

Es importante recordar que Microsoft sigue siendo un socio relativamente menor de Google en el desarrollo de Chromium. Aun así, ha logrado hacer una cantidad considerable de contribuciones desde que se unió al proyecto, incluida la adición de soporte para funciones de accesibilidad para que las herramientas de desarrollo estén disponibles para la comunidad más amplia posible. Con alrededor de 170 cambios que agregan soporte para herramientas como lectores de pantalla, hay muchas cosas que me gustan aquí, ya que las herramientas de desarrollo accesibles conducirán al desarrollo de aplicaciones y servicios web accesibles.

Otras características nuevas están actualmente ocultas detrás de las banderas experimentales en la configuración de Edge, incluida la compatibilidad con idiomas adicionales. Si habilita esta función y está utilizando uno de los 10 idiomas admitidos, la localización de las herramientas de desarrollador coincidirá con la localización de su navegador.