Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Estas son las características más recientes de DevTools de la versión estable de Microsoft Edge.
Los subrayados ondulados resaltan problemas de código y mejoras en la herramienta Elementos
En la mayoría de los IDE modernos, los subrayados ondulados debajo del texto indican errores de sintaxis. En Microsoft Edge versión 91 o posterior, los subrayados ondulados se muestran bajo HTML en la vista DOM de la herramienta Elementos . Los subrayados ondulados indican problemas de código y sugerencias relacionadas con la accesibilidad, la compatibilidad, el rendimiento, etc.
Para abrir la herramienta Problemas y obtener más información sobre el problema y cómo corregirlo:
Mantenga presionada la tecla Mayús y, a continuación, haga clic en un subrayado ondulado.
O bien, haga clic con el botón derecho en un subrayado ondulado y, a continuación, seleccione Mostrar en problemas.
Seleccionar el error subrayado en la herramienta Elementos :
Mostrar detalles del error en la herramienta Problemas :
Vea también:
Aprenda más sobre DevTools con la información sobre herramientas informativas
La función Información de herramientas de DevTools le ayuda a obtener información sobre todo el conjunto diverso de herramientas y paneles. Pase el ratón por encima de cada región descrita de DevTools para aprender a usar la herramienta. Para activar la información sobre herramientas, siga uno de estos procedimientos:
- Seleccione Personalizar y controlar DevTools (
...) >Ayuda>para alternar la información sobre herramientas de DevTools. - Presione Ctrl+Mayús+H (Windows, Linux) o Comando+Mayús+H (macOS).
- Abra el menú Comandos y escriba información sobre herramientas.
Después, mantenga el puntero sobre cada región de DevTools:
Para desactivar Información sobre herramientas, presione la tecla Esc.
Actualización: esta característica se ha publicado y ya no es experimental.
Nota: A partir de mayo de 2022, la información sobre herramientas no se admite desde la Barra de Actividades.
Escala de tiempo de actualización del trabajo de servicio
En Microsoft Edge versión 91 o posterior, si es un desarrollador de trabajo de servicio o aplicación web progresiva, muestre el ciclo de vida de actualización de los trabajos de servicio como escala de tiempo en la herramienta Aplicación . Esta característica le ayuda a comprender el tiempo que el trabajo de servicio dedica en cada una de las siguientes etapas:
- Instalar
- Wait
- Activate
Para obtener actualizaciones en tiempo real sobre esta característica en el Chromium proyecto de código abierto, consulte Problema 1066604.
Vea también:
- Actualización de su trabajo de servicio en Uso de trabajos de servicio en MDN.
- Trabajos de servicio en Depurar una aplicación web progresiva (PWA).
Las Web Apps progresivas ya no muestran advertencias para iconos no cuadrados
En la versión 90 de Microsoft Edge o anteriores, si el manifiesto de la aplicación web de PWA incluía un icono no cuadrado, se mostraba una advertencia en la sección Errores y advertencias por cada icono no cuadrado. En Microsoft Edge versión 91 o posterior, la sección Manifiesto de la herramienta Aplicación no muestra advertencias si proporciona al menos un icono cuadrado. Si no proporciona ningún icono cuadrado, aparece el siguiente mensaje de advertencia:
Most operating systems require square icons. Please include at least one square icon in the array.
En Microsoft Edge versión 90 o anteriores, se muestra un error para cada icono que no es cuadrado:
En Microsoft Edge versión 91 o posterior, no se muestra ningún error cuando proporciona al menos un icono cuadrado:
Para ver los errores y advertencias en el manifiesto de la aplicación web, seleccione la herramienta >Aplicación Manifiesto de la sección >Aplicación. Los errores y advertencias se enumeran bajo el encabezado Errores y advertencias .
Para obtener actualizaciones en tiempo real sobre esta característica en el Chromium proyecto de código abierto, consulte Problema 1185945.
Vea también:
- El manifiesto de la aplicación web en Hacer que las PWA se puedan instalar en MDN > Referencias > Guías de aplicaciones > web progresivas.
- Manifiestos de aplicación web en Referencias de MDN > .
- PWABuilder: Image Generator: crea iconos de aplicaciones para varias plataformas, que se incluirán en el manifiesto de la aplicación web.
DevTools localizado ahora es compatible con los exploradores basados en Chromium
A partir de la versión 81 de Microsoft Edge, la interfaz de usuario de Microsoft Edge DevTools se muestra en su propio idioma. Muchos desarrolladores usan herramientas de desarrollo como StackOverflow y Visual Studio Code en su lenguaje nativo. Para proporcionar una flexibilidad similar en el lenguaje de la interfaz de usuario, el equipo de desarrollo de Microsoft Edge DevTools, el equipo de desarrollo de Chrome y el equipo de Google Lighthouse colaboraron para proporcionar la misma experiencia en todos los exploradores basados en Chromium.
Consulte Cambiar la configuración de idioma de DevTools.
Para obtener más información sobre la colaboración en esta característica en el Chromium proyecto de código abierto, consulte el problema 1136655.
Usar el teclado para navegar a las variables CSS
A partir de la versión 88 de Microsoft Edge, el panel Estilos muestra variables CSS y proporciona un vínculo directamente a la definición de cada variable. En Microsoft Edge versión 91 o posterior, puede usar las teclas de dirección para navegar fácilmente a las variables CSS. Para abrir la definición en el panel Estilos , desplace el puntero sobre una variable y presione Entrar:
Para obtener actualizaciones en tiempo real sobre esta característica en el proyecto de código abierto Chromium, consulte Problema 1187735.
Vea también:
Los problemas se ordenan automáticamente por gravedad
La herramienta Problemas muestra recomendaciones para mejorar su sitio web, como accesibilidad, rendimiento, seguridad, etc. En función de los comentarios de los usuarios, los problemas ahora se ordenan automáticamente por gravedad. En cada categoría de comentarios, aparece primero cada problema marcado como Error , seguido de cada problema marcado como Advertencia y, a continuación, cada problema marcado como Sugerencia:
Vea también:
Herramientas de desarrollo de Microsoft Edge para Visual Studio Code versión 1.1.7
Las Herramientas de Microsoft Edge para Visual Studio Code versión 1.1.7 de extensión proporcionan las DevTools de Microsoft Edge versión 88. Esta extensión ahora admite dispositivos ARM y ya no depende de la extensión Depurador para Microsoft Edge.
La versión 1.1.7 incluye las siguientes correcciones de errores y mejoras:
Se actualizó la confiabilidad del cierre de destino.
Se ha actualizado el panel lateral para que se actualice automáticamente al depurar objetivos creados o destruidos.
Se ha agregado un nuevo menú contextual que proporciona un acceso más rápido a la configuración de la extensión y al registro de cambios más reciente.
Se actualizó y simplificó la publicación de la documentación de extensión, incluidas las características más recientes.
Para actualizar manualmente a la versión 1.1.7, consulte Actualizar una extensión manualmente. Puede archivar problemas y contribuir a la extensión en el repositorio de GitHub vscode-edge-devtools.
Vea también:
Anuncios del proyecto de Chromium
En las secciones siguientes se anuncian características adicionales disponibles en Microsoft Edge que han contribuido al proyecto de código abierto Chromium.
Visualizar CSS scroll-snap
En la herramienta Elementos , ahora puede alternar la scroll-snap insignia para inspeccionar la alineación de desplazamiento y ajuste CSS. Cuando se le ha scroll-snap-type aplicado un elemento HTML de la página web, se muestra un scroll-snap distintivo junto a él en la herramienta Elementos . Haz clic en la scroll-snap insignia para alternar la visualización de una superposición de ajuste de desplazamiento en la página web.
Para ver una página web de ejemplo, consulte Demostración de acoplamiento de desplazamiento. En el ejemplo, aparecen puntos en los bordes de ajuste. El puerto de desplazamiento tiene un contorno sólido, mientras que los elementos de ajuste tienen contornos discontinuos. El relleno del desplazamiento se rellena en verde, mientras que el margen del desplazamiento se rellena en naranja:
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el problema 862450.
Vea también:
Nueva herramienta Inspector de memoria
Use la nueva herramienta Inspector de memoria para inspeccionar una ArrayBuffer memoria JavaScript y Wasm:
Vea:
- Inspección de un arrayBuffer de JavaScript con la herramienta Inspector de memoria
- Usar el panel Depurador para depurar código JavaScript
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1166577.
Nuevo panel de configuración de distintivo en la herramienta Elementos
Ahora, use la configuración de distintivo de la herramienta Elementos para activar (o desactivar) distintivos individuales. Use esta característica para personalizar y centrarse en los distintivos importantes mientras inspecciona páginas web.
Haga clic con el botón derecho en un elemento y, a continuación, haga clic en Configuración de distintivos. El panel de configuración del distintivo se abre en la parte superior de la herramienta Elementos :
Para mostrar (u ocultar) los distintivos, active (o desactive) la casilla situada junto al nombre del distintivo.
Vea también:
Vista previa de imagen mejorada con información de relación de aspecto
En la herramienta Elementos , las vistas previas de imágenes se han mejorado para mostrar más información, incluidos los siguientes detalles:
- Tamaño representado
- Relación de aspecto renderizada
- Tamaño intrínseco
- Relación de aspecto intrínseca
- Tamaño de archivos
Esta información le ayuda a comprender mejor las imágenes y a aplicar la optimización. La información de relación de aspecto de la imagen también está disponible en la herramienta Red , al hacer clic en un recurso de página que es una imagen:
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, consulte Problemas 1149832 y 1170656.
Vea también:
- Inspección, edición y depuración de HTML y CSS con la herramienta Elementos
- Inspeccionar actividad de red
Nuevas opciones para configurar codificaciones de contenido en la herramienta Condiciones de red
En la herramienta Red , haga clic en el nuevo botón Más condiciones de red... junto al menú desplegable Limitación para abrir la herramienta Condiciones de red . Para probar si las respuestas del servidor están codificadas correctamente para exploradores que no admiten gzip, brotli u otros futuros Content-Encoding:
Abra la herramienta Condiciones de red .
Vaya a Codificaciones de contenido aceptadas.
Desactiva la casilla junto
Content-Encodingal contenido que quieras probar.
Vea también:
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1162042.
Mejoras del panel Estilos
Nuevo acceso directo para mostrar el valor calculado en el panel Estilos
Ahora, para mostrar el valor CSS calculado en la pestaña Estilos de la herramienta Elementos :
Haga clic con el botón derecho en una propiedad CSS y, a continuación, seleccione Ver valor calculado:
Vea también:
- Ver solo el CSS que se aplica realmente a un elemento en la referencia de características de CSS.
- Ver el panel de la barra lateral calculada en el panel Estilos en Novedades de DevTools (Microsoft Edge 87).
- Explore todos los estilos calculados en Navegar por DevTools con tecnología de asistencia.
Para ver el historial de esta característica en el proyecto Chromium de código abierto, consulte el problema 1076198.
Compatibilidad con la palabra clave de color de énfasis
La interfaz de usuario de autocompletar del panel Estilos ahora detecta la accent-color palabra clave CSS, que permite especificar el color de énfasis de los controles de interfaz de usuario generados por el elemento. Entre los ejemplos de controles de interfaz de usuario generados por un elemento se incluyen las casillas de verificación o los botones de radio.
Para obtener más información sobre el estado de la implementación de Chromium, consulte Característica: propiedad CSS de color de énfasis. Para activar esta característica, vaya a edge://flags#enable-experimental-web-platform-features la casilla de verificación y selecciónela en Habilitado.
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1092093.
Vea también:
Mostrar detalles sobre las entidades bloqueadas en la vista Detalles del marco
La Directiva de permisos es una API de plataforma web que proporciona a un sitio web la capacidad de permitir o bloquear el uso de características del explorador en un marco individual o en un iframe que inserta.
Para mostrar los detalles por qué se bloquea una característica:
- Vaya a una página web que inserte elementos entre orígenes
iframe. - Abra la herramienta Aplicación .
- En Marcos, seleccione el archivo de origen
iframecruzado . - Para revisar la lista de funciones que están deshabilitadas para este
iframe, desplácese a la secciónFunciones deshabilitadas de la directiva > de permisos. - Haz clic en Mostrar detalles.
- Haga clic en el icono junto a cada directiva para ir a la solicitud de
iframered que bloqueó la característica.
Vea también:
Para ver el historial de esta característica en el proyecto Chromium de código abierto, consulte el problema 1158827.
Filtrar experimentos en la configuración Experimentos
Encuentre experimentos más rápidamente con el nuevo filtro de experimentos. Por ejemplo, para activar nuevos experimentos para problemas de código:
En DevTools, seleccione Configuración (
) >Experimentos.En el cuadro de texto Filtro , empiece a escribir problemas:
Vea también:
Nueva columna Encabezado de variación en el panel de almacenamiento de caché
En el panel Almacenamiento en caché de la herramienta Aplicación, utilice la nueva Vary Header columna para mostrar los valores del encabezado de Vary respuesta HTTP:
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1186049.
Vea también:
- Variar en el Protocolo de transferencia de hipertexto (HTTP/1.1): semántica y contenido.
- Ver datos de caché
Mejoras en la herramienta Orígenes
Compatibilidad con nuevas características de JavaScript
DevTools ahora admite las nuevas comprobaciones de marca privada , #foo in obj también conocidas como Característica del lenguaje JavaScript. La característica de comprobaciones de marca privada extiende el in operador para admitir campos de clase privados (#) en un objeto específico. Pruébelo en las herramientas Consola y Orígenes .
Para inspeccionar los campos privados:
- En la herramienta Orígenes , vaya al panel del depurador .
- Expande la sección Ámbito :
Vea también:
-
Comprobaciones de marca privada también conocidas
#foo in objcomo en v8.dev. - en operador at MDN.
- Campos de clase privada en v8.dev.
Para obtener el historial de esta característica en el proyecto de código abierto de Chromium, consulte el problema 11374.
Compatibilidad mejorada con la depuración de puntos de interrupción
En la versión 90 de Microsoft Edge o anteriores, DevTools solo establece puntos de interrupción en un único paquete. En Microsoft Edge versión 91 o posterior, al depurar un componente compartido, DevTools establece correctamente los puntos de interrupción en varios paquetes.
Los paquetes de JavaScript modernos, como Webpack y Rollup , admiten la división de código en paquetes. Consulte División de código.
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea los problemas 1142705, 979000 y 1180794.
Vea también:
Compatibilidad con la vista previa del desplazamiento con notación de corchetes
La herramienta Orígenes ahora admite la vista previa de activación en expresiones de miembro de JavaScript que usan la [] notación:
![Compatibilidad con la vista previa del desplazamiento con notación []](devtools-images/sources-page-pen.js-breakpoint-arr-i-a.png)
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1178305.
Vea también:
Esquema mejorado de archivos HTML
DevTools ahora tiene una mejor compatibilidad de esquema para .html los archivos. En la herramienta Orígenes , abra el .html archivo. Para activar (o desactivar) el esquema de código, presione Ctrl+Mayús+O en Windows/Linux o Comando+Mayús+O en macOS. Anteriormente, DevTools solo mostraba algunas de las funciones. En la siguiente figura, DevTools ahora enumera correctamente todas las funciones del esquema:
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, consulte Problemas 761019 y 1191465.
Vea también:
- Métodos abreviados de teclado de la herramienta Orígenes en Métodos abreviados de teclado
- Uso del panel Editor para ver o editar archivos en Fuente Información general sobre la herramienta
Seguimientos de pila de errores adecuados para la depuración de Wasm
En Microsoft Edge versión 90 o anteriores, DevTools solo mostraba referencias Wasm genéricas en los seguimientos de pila de errores. En Microsoft Edge versión 91 o posterior, DevTools resuelve solicitudes de funciones en línea y muestra la ubicación de origen en los seguimientos de la pila de errores para la depuración de Wasm. Para obtener más información sobre los seguimientos de la pila de errores en la consola, consulte error en la referencia de la API del objeto de consola.
En Microsoft Edge versión 91 o posterior, DevTools resuelve solicitudes de funciones en línea y muestra seguimientos de pila de errores adecuados para la depuración de Wasm.
En Microsoft Edge versión 90 y anteriores, la ubicación de origen no se muestra en los seguimientos de la pila de errores. Las ubicaciones de origen incluyen: dsquare. Seguimientos de pila de errores anteriores para la depuración de Wasm:
En Microsoft Edge versión 91 y posteriores, la ubicación de origen se muestra en los seguimientos de la pila de errores. Seguimientos de pila de errores adecuados para la depuración de Wasm:
Para revisar el historial de esta característica en el proyecto Chromium de código abierto, vea el asunto 1189161.
Nota:
Algunas partes de esta página son modificaciones que se basan en trabajo creado y compartido por Google y que se usan de acuerdo con los términos descritos en la Licencia internacional de Creative Commons Atribution 4.0. La página original se encuentra aquí y está escrita por Jecelyn Yeen.
Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.