Novedades de DevTools (Microsoft Edge 90)

En las secciones siguientes se enumeran los anuncios del equipo DevTools de Microsoft Edge. Visite los anuncios para probar nuevas funciones de DevTools, extensiones de Microsoft Visual Studio Code y mucho más. Para estar al día sobre las últimas y mejores funciones de sus herramientas de desarrollador, descargue los canales de versiones preliminares de Microsoft Edge y siga al equipo de Microsoft Edge DevTools en Twitter.

Grupo de herramientas en modo Focalizado

El modo Focalizado es una interfaz experimental que permite agrupar distintas herramientas en función de sus propios escenarios de depuración. La nueva Barra de Actividad que se muestra a la izquierda incluye grupos de herramientas predefinidos, como Diseño y Depuración. Para personalizar cada grupo de herramientas, cierre las herramientas con el icono Cerrar (X) o agregue nuevas herramientas con el icono Más herramientas (+).

Para activar el experimento, vaya a Activar o desactivar un experimento y seleccione las casillas situadas junto Modo Focalizado e Información sobre herramientas de DevTools y Habilitar + menús de pestañas de botón para abrir más herramientas. Para obtener más información sobre esta característica o dejar un comentario con preguntas e ideas, vaya a DevTools: interfaz de usuario del Modo Focalizado.

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. Elija el icono Ayuda (?) situado en la parte inferior de la Barra de Actividades para alternar la información sobre herramientas de DevTools. Cuando haya información sobre herramientas disponible, pase el ratón por encima de cada región para aprender a usar la herramienta. Para activar el experimento, vaya a Activar o desactivar un experimento y seleccione las casillas situadas junto Modo Focalizado e Información sobre herramientas de DevTools y Habilitar + menús de pestañas de botón para abrir más herramientas. Para obtener más información sobre esta característica o dejar un comentario con preguntas e ideas, vaya a DevTools: interfaz de usuario del Modo Focalizado.

Personalizar accesos rápidos de teclado en Configuración

Ahora puede personalizar el acceso rápido de teclado para cualquier acción en DevTools. Para editar un acceso rápido de teclado, siga los siguientes pasos.

1. Abra DevTools y, a continuación, elija Configuración > Accesos rápidos.
2. Elija la acción que quiere personalizar.
3. Elija el icono Editar ().
4. Seleccione las claves con las que quiere enlazar la acción.
5. Elija el icono de marca de verificación ().

Para obtener más información acerca de la personalización y edición de métodos abreviados, vaya a Personalizar métodos abreviados de teclado en DevTools. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto Chromium, vaya al problema 174309.

Actualización 1.1.4 de la extensión de Microsoft Edge DevTools para Visual Studio Code

La versión de extensión 1.1.4 de las Herramientas de desarrollador de Microsoft Edge para Visual Studio Code para Microsoft Visual Studio Code ahora muestra un icono de favoritos al lado de cada instancia de DevTools. Los mensajes de consola de Microsoft Edge ahora se muestran en la Consola de DevTools, debajo de Salida de Microsoft Visual Studio Code. Microsoft Visual Studio Code actualiza las extensiones automáticamente. Para actualizar manualmente a la versión 1.1.4, vaya a Actualizar extensión manualmente. Puede archivar problemas y contribuir con la extensión en el repositorio de GitHub vscode-edge-devtools.

Mejora de la edición de CSS flexbox con un editor visual de flexbox y múltiples superposiciones

DevTools ahora tiene herramientas de depuración de CSS Flexbox. Si el estilo display: flex o display: inline-flex de CSS se aplica a un elemento HTML, se muestra un icono flex junto a ese elemento en la herramienta Elementos. Para mostrar (u ocultar) una superposición de flex en la página web, elija el icono flex. Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya a los problemas 1166710 y 1175699.

Mejoras de navegación con el teclado para solicitudes de red

Antes, no se podía expandir o contraer la cadena de solicitudes con las teclas de dirección del teclado en el panel Iniciador, a diferencia del DOM de la herramientaElementos. Cuando se selecciona una solicitud de red en la herramientaRed, el panel Iniciador muestra la cadena de solicitudes que inició la solicitud que está seleccionada en cada momento.

En la versión 90 de Microsoft Edge, se puede expandir o contraer la cadena de solicitudes mediante las teclas de dirección del teclado en el panel Iniciador. Ahora también se resalta la solicitud de red centrada en la cadena. Para obtener más información sobre los iniciadores de la herramienta Red, vaya a Mostrar iniciadores y dependencias. Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya a los problemas 1158276 and 1160637.

El filtrado en la Consola es más coherente

Mientras filtra con la Barra Lateral de la Consola, los filtros de la lista desplegable Niveles de registro no están disponibles. Antes, la lista desplegable Niveles de registro se resaltaba al mantener el ratón sobre ella, incluso cuando se seleccionaba un filtro de la barra lateral de la Consola. En la versión 90 de Microsoft Edge, la lista desplegable Niveles de registro ya no se resalta al mantener el ratón sobre ella mientras se elige un filtro de la barra lateral de consola. Para obtener más información sobre el filtrado en la Consola, vaya a Filtrar mensajes.

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.

