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.
Anuncios del equipo de Microsoft Edge DevTools
Características de depuración de cuadrícula CSS
El equipo de Microsoft Edge DevTools está colaborando con el equipo de DevTools de Chrome y la comunidad de Chromium para agregar nuevas características de depuración de cuadrícula CSS a DevTools. Ahora puede mostrar los números de línea de cuadrícula, los espacios de cuadrícula y las líneas de cuadrícula extendidas como una superposición en la página. Además, pronto habrá más mejoras en las herramientas de red.
Actualización: esta característica se ha publicado y ya no es experimental.
Para probar el experimento con un ejemplo, vea Ejemplo de planificador de cuadrícula CSS.
Chromium problema #1047356
Vea también:
Editar y reproducir solicitudes con la consola de red
Ahora puede usar Editar y reproducir solicitudes en el registro de red mediante la consola de red. Abra el registro de red, haga clic con el botón derecho y, a continuación, seleccione Editar y reproducir:
La nueva herramienta Consola de red se abre en el panel Vista rápida , en la parte inferior de DevTools, y se rellena automáticamente con información para la solicitud HTTP. Para mostrar la respuesta que devuelve el servidor, edite la solicitud (si es necesario) y, a continuación, seleccione Enviar.
También puede utilizar la consola de red para crear y enviar solicitudes HTTP directamente desde DevTools.
Consejo: Para mostrar la consola de red en el panel principal (superior) en lugar de en el panel Vista rápida , consulte Mover herramientas entre paneles, a continuación.
Actualización: esta característica se ha publicado y ya no es experimental.
Chromium problema #1093687
Eventos respondWith del trabajo de servicio en la pestaña Intervalos
La pestaña Intervalos tiempo de la herramienta Red ahora incluye respondWith eventos de trabajo de servicio. El respondWith evento de trabajo de servicio muestra la duración desde el momento inmediatamente anterior al momento inmediatamente anterior a que el controlador de eventos de fetch trabajo de servicio comience a ejecutarse hasta el momento en que respondWith se liquida la promesa del fetch controlador.
Expanda Respuesta recibida para mostrar información adicional de la fetch respuesta como CacheStorageCacheName, serviceWorkerResponseSource, y ResponseTime.
Chromium problema #1066579
Vea también:
- Muestre la relación de tiempo de las solicitudes en la referencia de características dered.
- Muestra el desglose de tiempo de una solicitud en Referencia de características dered.
webhint en el panel Problemas
Actualización de julio de 2026: webhint se quitó en Microsoft Edge 151.
webhint es una herramienta de código abierto que proporciona información en tiempo real sobre la accesibilidad, la compatibilidad entre exploradores, la seguridad, el rendimiento, las PWA y otros problemas comunes de desarrollo web de los sitios web. Puede ver los comentarios de webhint en el panel Problemas .
Para habilitar el experimento, consulte Activar o desactivar un experimento y seleccione la casilla situada junto a Habilitar webhint. Abra el panel Problemas para mostrar comentarios de webhint.
Chromium problema #1070378
Vea también:
Mover herramientas entre paneles
Anteriormente, herramientas como Elementos y Red solo se podían abrir en el panel principal (superior) de DevTools. Del mismo modo, herramientas como Vista 3D y Problemas solo se podían abrir en el cajón (ahora panel Vista rápida ) en la parte inferior de DevTools. Ahora puede personalizar el diseño de DevTools moviendo las herramientas entre los paneles superior e inferior.
Actualización: esta característica se ha publicado y ya no es experimental.
Chromium problema #897944
Vea también:
- Acerca de las herramientas de la barra de actividades y Vista rápida en Información general de DevTools.
Se ha mejorado la información sobre herramientas del iniciador en el panel Red
En Microsoft Edge 83 y 84, la información sobre herramientas para la columna Iniciador, que muestra la causa de la solicitud de recurso, en el Registro de red se muestra con una barra de desplazamiento horizontal. Solo podía mostrar la pila de llamadas que inició la solicitud desplazándose horizontalmente en la información sobre herramientas.
A partir de Microsoft Edge 85, ahora puede mostrar la pila de llamadas del iniciador en la información sobre herramientas sin tener que desplazarse horizontalmente.
Chromium problema #1069404
Anuncios del proyecto de Chromium
En las secciones siguientes se anuncian características adicionales disponibles en Microsoft Edge 85 que han contribuido al proyecto código abierto Chromium.
Edición de estilos para marcos CSS-in-JS
El panel Estilos ahora es más compatible con la edición de estilos que se crearon con las API del Modelo de objetos CSS (CSSOM ). Muchos marcos y bibliotecas CSS-in-JS utilizan las API de CSSOM bajo el capó para construir estilos.
Ahora puedes editar los estilos que se agregaron en JavaScript usando la CSSStyleSheet interfaz, que es una nueva forma de crear y distribuir estilos reutilizables cuando se usa Shadow DOM. Consulte La interfaz en el CSSStyleSheetmodelo de objetos CSS (CSSOM).
Por ejemplo, los h1 estilos agregados con CSSStyleSheet (API CSSOM) no se podían editar anteriormente. Los estilos se pueden editar ahora en el panel Estilos .
Pruebe esta característica con un ejemplo que use CSS-in-JS. Consulte Edición de estilos para marcos CSS-in-JS.
Chromium problema #946975
Faro 6 en el panel Faro
El panel de Lighthouse ahora está ejecutando Lighthouse 6. Para obtener una lista completa de todos los cambios, consulte las notas de la versión v6.0.0.
Lighthouse 6.0 introduce tres nuevas métricas en el informe: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) y Total Block Time (TBT).
La fórmula de puntuación de rendimiento también se ha vuelto a ponderar para reflejar mejor la experiencia de carga del usuario.
Chromium problema #772558
Vea también:
Primera obsolescencia de pintura significativa
First Meaningful Paint (FMP) está en desuso en Lighthouse 6.0. FMP también se ha eliminado de la herramienta Rendimiento . Largest Contentful Paint es el reemplazo recomendado para FMP.
Chromium problema #1096008
Vea también:
- Primera pintura significativa (FMP) en el glosario de MDN.
- La pintura de contenido más grande (LCP) en el glosario de MDN.
- LargestContentfulPaint en MDN.
- Herramienta Faro
Compatibilidad con nuevas características de JavaScript
DevTools ahora es más compatible con algunas de las características más recientes del lenguaje JavaScript:
Sintaxis de encadenamiento opcional autocompletado. La finalización automática de propiedades en la Consola ahora admite sintaxis de encadenamiento opcional, por ejemplo,
name?.ahora funciona además dename.yname[.Resaltado de sintaxis para campos privados. Los campos de clase privada ahora están resaltados de sintaxis correctamente y se imprimen con sangría en el panel Orígenes .
Resaltado de sintaxis para el operador de fusión Nullish. Ahora, DevTools imprime correctamente el operador de fusión de valores nulos en el panel Orígenes .
Chromium problemas #1073903, #1083214, #1083797
Vea también:
Advertencias de nuevos accesos directos de aplicación en el panel Manifiesto
En la herramienta Aplicación , los accesos directos de aplicación ayudan a los usuarios a iniciar rápidamente tareas comunes o recomendadas dentro de una aplicación web.
En la herramienta Aplicación , el panel Manifiesto ahora muestra advertencias para las siguientes condiciones:
- Cuando los iconos de acceso directo de la aplicación son más pequeños que 96 x 96 píxeles.
- Cuando los iconos de acceso directo de la aplicación y los iconos de manifiesto no son cuadrados (ya que se omiten los iconos).
Chromium problema #955497
Vea también:
Visualización coherente del panel Calculado
El panel Calculado de la herramienta Elementos ahora se muestra de forma coherente como un panel en todos los tamaños de ventanilla. Anteriormente, el panel Calculado se combinaba con el panel Estilos cuando DevTools era estrecho.
Chromium problema #1073899
Vea también:
- Ver solo el CSS que se aplica realmente a un elemento en la referencia de características de CSS
Desplazamientos de código de bytes para archivos WebAssembly
DevTools ahora usa desplazamientos de código de bytes para mostrar los números de línea del desensamblado Wasm. Los números de línea dejan más claro que está viendo datos binarios y es más coherente con la forma en que el tiempo de ejecución de Wasm hace referencia a las ubicaciones.Chromium problema #1071432
Vea también:
Copiar y cortar por línea en el panel Fuentes
Al realizar la copia o el corte sin seleccionar en el editor del panel Orígenes, DevTools copia o corta la línea actual de contenido.
Chromium problema #800028
Actualizaciones de la configuración de la consola
Desagrupar mensajes de la misma consola
El botón de alternancia similar a grupo en la configuración de la consola ahora se aplica a los mensajes duplicados. Anteriormente, solo se aplicaba a mensajes similares.
Por ejemplo, anteriormente, DevTools no desagrupaba los mensajes aunque la helloopción "Agrupar" similar no estuviera activada. Ahora, los hello mensajes se desagrupan.
Pruebe esta característica con un ejemplo que envíe mensajes duplicados a la Consola.
Chromium problema #1082963
Vea también:
- Desactivar la agrupación de mensajes en la referencia de características de la consola
Persistente Configuración de solo contexto seleccionada
Ahora se conserva la configuración de solo contexto seleccionada en la configuración de la consola. Anteriormente, la configuración se restablecía cada vez que cerraba y volvía a abrir DevTools. El cambio hace que el comportamiento de la configuración sea coherente con otras opciones de configuración de la consola.
Chromium problema #1055875
Vea también:
- Filtrar mensajes de diferentes contextos de JavaScript - en Referencia de características de la consola
Actualizaciones del panel de rendimiento
Información de la caché de compilación de JavaScript en la herramienta Rendimiento
Ahora, la información de la caché de compilación de JavaScript se muestra siempre en el panel Resumen de la herramienta Rendimiento. Anteriormente, DevTools no mostraba nada relacionado con el almacenamiento en caché de código si el almacenamiento en caché de código no se producía.
Chromium problema #912581
Vea también:
Alineación de intervalos de navegación en el panel Rendimiento
Anteriormente, la herramienta Rendimiento mostraba las horas en las reglas en función de cuándo se iniciaba la grabación. El tiempo ha cambiado para las grabaciones en las que el usuario navega. DevTools ahora muestra los tiempos de regla en relación con la navegación, en lugar de cuando se inició la grabación.
Las horas de DOMContentLoadedlos eventos , First Paint, First Contentful Paint y Largest Contentful Paint se actualizan para que sean relativas al inicio de la navegación, lo que significa que el tiempo coincide con los intervalos informados por PerformanceObserver.
Problema de Chromium #974550
Vea también:
Nuevos iconos para puntos de interrupción, puntos de interrupción condicionales y puntos de registro
Actualización: A partir de 2022, los puntos de interrupción ahora se indican mediante un rectángulo azul, en lugar de un círculo rojo.
El panel Orígenes tiene nuevos diseños de puntos de interrupción, puntos de interrupción condicionales y puntos de registro. Los puntos de interrupción se representan con un círculo rojo, al igual que Visual Studio Code y Visual Studio. Los iconos se agregan para diferenciar los puntos de interrupción condicionales y los puntos de registro.
Chromium problema #1041830
Vea también:
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.