Compartir a través de


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.

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:

Explicar los errores de la consola de DevTools mediante Copilot en Edge

8 de febrero de 2024

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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:

Microsoft Edge | Novedades de DevTools 111

28 de marzo de 2023

Imagen en miniatura del vídeo

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:

Microsoft Edge | Novedades de DevTools 110

16 de febrero de 2023

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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:

Microsoft Edge | Novedades de DevTools 108

16 de diciembre de 2022

Imagen en miniatura del vídeo

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:

Microsoft Edge | Novedades de DevTools 107

8 de noviembre de 2022

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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 y 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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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:

Microsoft Edge | Novedades de DevTools 103

5 de julio de 2022

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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:

Uso de su idioma preferido en Microsoft Edge DevTools

9 de junio de 2022

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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:

Problemas avanzados de filtrado en Edge DevTools y VSCode

20 de mayo de 2022

Imagen en miniatura del vídeo

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:

Creación de una animación vinculada a desplazamiento sin JavaScript

12 de mayo de 2022

Imagen en miniatura del vídeo

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:

Personalización de las herramientas de desarrollo de Microsoft Edge y acceso rápido a las características

5 de mayo de 2022

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

Cubre:

  • Usar la consola.
  • Caché de mapas de origen.
  • Columna de texto de estado.
  • Cambiar temas.

Consulta también:

Microsoft Edge | Novedades de DevTools 100

19 de abril de 2022

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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:

Microsoft Edge | Novedades de DevTools 98

23 de febrero de 2022

Imagen en miniatura del vídeo

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.
  • Novedades para el motor del explorador Chromium.

Consulta también:

Microsoft Edge | Novedades de DevTools 97

1 de febrero de 2022

Imagen en miniatura del vídeo

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:

Depuración de pérdidas de memoria con la herramienta Elementos desasociados de Microsoft Edge

9 de diciembre de 2021

Imagen en miniatura del vídeo

Para depurar pérdidas de memoria DOM, use:

  • Herramienta Elementos desasociados . Los nodos desasociados tienen un vínculo al código JavaScript asociado.
  • Tipo de generación de perfiles de elementos desasociados en la herramienta Memoria .

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:

Microsoft Edge | Novedades de DevTools 96

9 de diciembre de 2021

Imagen en miniatura del vídeo

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 origen 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

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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:

Microsoft Edge | Novedades de DevTools 94

12 de noviembre de 2021

Imagen en miniatura del vídeo

Cubre:

  • Busque errores de consola en la web.
  • Los iconos de punto de interrupción se muestran al usar 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:

Microsoft Edge | Novedades de DevTools 93

11 de octubre de 2021

Imagen en miniatura del vídeo

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

Imagen en miniatura del vídeo

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:

Ignite | Marzo de 2021 | Encendiendo la historia Web Apps

2 de marzo de 2021

Imagen en miniatura del vídeo

Las Web Apps progresivas (PWA) se admiten en 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

Imagen en miniatura del vídeo

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:

Consulte también

YouTube: