Novedades de DevTools (Microsoft Edge 88)

En las secciones siguientes se enumeran los anuncios del equipo Microsoft Edge DevTools. Para probar las nuevas características de DevTools, las extensiones de código de Visual Studio y mucho más, revise los anuncios. Para mantenerte al día con las características más recientes de las herramientas para desarrolladores, descarga los canales de Microsoft Edge Preview y sigue el equipo de Microsoft Edge DevTools en Twitter.

Microsoft Edge y el controlador de Microsoft Edge ahora están disponibles en Linux

Microsoft Edge Dev ahora es compatible con las distribuciones Ubuntu, Debian, Fedora y openSUSE. Descargue e instale el .deb de Microsoft Edge Dev o el paquete de .rpm directamente desde el sitio de Microsoft Edge Insider o use las herramientas de administración de paquetes estándar de su distribución de Linux.

Si está usando un entorno Linux en sus soluciones de integración y entrega continuas (CI/CD), el controlador de Microsoft Edge también está disponible en Linux. Para empezar a automatizar Microsoft Edge Dev con el controlador de Microsoft Edge, navegue a la página de Descargas del controlador de Microsoft Edge. Para obtener ayuda con la automatización de Microsoft Edge Dev junto con el controlador de Microsoft Edge, navegue a Usar Webdriver (Chromium) para la automatización de prueba.

DevTools en Microsoft Edge en Linux

Sugerencias de webhint y de plataforma mejoradas en la herramienta Problemas

Una herramienta de código abierto, webhint, proporciona comentarios en tiempo real para sitios web y páginas web locales. A partir de la versión 85 de Microsoft Edge, revise los comentarios de webhint en la herramienta Problemas. Los problemas que aparecen en la herramienta Problemas ahora son más fáciles de revisar con la adición de las siguientes categorías.

Ahora puede filtrar problemas de terceros mediante una nueva casilla. La funcionalidad de filtro le ayuda a ocultar problemas relacionados con el código de bibliotecas de terceros u otros orígenes.

Para ayudarle a revisar los problemas que revela webhint, la herramienta Problemas ahora muestra la siguiente información.

  • Fragmentos de código mejorados.
  • Vínculos a otros paneles relevantes.
  • Vínculos a documentación para ayudarle a solucionar problemas de su sitio web.

Herramienta Problemas

Las Capas compuestas ahora se encuentran en la vista 3D

Ahora puede visualizar el contenido de las Capas junto con los valores de índice z y el modelo de objeto de documento (DOM). Esta característica le ayuda a depurar sin cambiar entre la vista 3D y las herramientas de Capas con frecuencia. Para obtener una experiencia de depuración visual completa, ahora se combinan la vista 3D y las Capas compuestas.

Panel Capas compuestas

Definiciones de variables CSS en el panel Estilos

En el panel Estilos, las variables CSS ahora se vinculan directamente a cada definición. Elija la variable para ver o cambiar fácilmente la definición de la variable CSS. En el ejemplo, DevTools muestra los atributos CSS para el body elemento. Para mostrar la definición de variable de la variable CSS --theme-body-background, complete las siguientes acciones.

  1. En el panel Estilos, elija var(--theme-body-background).
  2. El panel Estilos ahora muestra la definición de la variable CSS --theme-body-background.

Mejoras en la depuración de trabajos de servicio

Las siguientes características nuevas de las herramientas Redes, Aplicaciones y Fuentes le ayudan a crear su PWA. Use las siguientes características cuando tenga dificultades para depurar el trabajo del servicio.

El enrutamiento de solicitudes muestra los eventos startup y fetch en función de las solicitudes de red que se ejecutan a través de los trabajos de servicio. Se obtiene acceso a las escalas de tiempo desde la herramienta Aplicación o Red. Las escalas de tiempo ayudan cuando tiene problemas con los trabajos de servicio y desea ver si hay algún problema con el evento startup o fetch.

Herramienta Aplicación

Vea toda la información de enrutamiento de solicitud de trabajo de servicio con el nuevo vínculo Solicitudes de red. Para mostrar contexto adicional al depurar el trabajo de servicio, complete las siguientes acciones.

  1. Vaya a Aplicación > Trabajos de servicio.

  2. Elija Solicitudes de red.

    Abrir la herramienta Red desde el panel Trabajo de servicios

  3. La herramienta Red se abre en el cajón y muestra todas las solicitudes de red relacionadas con los trabajos de servicio. Las solicitudes de red se filtran mediante is:service-worker-intercepted.

    Herramienta Red en el cajón

  4. Para devolver la herramienta Red al panel superior, cierre el Cajón.

    Cerrar el cajón para devolver la herramienta Red

Herramienta Red

