Nota
L'accés a aquesta pàgina requereix autorització. Podeu provar d'iniciar la sessió o de canviar els directoris.
L'accés a aquesta pàgina requereix autorització. Podeu provar de canviar els directoris.
Estas son las características más recientes de DevTools de la versión estable de Microsoft Edge.
Vídeo: Microsoft Edge | Novedades de DevTools 95
Sincronizar los cambios en directo desde la herramienta Estilos en la extensión de Visual Studio Code
La extensión Microsoft Edge DevTools para Visual Studio Code ahora incluye un experimento denominado edición de reflejo de CSS. Con esta característica, puede usar la herramienta Estilos para ajustar el CSS y los cambios que aplique se agregarán automáticamente a los archivos de origen CSS en el editor de Visual Studio Code. Puede activar y desactivar esta funcionalidad.
Para obtener más información, consulte Actualizar archivos .css desde la pestaña Estilos (edición de reflejo CSS).
Para proporcionar comentarios, en la barra de actividades de Visual Studio Code, haga clic en Herramientas de Microsoft Edge y, a continuación, en la sección Edición de reflejo de CSS, haga clic en el vínculo Dejar comentarios aquí.
Todos los mensajes de error y advertencia de la Consola ahora tienen un icono de búsqueda web
El icono Buscar este mensaje en la Web ya está disponible para todos los errores y advertencias en la Consola. Anteriormente, este icono solo aparecía para algunos de los errores y advertencias comunes. Ahora se ha agregado el icono en los errores y advertencias restantes. Haga clic en el icono Buscar este mensaje en la Web para buscar en la Web con la cadena de error o advertencia correspondiente.
Para obtener más información, consulta Buscar errores de Consola en la web.
Vea también:
Acceso de teclado mejorado para definir sugerencias de cliente de User-Agent
A partir de Microsoft Edge versión 92, puede especificar User-Agent sugerencias de cliente. Puede especificar User-Agent sugerencias de cliente en cualquiera de estos dos lugares:
- Al definir la cadena de agente de usuario en la herramienta Condiciones de red.
- Al agregar un dispositivo personalizado para emularlo en Configuración.
En Microsoft Edge anterior a la versión 95, al agregar un dispositivo personalizado para emular desde la sección Dispositivos de Configuración, al seleccionar el botón de sugerencias de cliente del agente de usuario con el teclado se activaba el elemento de interfaz de usuario incorrecto. En lugar de expandir la sección de sugerencias de cliente del agente de usuario para que la rellene, seleccionó el botón Agregar . El dispositivo que estaba empezando a definir se agregó inmediatamente, mediante campos vacíos en la sección de sugerencias de cliente del agente de usuario .
En Microsoft Edge versión 95, se ha corregido este problema. Ahora, al seleccionar el botón de sugerencias de cliente del agente de usuario con el teclado, se expande un formulario en el que puede especificar sugerencias de cliente para el dispositivo personalizado.
Para obtener más información sobre User-Agent sugerencias de cliente, consulte Detectar Microsoft Edge desde su sitio web.
Para ver el historial de esta característica en el Chromium proyecto de código abierto, consulte Problema 1243827: Sugerencias de cliente de agente de usuario de accesibilidad de formularios.
Los filtros de consola ahora muestran mensajes agrupados si el filtro coincide con el título del grupo
Se puede usar console.group() para etiquetar un grupo de mensajes y proporcionar cierta organización para los mensajes de consola. En versiones anteriores de Microsoft Edge, había varios problemas al intentar filtrar mensajes agrupados en la consola. Al filtrar a una etiqueta de grupo, la consola no mostraba mensajes individuales dentro del grupo. Además, el filtrado no ocultaría las etiquetas de grupo, incluso si la etiqueta no coincidía con el filtro.
En Microsoft Edge versión 95 se han corregido estos problemas. Ahora, al filtrar a una etiqueta, se muestra la etiqueta del grupo y los mensajes individuales del grupo. Cuando el filtro no coincide con la etiqueta del grupo, todo el grupo está oculto.
Cuando la cadena de filtro coincide con una etiqueta de grupo, se muestran el grupo y sus miembros:
Cuando la cadena de filtro no coincide con una etiqueta de grupo, no se muestran ni el grupo ni sus miembros:
Vea también:
- enla Referencia de API de objeto de consola.
Para ver el historial de esta característica en el Chromium proyecto de código abierto, consulte Problema 363796: ☂ El filtro de consola oculta de forma inapropiada el contenido agrupado y no oculta los títulos de grupo.
Anuncios del proyecto de Chromium
Las siguientes son algunas de las características adicionales que están disponibles en Microsoft Edge versión 95 que contribuyeron al proyecto de código abierto Chromium.
Se ha mejorado la visualización de las propiedades.
DevTools mejora la visualización de las propiedades al:
- Poner siempre en negrita y ordenar primero las propiedades propias, en la Consola, en la herramienta Orígenes y en la pestaña Propiedades de la herramienta Elementos . (Una propiedad propia es una propiedad que se define directamente en el objeto).
- Aplanar la visualización de las propiedades en el panel Propiedades .
Por ejemplo, el fragmento siguiente crea un objeto linkde URL con dos propiedades propias: user y access, y actualiza el valor de una propiedad heredada, search:
const link = new URL('https://blogs.windows.com/msedgedev/');
link.user = { id: 1, name: 'Amelie Garner' };
link.access = 'admin';
link.search = `?access=${link.access}`;
Después de escribir el código anterior en la consola, intenta registrar link. Las propiedades propias ahora están en negrita y son las primeras en el orden de clasificación. Estos cambios facilitan la detección de propiedades personalizadas, especialmente para API web (como URL) que tienen muchas propiedades heredadas:
En el panel Propiedades de la herramienta Elementos , la lista de propiedades ahora se aplana para una mejor experiencia al depurar las propiedades DOM, especialmente para los componentes web:
Vea también:
Para revisar el historial de esta característica, consulte Chromium problemas 1076820 y 1119900.
Los fragmentos de código ahora se ordenan en el panel Orígenes.
En la pestaña Fragmentos de código de la herramienta Orígenes , anteriormente, los fragmentos de código no se ordenaban. Los fragmentos de código ahora se ordenan alfabéticamente:
Vea también:
- Ejecutar fragmentos de código de JavaScript en cualquier página web
- Chrome 85: novedades de DevTools : vídeo.
Para obtener el historial de esta característica, consulte Chromium problema: 1243976.
Interfaz de usuario mejorada para el menú de comandos de DevTools
El menú de comandos se ha mejorado para facilitar la búsqueda de un archivo. Al presionar Ctrl+P en Windows y Linux o Comando+P en macOS, el menú Comando ahora muestra los nombres de archivo en negrita, junto con un icono que indica el tipo de archivo:
Vea también:
Para obtener el historial de esta característica, consulte Chromium problema 1201997.
Nota:
La sección "Anuncios del proyecto Chromium" de esta página es una modificación basada en el trabajo creado y compartido por Google según las Políticas del sitio, y se utiliza de acuerdo con los términos descritos en la Licencia internacional Creative Commons Attribution 4.0. La página original de los anuncios del proyecto de Chromium es What's New in DevTools (Chrome 95), creado por Jecelyn Yeen.
Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.