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, api y características de plataforma web, Web Apps progresivas 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 watch el vídeo correspondiente en YouTube.
DevTools: novedades de DevTools 105
Publicado el 6 de septiembre de 2022.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 105.
DevTools: descripción de la interfaz de usuario de DevTools
Publicado el 1 de septiembre de 2022.
Comprenda cómo se organiza la interfaz de usuario de Microsoft Edge DevTools. Si está confundido sobre qué herramientas están disponibles y qué hacen las partes principales de la interfaz de DevTools, este vídeo le ayudará a sentirse más cómodo.
En este vídeo, se repasa la estructura de la interfaz de usuario, con su barra de herramientas principal y panel y su área de cajón. También se explica cómo buscar, abrir y cerrar herramientas, restaurar la configuración predeterminada y repasar la lista de herramientas disponibles.
DevTools: novedades de DevTools 104
Publicado el 5 de agosto de 2022.
Obtenga más información sobre nuestros anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 104.
DevTools: novedades de DevTools 103
Publicado el 5 de julio de 2022.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 103.
DevTools: depuración de la web en 3D
Publicado el 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.
Para obtener más información sobre la herramienta Vista 3D, consulte Navegar por capas de páginas web, índice z y DOM mediante la herramienta Vista 3D o Depurar la web en 3D con la herramienta Vista 3D.
DevTools: use su idioma preferido en DevTools.
Publicado el 9 de junio de 2022.
Microsoft Edge DevTools admite 13 idiomas diferentes. En este vídeo, el equipo muestra cómo elegir el idioma más cómodo para codificar y depurar.
Para más información sobre cómo cambiar la configuración del idioma de DevTools, consulte Cambiar configuración de idioma de DevTools.
Para informar de los errores de traducción, consulte Contacto con el equipo de Microsoft Edge DevTools.
DevTools: novedades de DevTools 102
Publicado el 1 de junio de 2022.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 102.
Plataforma web: estilo completo de la parte desplegable de con <select> el nuevo <selectmenu> elemento
Publicado el 31 de mayo de 2022.
Los elementos de estilo <select> han sido desafiantes. El elemento experimental <selectmenu> promete superar las limitaciones restantes al permitir a los desarrolladores web aplicar estilo a todas las partes del elemento.
Para obtener más información sobre los elementos de estilo <select> y el nuevo <selectmenu> elemento, consulte la entrada de blog Styling elements for real (Aplicar estilo a <select> elementos reales).
DevTools: problemas avanzados de filtrado en Edge DevTools y VSCode
Publicado el 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.
Si tiene Visual Studio Code, 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 también pueden tener muchos problemas. En función de sus comentarios, hemos agregado formas útiles de filtrar los problemas. Por ejemplo, puede deshabilitar los problemas procedentes de bibliotecas de terceros y elegir los exploradores sobre los que ver los problemas.
Para obtener más información sobre la herramienta Problemas, consulte Buscar y corregir problemas mediante la herramienta Problemas.
Para obtener más información sobre la extensión Microsoft Edge DevTools para Visual Studio Code, consulte Extensión Microsoft Edge DevTools para Visual Studio Code.
Plataforma web: creación de una animación vinculada a desplazamiento sin JavaScript
Publicado el 12 de mayo de 2022.
Obtenga información sobre la próxima característica de animaciones vinculadas a desplazamientos CSS y cómo se puede usar para crear un indicador de progreso de lectura en una página web, sin usar JavaScript.
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 .
Para reproducir con la aplicación de demostración que se muestra en el vídeo, vea la demostración del lector representado y su código fuente.
Para obtener más información sobre la característica de animaciones vinculadas a desplazamiento CSS, consulte @scroll-timeline en MDN.
DevTools: personalización de herramientas de desarrollo de Microsoft Edge y acceso rápido a las características
Publicado el 5 de mayo de 2022.
Obtenga información sobre cómo personalizar DevTools para satisfacer sus necesidades.
En este vídeo se explica cómo acoplar o desacoplar DevTools, abrir nuevas herramientas y cerrar las que no necesita. Describe cómo mover herramientas en el cajón inferior y personalizar el tamaño y el tema del texto. En el vídeo también se explica cómo puede usar los métodos abreviados de teclado del menú Comandos para personalizar rápidamente DevTools.
DevTools: novedades de DevTools 101
Publicado el 28 de abril de 2022.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 101.
Plataforma web: resaltado de texto en la web con la API de resaltado personalizado de CSS
Publicado el 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 nueva API de resaltado personalizado de CSS es el futuro del resaltado de intervalos de texto en la Web. 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.
Para obtener más información, vea CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web (API de resaltado personalizado de CSS: el futuro del resaltado de intervalos de texto en la Web).
DevTools: novedades de DevTools 100
Publicado el 19 de abril de 2022.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 100.
DevTools: novedades de DevTools 99
Publicado el 21 de marzo de 2022.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 99.
DevTools: novedades de DevTools 98
Publicado el 23 de febrero de 2022.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 98.
DevTools: novedades de DevTools 97
Publicado el 1 de febrero de 2022.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 97.
DevTools: novedades de DevTools 96
Publicado el 9 de dic 2021.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 96.
DevTools: depuración de pérdidas de memoria con la herramienta Elementos desasociados de Microsoft Edge
Publicado el 9 de dic 2021.
Nos complace anunciar la nueva herramienta Detached Elements en Microsoft Edge DevTools, que 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 esta herramienta 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.
Para obtener más información, consulte Depurar pérdidas de memoria DOM con la herramienta Elementos desasociados y lea la entrada de blog Correspondiente Depurar pérdidas de memoria con la herramienta Elementos desasociados de Microsoft Edge.
DevTools: novedades de DevTools 95
Publicado el 8 de dic 2021.
Obtenga más información sobre los anuncios más recientes del equipo de Microsoft Edge DevTools en Novedades de DevTools 95.
Plataforma web: La API EyeDropper
Publicado el 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.
Para obtener más información, consulte Selección de colores de cualquier píxel en la pantalla con EyeDropper API | web.dev y EyeDropper API - Web API | MDN developer.mozilla.org.
DevTools: novedades de DevTools 94
Publicado el 12 de noviembre de 2021.
Obtenga más información sobre nuestros últimos anuncios del equipo de Microsoft Edge DevTools en Novedades de DevTools 94.