Vídeos sobre el desarrollo web con Microsoft Edge
Descubra y obtenga información sobre las nuevas tecnologías y productos de desarrollo web de Microsoft Edge, como DevTools, LAS API y características de la plataforma web, Progressive Web Apps y WebView2.
Esta página contiene vínculos a vídeos breves, cada uno centrado en una sola característica e incluyendo una demostración.
Microsoft publica vídeos nuevos de forma periódica en el canal de YouTube de Microsoft Edge y también se enumeran a continuación.
Haga clic en una miniatura de la lista siguiente para ver el vídeo correspondiente en YouTube.
Canal de Microsoft Edge en YouTube
Puede encontrar todos los vídeos sobre el desarrollo mediante Microsoft Edge en el canal de Microsoft Edge (@MSFTEdge) en YouTube.
El canal de Microsoft Edge incluye las siguientes listas de reproducción:
Explicación de errores de la consola de DevTools con Copilot en Edge
8 de febrero de 2024
Las herramientas de consola y orígenes de Microsoft Edge DevTools ahora se integran con Copilot en Microsoft Edge para ayudarle a comprender los errores y el código fuente. Use esta característica para obtener ayuda con la depuración del código.
Consulta también:
Visor JSON
17 de agosto de 2023
El visor JSON da formato y resalta automáticamente las respuestas JSON y los archivos en las pestañas del explorador. Cuando el servidor web responde a solicitudes HTTP con datos codificados como JSON, estos datos no siempre son fáciles de leer y, a veces, se devuelven como una línea de texto. El visor JSON cambia los datos devueltos para facilitar la lectura. La sintaxis JSON se resalta con colores diferentes, las propiedades del objeto se muestran en sus propias líneas y se aplica sangría, y los objetos se pueden contraer o expandir.
Consulta también:
Microsoft Edge | Novedades de DevTools 113 y 114
24 de julio de 2023
Cubre:
- La herramienta Analizador de bloqueos .
- Agregar estadísticas del selector CSS.
- Advertencias para las propiedades CSS que desencadenan el diseño.
- Mejoras de la herramienta de memoria.
- Mejoras de accesibilidad.
- Mejor compatibilidad con el modo de contraste alto en la extensión DevTools para VS Code.
-
console.table().
Consulta también:
Microsoft Edge | Novedades de DevTools 112
26 de abril de 2023
Cubre:
- Nombres JS no especificados para OOPIFs en la herramienta Rendimiento .
- Selectores CSS no simples en la herramienta información general de CSS .
- Plegado de código en el visor JSON.
- Mejoras en la interfaz de usuario de DevTools.
- Nuevos marcadores para puntos de registro y puntos de interrupción condicionales.
- Cómo cambiar los temas en DevTools.
Consulta también:
- Novedades de DevTools (Microsoft Edge 112)
- Analizar el rendimiento del selector CSS durante los eventos de recalcular estilo : estadísticas del selector CSS.
- Ver JSON con formato
- Aplicar un tema de color a DevTools
Microsoft Edge | Novedades de DevTools 111
28 de marzo de 2023
Cubre:
- Depuración remota de contenido web en dispositivos Xbox y HoloLens.
- Nombres de archivo y función no especificados en la herramienta Rendimiento .
- Puede copiar la tabla Estadísticas del selector CSS en Excel.
- Características de emulación de representación en la barra de herramientas Modo de dispositivo.
- Barra lateral de la herramienta Better Elements .
- Mejor accesibilidad de la vista rápida .
- Características de color de alta definición.
- Personalice las columnas de la herramienta Red .
Consulta también:
- Novedades de DevTools (Microsoft Edge 111)
- Depurar de manera segura el código original mediante la publicación de mapas de origen en el servidor de símbolos Azure Artifacts
Microsoft Edge | Novedades de DevTools 110
16 de febrero de 2023
Cubre:
- Grabaciones de instantáneas de montón más rápidas.
- Personalización mejorada del modo de enfoque (interfaz de usuario de DevTools).
- Mejoras de temas de accesibilidad y contraste.
- Impresión automática en contexto en la herramienta Orígenes .
- Simular
prefers-color-scheme.
Consulta también:
Microsoft Edge | Novedades de DevTools 109
17 de enero de 2023
Cubre:
- Seguimientos mejorados para compartir grabaciones de memoria y rendimiento.
- Estadísticas del selector en la herramienta Rendimiento .
- Realice un seguimiento de los objetos recolector de elementos no utilizados (GC'd) en la herramienta Memoria .
- Extensión del visualizador de instantáneas del montón.
- Panel de vista rápida rediseñado en modo de enfoque.
- Nuevos comandos para los paneles Estilos .
- Inspeccionar elementos.
Consulta también:
- Novedades de DevTools (Microsoft Edge 109)
- Compartir seguimientos de memoria y rendimiento mejorados
- Analice el rendimiento del selector CSS durante los eventos recalcular estilo : estadísticas del selector.
- Reducir elementos no utilizados con configuraciones adicionales para el muestreo de asignación en Corregir problemas de memoria.
- Charla de basura: el recolector de elementos no utilizados de Orinoco
- Extensión del visualizador de instantáneas del montón .
Microsoft Edge | Novedades de DevTools 108
16 de diciembre de 2022
Cubre:
- Navegación mejorada en la paleta de comandos.
- Correcciones de modo de contraste alto.
- Advertencia de JavaScript deshabilitada.
- Consulte propiedades CSS inactivas.
- Nueva documentación para crear sus propias herramientas.
- WebDriver disponible en macOS en Apple M1.
- Use Elementos desasociados para buscar fugas de DOM.
Consulta también:
- Novedades de DevTools (Microsoft Edge 108)
- Creación de una extensión que personalice la interfaz de usuario de DevTools
- Formato de archivo de instantánea del montón
- Microsoft Edge WebDriver : descargue Edge WebDriver.
Microsoft Edge | Novedades de DevTools 107
8 de noviembre de 2022
Cubre:
- Etiquetas de texto en la interfaz de usuario de DevTools en modo de enfoque.
- Nuevo acceso directo para la paleta de comandos.
- Instantáneas de montón grandes en la herramienta Memoria .
- Correcciones de modo de contraste alto.
- Desactive "Buscar a medida que escribe".
- Automatice WebView2 con Playwright.
- Personalice los accesos directos.
Consulta también:
Microsoft Edge | Aprender a usar la herramienta de red
6 de octubre de 2022
Aprenda a usar la herramienta Red en Microsoft Edge DevTools.
Cubre:
- Por qué la herramienta Red de DevTools es esencial para los desarrolladores web.
- Cómo los sitios web obtienen la información que necesitan de Internet para mostrarse en el explorador web.
- Cuándo usar la herramienta Red .
- Un recorrido por la interfaz de usuario de la herramienta Red .
- Mostrar solicitudes en la herramienta Red .
- Ver los detalles de una solicitud o respuesta.
- Personalización de la herramienta Red .
- Ordenar, filtrar y buscar solicitudes.
- Investigación de problemas de rendimiento.
- Bloqueo de solicitudes y exportación como archivos HAR.
- Editar y volver a enviar solicitudes.
Consulta también:
Microsoft Edge | Novedades de DevTools 106
3 de octubre de 2022
Cubre:
- Experimento de paleta de comandos.
- Corrección rápida de problemas en la extensión VS Code de Edge DevTools.
- DevTools usa menos espacio en disco.
- Mejor accesibilidad en modo de enfoque (interfaz de usuario de DevTools) y corrección de errores de contraste alto.
- Temas Chromium claros o oscuros en desuso.
- Seguimiento de nuevas interacciones en la herramienta Rendimiento .
- Uso de fragmentos de código.
Consulta también:
Microsoft Edge | Novedades de DevTools 105
6 de septiembre de 2022
Cubre:
- Protocolo PWA que controla la depuración.
- Mejoras en el modo de enfoque.
- Correcciones de errores del modo de enfoque.
- Se ha mejorado la confiabilidad de las herramientas de red y problemas.
- Edición dinámica del código de la función durante la depuración.
- Uso de puntos de registro.
Consulta también:
Descripción de la interfaz de usuario de DevTools
1 de septiembre de 2022
Este vídeo ligeramente anterior (septiembre de 2022) muestra la interfaz de usuario heredada para DevTools:
- En lugar de la barra de actividad, el vídeo muestra la barra de herramientas principal.
- En lugar del panel Vista rápida , el vídeo muestra el cajón en la parte inferior de DevTools.
Cubre:
- La estructura de la interfaz de usuario de DevTools, con la barra de herramientas principal y el panel en la parte superior, y la barra de herramientas y el panel del cajón en la parte inferior.
- Cómo se organiza la interfaz de usuario de Microsoft Edge DevTools.
- Qué hacen las partes principales de la interfaz de DevTools.
- Qué herramientas están disponibles.
- Herramienta Inspeccionar .
- Modo de emulación de dispositivo.
- Herramientas en la barra de herramientas principal o en el cajón.
- Botón Más pestañas .
- El botón Más herramientas para ver las más de 30 herramientas.
- Herramientas de cierre.
- Reordenación de herramientas en la barra de herramientas principal.
- Cajón y su barra de herramientas.
- Mover herramientas entre la barra de herramientas principal y la barra de herramientas cajón .
- Cómo restaurar la configuración predeterminada.
Consulta también:
Microsoft Edge | Novedades de DevTools 104
5 de agosto de 2022
Cubre:
- Correcciones de errores de representación y accesibilidad.
- Las capas compuestas ahora están en la herramienta Vista 3D y se quitó la herramienta Capas .
- Agrupe archivos en la herramienta Orígenes .
- Busque dónde se ranuran los nodos en los componentes web.
- Dónde encontrar más información.
- Cómo cambiar dónde se coloca la barra de actividad .
Consulta también:
- Novedades de DevTools 104
- Depuración de la web en 3D con la herramienta Vista 3D : entrada de blog.
Microsoft Edge | Novedades de DevTools 103
5 de julio de 2022
Cubre:
- Herramienta de bienvenida rediseñada.
- Nuevo selector de color.
- Nuevos tipos de nodo de instantáneas de montón de memoria.
- Corrección de errores del modo de contraste alto.
- Abra cualquier página HTML en la extensión VS Code.
Consulta también:
Depuración de la web en 3D
21 de junio de 2022
La herramienta Vista 3D de Microsoft Edge DevTools proporciona una representación tridimensional de la página web que está inspeccionando. Use la herramienta vista 3D para depurar problemas comunes de desarrollo web, como:
- Nodos DOM profundamente anidados.
- Elementos fuera de documento.
- Barras de desplazamiento no deseadas.
- Problemas de apilamiento de índice Z.
- Rendimiento de capas compuestas.
Consulta también:
- Navegar por las capas de página web, z-index y DOM mediante la herramienta Vista 3D
- Depuración de la web en 3D con la herramienta Vista 3D : entrada de blog.
Uso de su idioma preferido en Microsoft Edge DevTools
9 de junio de 2022
Cómo seleccionar el idioma de la interfaz de usuario más cómodo para codificar y depurar. Microsoft Edge DevTools admite más de 13 idiomas diferentes.
Consulta también:
Microsoft Edge | Novedades de DevTools 102
1 de junio de 2022
Cubre:
- Visual Studio Code.
- Exportación de instantáneas de montón.
- Ciclos de nodos internos.
- Icono de ayuda.
- Problemas corregidos.
Consulta también:
Estilo completo de la parte desplegable de un HTML <select> con el nuevo <selectmenu> elemento
31 de mayo de 2022
Los elementos de estilo <select> han sido desafiantes. El elemento experimental <selectmenu> (o <selectlist>) promete superar las limitaciones restantes al permitir a los desarrolladores web aplicar estilo a todas las partes del elemento.
Actualización de junio de 2024: este nuevo elemento sigue siendo experimental. Se <selectmenu> cambió el nombre del elemento a <selectlist> en 2023.
Consulta también:
-
Abrir las demostraciones de la
<selectlist>interfaz de usuario -
Elementos de estilo
<select>real : entrada de blog sobre los elementos de estilo<select>y el<selectmenu>elemento .
Problemas avanzados de filtrado en Edge DevTools y VSCode
20 de mayo de 2022
Cada producto web tiene problemas. La herramienta Microsoft Edge DevTools Issues analiza la página web actual e informa de problemas agrupados por tipo, como accesibilidad, compatibilidad, rendimiento, etc.
La extensión Microsoft Edge DevTools para Visual Studio Code hace que los problemas estén disponibles directamente en el código fuente.
Los productos publicados pueden tener problemas. En función de sus comentarios, hemos agregado formas útiles de filtrar los problemas. Puede deshabilitar los problemas procedentes de bibliotecas de terceros y elegir los exploradores sobre los que ver los problemas.
Consulta también:
- Búsqueda y corrección de problemas mediante la herramienta Problemas
- Análisis de problemas en línea y en directo en la extensión DevTools para VS Code
Creación de una animación vinculada a desplazamiento sin JavaScript
12 de mayo de 2022
Obtenga información sobre la característica de animaciones vinculadas a desplazamiento CSS y cómo se puede usar para crear un indicador de progreso de lectura en una página web, sin usar JavaScript. Esta es una característica de la plataforma web en su conjunto, no solo Microsoft Edge.
A partir del 21 de julio de 2023, esta característica ya no es experimental y ahora se admite en Microsoft Edge sin marca. Descripción de 2022: las animaciones vinculadas a desplazamiento CSS son una característica experimental en Microsoft Edge; Para probar esta característica, vaya a y, a edge://flags continuación, habilite la configuración características de plataforma web experimental .
Consulta también:
- Demostración del lector : aplicación de demostración que se muestra en el vídeo.
- Código fuente para la demostración del lector
- Animaciones controladas por desplazamiento CSS en MDN.
- @scroll-timeline en MDN: página original sobre la característica experimental de animaciones vinculadas a desplazamiento CSS.
Personalización de las herramientas de desarrollo de Microsoft Edge y acceso rápido a las características
5 de mayo de 2022
Obtenga información sobre cómo personalizar DevTools para satisfacer sus necesidades. Cubre:
- Acoplar o desacoplar DevTools.
- Abra nuevas herramientas.
- Cierre las herramientas que no necesita.
- Mueva las herramientas en el cajón inferior (ahora el panel Vista rápida ).
- Personalice el tamaño del texto.
- Personalice el tema.
- Use los métodos abreviados de teclado del Menú de comandos para personalizar rápidamente DevTools.
Consulta también:
Resaltar texto en la web con la API de resaltado personalizado de CSS
28 de abril de 2022
Aplicar estilos a rangos de texto en la web es muy útil, pero históricamente ha sido algo complicado de hacer.
La API de resaltado personalizado de CSS es el futuro del resaltado de intervalos de texto en la Web. Esta API proporciona a los desarrolladores web características de JavaScript y CSS que facilitan y hacen más eficaz el estilo de cualquier rango de texto.
Consulta también:
Microsoft Edge | Novedades de DevTools 101
28 de abril de 2022
Cubre:
- Usar la consola.
- Caché de mapas de origen.
- Columna de texto de estado.
- Cambiar temas.
Consulta también:
- Novedades de DevTools 101
- Integración de la consola: https://aka.ms/ConsoleIntegration
- Columnas de red: https://aka.ms/NetworkColumns
Microsoft Edge | Novedades de DevTools 100
19 de abril de 2022
Cubre:
- Repositorio de Herramientas de desarrollo de Microsoft Edge para enviar comentarios e ideas.
- Se han agregado idiomas checo y vietnamita para la interfaz de usuario de DevTools.
- En la herramienta Memoria , filtre las instantáneas del montón por tipo de nodo.
- La herramienta Red tiene una columna Completado por , que muestra el trabajo del servicio o la memoria caché.
- Los vínculos de un perfil de rendimiento importado usan mapas de origen del servidor de símbolos de Azure Artifacts para volver a asignar al código fuente original conocido.
Consulta también:
Microsoft Edge | Novedades de DevTools 99
21 de marzo de 2022
Cubre:
- Servidor de símbolos de Artefactos de Azure y mapas de origen.
- Panel Capas mejoradas en la herramienta Vista 3D .
- Use mapas de origen para desminificar los perfiles de rendimiento.
- Depuración ASP.NET dinámica en DevTools para Visual Studio.
- Accesibilidad en la herramienta Consola de red y la herramienta Vista 3D .
Consulta también:
Descripciones automáticas de imágenes en Microsoft Edge
17 de marzo de 2022
Microsoft Edge proporciona texto alternativo generado automáticamente para las imágenes que no lo incluyen. El texto alternativo generado automáticamente ayuda a los usuarios de tecnología de asistencia, como los lectores de pantalla, a descubrir el significado o la intención de una imagen en la web.
Muchas personas ciegas o con poca visión experimentan la web principalmente a través de un lector de pantalla: una tecnología de asistencia que lee el contenido de cada página en voz alta. Los lectores de pantalla dependen de tener etiquetas de imagen (texto alternativo o "texto alternativo") siempre que les permita describir contenido visual (como imágenes y gráficos) para que el usuario pueda comprender todo el contenido de la página. El texto alternativo es fundamental para que la web sea accesible, pero a menudo se pasa por alto. A más de la mitad de las imágenes procesadas por los lectores de pantalla les falta texto alternativo.
Consulta también:
- Parece decir: Microsoft Edge ahora proporciona etiquetas de imagen generadas automáticamente : entrada de blog
Microsoft Edge | Novedades de DevTools 98
23 de febrero de 2022
Cubre:
- Emular el modo de colores forzados.
- Los iconos de actividad del registro de eventos de la herramienta Rendimiento tienen información sobre herramientas.
- Los tamaños superficiales de la herramienta Memoria se representan como valores decimales.
- En la herramienta Red , el cuadro Buscar cambia de tamaño según sea necesario.
- En la herramienta Aplicación , la interfaz de usuario se alinea correctamente.
- Actualizaciones para el motor del explorador Chromium.
Consulta también:
Microsoft Edge | Novedades de DevTools 97
1 de febrero de 2022
Cubre:
- La herramienta Elementos desasociados está disponible de forma predeterminada.
- La herramienta Vista 3D admite el cambio de temas de color en DevTools.
- Mejoras en el modo de enfoque (interfaz de usuario de DevTools).
- La extensión DevTools para VS Code tiene características adicionales.
Consulta también:
- Novedades de DevTools 97
- Actualice la lista de dispositivos: https://aka.ms/RefreshDeviceList
- Autocompletar con Editar como HTML https://aka.ms/AutocompleteEditHTML
- Experiencia de depuración mejorada: https://aka.ms/NewDebugging
Depuración de pérdidas de memoria con la herramienta Elementos desasociados de Microsoft Edge
9 de diciembre de 2021
La herramienta Detached Elements le ayuda a investigar y resolver pérdidas de memoria DOM.
Las pérdidas de memoria se producen cuando el código JavaScript de una aplicación conserva cada vez más objetos en la memoria en lugar de liberarlos para que el explorador recopile elementos no utilizados. Hemos creado la herramienta Detached Elements con los desarrolladores de Microsoft Teams y ya nos ha ayudado a encontrar y corregir fugas de memoria en muchos de nuestros propios sitios web y aplicaciones.
Consulta también:
- Depuración de pérdidas de memoria DOM con la herramienta Elementos desasociados
- Depuración de pérdidas de memoria con la herramienta Elementos desasociados de Microsoft Edge : entrada de blog.
Microsoft Edge | Novedades de DevTools 96
9 de diciembre de 2021
Cubre:
- Nueva interfaz de usuario de DevTools: modo de enfoque.
- La herramienta Consola puede estar en los paneles superior e inferior de DevTools.
- La herramienta Orígenes le notifica cuándo no se pueden cargar los mapas de origen.
- Al hacer clic en el icono de triángulo de una lista desplegable, se abre el menú.
- La apertura de archivos de código fuente en Visual Studio Code se integra con la herramienta Orígenes .
Consulta también:
Microsoft Edge | Novedades de DevTools 95
8 de diciembre de 2021
Cubre:
- Icono web de búsqueda para todos los mensajes de error y advertencia.
- Se ha mejorado el acceso para definir User-Agent sugerencias de cliente.
- Los filtros de consola muestran mensajes agrupados.
Consulta también:
Microsoft Edge | The EyeDropper API
22 de noviembre de 2021
El equipo de Microsoft Edge especificó e implementó la nueva API EyeDropper en colaboración con el proyecto de código abierto Chromium. Proporcionar comentarios en Problemas: WICG/cuentagotas | github.com.
Muchas aplicaciones creativas permiten a los usuarios elegir colores de partes de una ventana de aplicación o incluso de toda la pantalla, normalmente usando una metáfora de cuentagotas. La API EyeDropper permite a los autores usar un cuentagotas proporcionado por el explorador en la construcción de selectores de colores personalizados en la web.
Consulta también:
- Selección de colores de cualquier píxel en la pantalla con EyeDropper API | web.dev
- API EyeDropper: API web | MDN developer.mozilla.org
Microsoft Edge | Novedades de DevTools 94
12 de noviembre de 2021
Cubre:
- Busque errores de consola en la web.
- Los iconos de punto de interrupción se muestran cuando se usan temas de Visual Studio Code.
- La extensión DevTools para Visual Studio Code incluye las herramientas más recientes, compatibilidad con temas y vínculos útiles. Conexión del depurador de JavaScript a áreas de trabajo remotas.
Consulta también:
- Novedades de DevTools 94
- Métodos abreviados de teclado : navegar por DevTools con un teclado.
Microsoft Edge | Novedades de DevTools 93
11 de octubre de 2021
Cubre:
- Interfaz de usuario de DevTools.
- Depurar pérdidas de memoria del nodo DOM con la herramienta Elementos desasociados .
- Cambiar el idioma de visualización.
- Copie las declaraciones CSS en el panel Estilos de la herramienta Elementos para las bibliotecas CSS en JS.
- Personalización más sencilla de User-Agent sugerencias de cliente.
- Los lectores de pantalla anuncian errores, advertencias y problemas que se muestran en la barra de herramientas y la consola.
- Copiar como PowerShell en la herramienta Red incluye cookies.
- El depurador de Visual Studio Code se integra con la extensión DevTools para VS Code.
Consulta también:
Microsoft Edge | Estado de la plataforma
25 de mayo de 2021
Microsoft Edge ofrece una plataforma y herramientas atractivas y coherentes para los desarrolladores. A medida que nuestros exploradores heredados se agote el soporte técnico, Edge pronto será el único explorador compatible de Microsoft en Windows 10. Obtenga información sobre lo último en la plataforma Edge, las herramientas y las aplicaciones web.
Cubre:
- Seguimientos de lápiz delegados.
- Nuevas funcionalidades web para desarrolladores.
- Ejecute en el inicio de sesión del sistema operativo.
- Herramientas de Microsoft Edge para VS Code.
Consulta también:
- El futuro de Internet Explorer en Windows 10 está en el modo Microsoft Edge - IE.
- Adopción de Microsoft Edge con FastTrack
- "Microsoft Edge: Estado de la plataforma": Recursos de sesión
Ignite | Marzo de 2021 | Activación de la historia de Web Apps
2 de marzo de 2021
Las aplicaciones web progresivas (PWA) son compatibles con Microsoft Edge y representan una oportunidad para mejorar la detectabilidad y la interacción con la aplicación. Nuevas funcionalidades de la plataforma web. Cómo se integran estas aplicaciones web modernas sin problemas con Microsoft Windows.
Cubre:
- La capacidad de modernizar.
- Esfuerzos conjuntos para potenciar la plataforma web.
- Microsoft Edge y el motor del explorador Chromium.
- Funcionalidades de Microsoft Edge y web (Project Fugu).
- Hacer que las PWA brillen en Windows.
- El mejor alcance de su clase.
- Instale un sitio web como una aplicación.
- Participe con los PWA en Windows.
Consulta también:
Ignite | Septiembre de 2020 | Lo último en herramientas para desarrolladores
22 de septiembre de 2020
Las herramientas para desarrolladores de Microsoft Edge ayudan a facilitar el desarrollo web, las pruebas y la automatización. Obtenga información sobre cómo priorizamos la accesibilidad en nuestras herramientas y aplicaciones, y cómo ayudamos a los demás a hacer lo mismo.
Cubre:
- Extensión DevTools para VS Code.
- Automatización y pruebas entre exploradores. Selenium, WebDriver, Puppeteer, Playwright y CI/CD a través de contenedores de Docker.
- Colaboración en el motor del explorador Chromium. Cómo contribuir.
- Interfaz de usuario localizada en las herramientas de desarrollo.
- Accesibilidad en las herramientas de desarrollo.
Consulta también:
Ver también
YouTube:
-
Canal de Microsoft Edge (@MSFTEdge) en YouTube
- Desarrollador : lista de reproducción.
- Novedades de DevTools : lista de reproducción.
- Extensiones : lista de reproducción.
- Compilación, implementación y administración de aplicaciones WebView2 : 2 de marzo de 2021.