Depure las solicitudes de red que se ejecutan a través de los trabajos de servicio. También puede abrir solicitudes de red desde la herramienta Aplicación. Para cada solicitud, DevTools muestra la siguiente información en el panel Intervalos.

  • El inicio de una solicitud y la duración del arranque.
  • Cambios en el registro de trabajos de servicio.
  • El tiempo de ejecución de un controlador de evento fetch.
  • El tiempo de ejecución de todos los eventos fetch para cargar un cliente.

Panel Intervalos

Herramienta Orígenes

En versiones anteriores de Microsoft Edge, el nivel de profundidad en la pila de llamadas estaba limitado al código de JavaScript en el trabajo de servicio. En Microsoft Edge 88, la pila de llamadas ahora muestra el iniciador de solicitudes que se ejecutan a través del trabajo de servicio.

Para buscar el iniciador de la solicitud, use la pila de llamadas de su código JavaScript en el trabajo de servicio. La pila de llamadas de las siguientes figuras comienza con el código de JavaScript en el trabajo de servicio y muestra una referencia a la solicitud original de la página web como (index):157. En la segunda figura, se elige la referencia y se abre el iniciador que realizó la solicitud. El iniciador de la segunda figura es la página web.

Copiar el valor de la propiedad de una solicitud de red

En la herramienta Red, copie el valor de la propiedad de una solicitud de red con la nueva opción Copiar valor. El valor de la propiedad se copia como un valor JSON descodificado. En versiones anteriores de Microsoft Edge, tenía que copiar un valor con una de las siguientes acciones.

  • Resalte todo el texto y cópielo.
  • Almacene el valor como variable global, según sea el caso, y cópielo desde la Consola de DevTools.

Para copiar el valor de la propiedad en el portapapeles, desplácese hasta Copiar JSON de respuesta con formato en el portapapeles. Para revisar el historial de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1132084.

Personalizar métodos abreviados de teclado de varios clics

A partir de Microsoft Edge versión 87, puede personalizar los métodos abreviados de teclado para cualquier acción en DevTools. En Microsoft Edge versión 88, ahora puede crear métodos abreviados de teclado de varios clics. Para establecer un método abreviado para una acción en DevTools, vaya a Configuración > Experimentos y elija la casilla situada junto a Habilitar el editor de métodos abreviados de teclado. Para obtener más información sobre la personalización y la edición de accesos directos, vaya a Habilitar la característica experimental del editor de método abreviado de teclado.

Por ejemplo, el resaltado rojo muestra un método abreviado de teclado de varios clics personalizado para la acción Iniciar grabación de eventos. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de origen abierto Chromium, navegue hasta el Problema N.°174309.

Métodos abreviados de teclado de presión simultánea

DevTools ahora coincide con el idioma del explorador

En Microsoft Edge versión 87, si activaba la opción Coincidir con el idioma del explorador en la Configuración de DevTools, DevTools no coincidía con el idioma del explorador. En la versión 88 de Microsoft Edge, DevTools coincide con el idioma del explorador si se activa la opción Coincidir con el idioma del explorador. Para obtener más información sobre la opción de DevTools Coincidir con el idioma del explorador, vaya a Cambiar la configuración de idioma de DevTools.

Opción de DevTools Coincidir con el idioma del explorador en japonés

Anuncios del proyecto de Chromium

En las siguientes secciones se anuncian características adicionales disponibles en Microsoft Edge que se han contribuido al proyecto de cromo de código abierto.

Nuevas herramientas de visualización de ángulos CSS

DevTools ahora es más compatible con la depuración de ángulos de CSS. Cuando se aplica un ángulo CSS a un elemento HTML de la página, se muestra un icono de reloj junto al ángulo en la herramienta Estilos. Para activar o desactivar la superposición de reloj, elija el icono de reloj. Para cambiar el ángulo, seleccione cualquier lugar del reloj o arrastre la aguja. Para cambiar el valor de ángulo, también puede usar los métodos abreviados de teclado y el mouse. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1126178 y 1138633.

Para el ejemplo, se usa el siguiente ángulo de CSS.

background: linear-gradient(100deg, lightblue, pink);

Ángulo CSS

Simular tamaño de la cuota de almacenamiento en el panel Almacenamiento

Ahora puede invalidar el tamaño de la cuota de almacenamiento en el panel Almacenamiento. Esta característica le permite simular diferentes dispositivos y probar el comportamiento de su sitio web o aplicación en escenarios de disponibilidad de disco baja. Para simular la cuota de almacenamiento, complete las siguientes acciones.

  1. Vaya a Aplicación > Almacenamiento.
  2. Active la casilla Simular cuota de almacenamiento personalizada.
  3. Escriba un número válido.