La consola ahora evita los caracteres de comillas dobles

Antes, la Consola no generaba caracteres válidos de comillas dobles (") en cadenas de JavaScript. A partir de la versión 90 de Microsoft Edge, la Consola genera cadenas de JavaScript con caracteres de comillas dobles de escape ("). Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya al problema 1178530.

Emular la función multimedia de la gama de colores CSS

La consulta de medios gama de colores emula el intervalo aproximado de colores admitido por el explorador y el dispositivo que estás probando. La lista desplegable de debajo de Emular la gama de colores de la función multimedia CSS contiene espacios de colores que DevTools puede emular. Por ejemplo, para desencadenar una color-gamut: p3consulta de medios, elija gama de colores: p3 en la lista desplegable.

Para emular la función multimedia de gama de colores CSS, siga los siguientes pasos.

1. Abra el Menú de comandos.
2. Escriba Rendering.
3. Ejecute el comando Mostrar representación.
4. Vaya a Emular la gama de colores de la función multimedia CSS y elija una opción.

Para obtener más información sobre esta color-gamut función, vaya a Calidad de la calibración de colores: la función 'gama de colores'. Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya al problema 1073887.

Herramientas mejoradas de aplicaciones web progresivas

Advertencia de instalación de PWA en la Consola

La Consola ahora muestra un mensaje de advertencia más detallado sobre la instalación de aplicaciones web progresivas (PWA) con un vínculo a Mejorar la detección de compatibilidad sin conexión de Progressive Web App.

Advertencia de longitud de descripción de PWA en el panel Manifiesto

El panel Manifiesto ahora muestra un mensaje de advertencia si la descripción del manifiesto supera los 324 caracteres.

Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya a los problemas 965802, 1146450 y 1169689.

Nueva columna Espacio de direcciones remotas en la herramienta Red

La nueva columna Espacio de direcciones remotas muestra el espacio de direcciones IP de red de cada recurso de red. Para mostrar la nueva columna Espacio de direcciones remotas, siga los siguientes pasos.

1. Vaya a la herramienta Red.
2. En la tabla Solicitudes, mueva el ratón sobre la fila del encabezado y abra el menú contextual (hacer clic con el botón derecho). Para obtener información sobre cómo agregar o quitar columnas de la tabla Solicitudes, vaya a Agregar o quitar columnas.
3. Elija Espacio de direcciones remotas.

La tabla Solicitudes ahora muestra una nueva columna con un encabezado denominado Espacio de direcciones remotas. Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya al problema 1128885.

Mostrar características permitidas y no permitidas en la vista Detalles del marco

La vista Detalles del marco ahora muestra una lista de características de explorador que están permitidas y no permitidas controladas por la Directiva de permisos. La Directiva de permisos es una API de plataforma web que permite (o bloquea) a una página web el uso de características del explorador en un marco individual o en IFrames que inserta. Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya al problema 1158827.

Nueva columna SameParty en el panel de las Cookies

El panel de las Cookies de la herramienta Aplicación ahora se muestra el atributo SameParty para cada cookie. El atributo SameParty es un nuevo atributo booleano que permite indicar si una cookie está incluida en las solicitudes a los orígenes de los mismos Conjuntos de primeras partes. Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya al problema 1161427.

La propiedad fn.displayName de la herramienta Consola ya está en desuso

Antes, la propiedad fn.displayName permitía controlar los nombres de depuración de las funciones que se muestran enerror.stack y en los seguimientos de pila de DevTools. A partir de la versión 90 de Microsoft Edge, la propiedad fn.displayName ahora está en desuso y es reemplazada por la propiedad fn.name. Use el método estándar Object.defineProperty para definir la propiedad fn.name. Para obtener más información sobre fn.name, vaya a Function.name. Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya al problema 1177685.

Vista de árbol de accesibilidad completa en la herramienta Elementos

Este experimento proporciona una vista de árbol de accesibilidad completa en la herramienta Elementos. El panel Accesibilidad proporciona una vista de árbol de accesibilidad parcial, que muestra la cadena directamente anterior del nodo raíz al nodo inspeccionado. Después de activar este experimento y volver a cargar DevTools, elija uno de los siguientes botones para cambiar la visualización en la herramienta Elementos para todos los elementos de la página web.

• Para mostrar la vista de árbol de accesibilidad completa, elija la vista Cambiar a árbol de accesibilidad.
• Para mostrar la vista de árbol DOM, elija la vista Cambiar a árbol DOM.

Para activar el experimento, vaya a Activar o desactivar un experimento y seleccione la casilla situada junto a Habilitar la vista de árbol de accesibilidad completa en el panel Elementos. Para revisar el historial de esta característica en el proyecto de código abierto Chromium, vaya al problema 887173.

Descargar los canales de vista previa de Microsoft Edge

Si tiene Windows, Linux o macOS, considere la posibilidad de usar los canales de versión preliminar de Microsoft Edge como su explorador de desarrollo predeterminado. Los canales de versión preliminar proporcionan acceso a las características más recientes de DevTools.

Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.