Para obtener más información sobre cómo emular dispositivos móviles y otras características de DevTools, vaya a Emular dispositivos móviles en Microsoft Edge DevTools . Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 945786 y 1146985.

Simular tamaño de la cuota de almacenamiento

Notificar errores de CORS en la herramienta Red

Para probar esta característica, navegue a Demo de error de CORS. Abra la herramienta Red, actualice la página y observe la solicitud de red de CORS errónea. En la columna de estado se muestra el Error de CORS. Al desplazar el puntero sobre el error, la información sobre herramientas muestra ahora el código de error. En Microsoft Edge versión 87 y anteriores, DevTools solo mostraba el estado (erróneo) genérico para los errores de CORS. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1141824.

Errores de CORS

Actualización de la vista de detalles del marco

Información de aislamiento entre orígenes en la vista detalles del Marco

El estado aislado entre orígenes se muestra ahora en la sección Seguridad y aislamiento. La nueva sección Disponibilidad de API muestra la disponibilidad de SharedArrayBuffers (SAB) y si los búferes se pueden compartir mediante postMessage(). Se muestra una advertencia de desuso si SAB y postMessage() están disponibles en este momento, pero el contexto no está aislado entre orígenes. Para obtener más información sobre el aislamiento entre orígenes y por qué es necesario para características como SharedArrayBuffers, vaya a WindowOrWorkerGlobalScope.crossOriginIsolated. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1139899.

Información entre orígenes

Nueva información de trabajos web en la vista detalles del Marco

DevTools ahora organiza los trabajos web en el marco principal correspondiente. Por ejemplo, si el marco someName crea worker.js, entonces worker.js aparecerá en someName en la lista Marcos. Para ver los detalles del trabajo web, complete las siguientes acciones.

  1. Abra la herramienta Aplicación.
  2. Expanda un marco que contenga los trabajos web.
  3. Expanda el árbol de Trabajos.
  4. Elija un trabajo.

Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1122507 y 1051466.

Información de los trabajos web

Mostrar detalles del marco de apertura para las ventanas abiertas

DevTools ahora organiza las ventanas abiertas en el Marco principal correspondiente. Por ejemplo, si el marco top abre un Window para https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium, entonces el Window aparece en top en la lista Marcos.

Para mostrar el marco responsable de abrir otra ventana en la herramienta Elementos, complete las siguientes acciones.

  1. Abra el árbol Marcos.
  2. Expanda Ventanas abiertas y elija el Window correspondiente al marco principal que desea saber.
  3. Elija el vínculo Marco de apertura.

Se muestran los detalles sobre el marco que causaba la apertura de otro Window. Para mostrar el abridor en la herramienta Elementos, complete las siguientes acciones.

  1. Abra el árbol Marcos.
  2. Elija una ventana abierta para abrir los detalles de Window.
  3. Elija el vínculo Marco de apertura.

Para revisar el historial de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1107766.

Detalles del marco abierto

Copiar el seguimiento de la pila para el iniciador de red

Para copiar el seguimiento de la pila en el portapapeles, complete las siguientes acciones.

  1. Abra el menú contextual (haga clic con el botón derecho).
  2. Elija Copiar > Copiar seguimiento de la pila.

Para revisar el historial de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1139615.

Copiar seguimiento de la pila

Vista previa de valor de variable Wasm en mouseover

Use esta característica para revisar el valor de una variable webassembly (Wasm) cuando se haya pausado el código. Para mostrar el valor actual de una variable, desplace el puntero sobre una variable. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1058836 y 1071432.

Vista previa de variable Wasm en mouseover

Unidades de medida coherentes para tamaños de archivos y memoria

DevTools ahora usa kB de forma consistente para mostrar los tamaños de los archivos y de la memoria. Anteriormente, DevTools combinaba kB y KiB.

  • kB o kilobytes (10^3 o 1000bytes)
  • KiB o kibibytes (2^10 o 1024bytes)

Por ejemplo, la herramienta Red anteriormente usaba kB en las etiquetas, pero usaba KiB en los cálculos. Sus comentarios mostraron que esta inconstancia ocasionó confusión. Para revisar el historial de esta característica en el proyecto de origen abierto Chromium, navegue hasta el problema 1035309.

Descargar los canales de vista previa de Microsoft Edge

Si está en Windows, Linux o macOS, considere la posibilidad de usar los canales de vista previa de Microsoft Edge como explorador de desarrollo predeterminado. Los canales de vista previa proporcionan acceso a las características más recientes de DevTools.

Ponerse en contacto con el equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono para Enviar comentarios en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está creada por Jecelyn Yeen (Promotor de desarrollo, Chrome DevTools).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.