Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Siguiendo la programación actualizada de Chromium, estamos ajustando nuestra programación para las próximas versiones de Microsoft Edge y cancelando la versión de Microsoft Edge 82. Consulte nuestra entrada de blog para obtener más información.
Estas son las características más recientes de DevTools de la versión estable de Microsoft Edge.
Anuncios del equipo de Microsoft Edge DevTools
Depurar de forma remota Microsoft Edge en dispositivos con Windows 10 o posteriores
Las herramientas remotas para la aplicación Microsoft Edge ya están disponibles en Microsoft Store. Esta aplicación amplía el Portal de dispositivos Windows. Puede conectarse desde Microsoft Edge que se ejecuta en el equipo de desarrollo a un dispositivo remoto de Windows 10 o posterior y mostrar una lista de destinos. Esta lista de destinos incluye todas las pestañas de Microsoft Edge y PWA abiertas en el dispositivo Windows. Use DevTools en la máquina de desarrollo en un destino que se ejecute en el dispositivo remoto de Windows.
Lea nuestra guía para configurar el dispositivo de Windows 10 y la máquina de desarrollo para la depuración remota: Depurar dispositivos Windows de forma remota.
Indíquenos su experiencia de depuración remota tuiteando o haciendo clic en el icono Enviar comentarios .
Nuevas formas de acceder a Configuración
Hay una gran cantidad de opciones de configuración para DevTools que puede personalizar para que tengan la apariencia, el comportamiento y el funcionamiento que necesiten. En Microsoft Edge 83, el acceso a la Configuración en DevTools ahora es mucho más fácil. Para abrir Configuración , haga clic en el icono de engranaje situado junto a Alertas de consola y el menú principal.
También puedes abrir Configuración desde el menú principal en Más herramientas.
Chromium problema #1050855
Barras de información nuevas y mejoradas
Las barras de notificación informativas (barras de información) en DevTools ahora tienen un aspecto mejorado y más funcionalidad. En Microsoft Edge 83, las barras de información son más fáciles de leer y proporcionan botones para que puedas realizar la acción relevante inmediatamente.
Chromium problema #1056348
Navegar por el Selector de colores con el teclado
En versiones anteriores de Microsoft Edge, no se podía navegar por la sección Sombras del Selector de colores con el teclado. En Microsoft Edge 83, ahora puede usar el teclado para mover el selector en la sección Tonos del Selector de colores.
El Selector de colores es una interfaz gráfica de usuario en el panel Elementos para cambiar color y background-color declarar:
Chromium problema #963183
Vea también:
La pestaña Propiedades ahora se rellena después de actualizar una página
En Microsoft Edge 81 y versiones anteriores, la pestaña Propiedades del panel Elementos se dividía por actualizaciones de página. Al actualizar la página, la pestaña Propiedades no ha rellenado las propiedades del elemento seleccionado actualmente:
En Microsoft Edge 83, ahora puede mostrar las propiedades del elemento seleccionado actualmente después de actualizar una página en la pestaña Propiedades:
Chromium problema #1050999
Vea también:
Use las teclas de dirección para desplazarse en la herramienta Cambios
La herramienta Cambios realiza un seguimiento de los cambios realizados en CSS o JavaScript en DevTools. Puede usar la herramienta Cambios para mostrar rápidamente todos los cambios y llevarlos de vuelta a su editor/IDE.
Para abrir la herramienta Cambios, en DevTools, presione Ctrl+Mayús+P (Windows/Linux) o Comando+Mayús+P (macOS) para abrir el menú de comandos y, después, escriba changes. Seleccione el comando Mostrar cambios y presione Entrar. La herramienta Cambios se abre en el panel Vista rápida en la parte inferior de DevTools.
Cuando ha realizado un cambio en un archivo reducido, la herramienta Cambios le permite desplazarse horizontalmente para mostrar todo el código reducido. A partir de Microsoft Edge 83, ahora puede desplazarse horizontalmente con las teclas de dirección del teclado.
Si usa lectores de pantalla o el teclado para desplazarse por DevTools, envíenos sus comentarios mediante un tweet o haciendo clic en el icono Enviar comentarios .
Chromium problema #963183
Vea también:
Anuncios del proyecto de Chromium
En las secciones siguientes se anuncian características adicionales disponibles en Microsoft Edge 83 que han contribuido al proyecto código abierto Chromium.
Emular deficiencias visuales
En la herramienta Representación , use la nueva característica Emular deficiencias visuales para tener una mejor idea de cómo las personas con diferentes tipos de deficiencias visuales experimentan su sitio:
DevTools puede emular la visión borrosa y los siguientes tipos de deficiencias en la visión del color:
| Deficiencia en la visión del color | Detalles |
|---|---|
| Protanopia | La incapacidad de percibir cualquier luz roja. |
| Deuteranopía | La incapacidad de percibir cualquier luz verde. |
| Tritanopia | La incapacidad de percibir cualquier luz azul. |
| Acromatopsia | La incapacidad de percibir cualquier color, excepto los tonos de gris (extremadamente raro). |
Existen versiones menos extremas de estas deficiencias en la visión del color y son más comunes. Por ejemplo, la protanomalía es una sensibilidad reducida a la luz roja (a diferencia de la protanopia, que es la incapacidad total para percibir la luz roja). Sin embargo, estas deficiencias visuales no están tan claramente definidas: cada persona con tal deficiencia de visión es diferente y puede ver las cosas de manera diferente (pudiendo percibir más o menos de los colores relevantes).
Al diseñar para las simulaciones más extremas en DevTools, se garantiza que sus aplicaciones web también serán accesibles para personas con deficiencias visuales.
Envíe sus comentarios tuiteando o haciendo clic en el icono Enviar comentarios .
Problema de Chromium #1003700
Vea también:
- Emular deficiencias visuales
- Analizar el rendimiento de representación con la herramienta Representación en Referencia de características derendimiento
- Tipos de daltonismo, en Colourblindawareness.org.
Emular configuraciones regionales
Para emular configuraciones regionales, en la herramienta Sensores , seleccione una ubicación en la lista desplegable Ubicación . (Para acceder a la herramienta Sensores , abra el menú Comando y escriba Sensors). Después de seleccionar una ubicación, DevTools modifica la configuración regional predeterminada actual, lo que afecta al código siguiente:
-
Intl.*Las API, por ejemplo:new Intl.NumberFormat().resolvedOptions().locale - Otras API de JavaScript compatibles con la configuración regional, como
String.prototype.localeComparey*.prototype.toLocaleString, por ejemplo:123_456..toLocaleString() - API de DOM como
navigator.languageynavigator.languages - El encabezado de solicitud HTTP Accept-Language
Nota:
Las novedades y navigator.languagenavigator.languages no son visibles inmediatamente, sino solo después de la siguiente navegación o actualización de página. Los cambios en el Accept-Language encabezado HTTP solo se reflejan para las solicitudes posteriores.
Para probar una demostración, consulte el ejemplo de código dependiente de la configuración regional.
Chromium problema #1051822
Vea también:
- Invalidar geolocalización en Emular sensores de dispositivo.
Depuración de directiva de incrustador de origen cruzado (COEP)
El panel Red ahora proporciona información de depuración de la directiva de incrustador entre orígenes .
La columna Estado ahora proporciona una explicación rápida de por qué se bloqueó una solicitud, así como un vínculo para ver los encabezados de esa solicitud para su posterior depuración:
La sección Encabezados de respuesta de la pestaña Encabezados proporciona más instrucciones sobre cómo resolver los problemas:
Envíe sus comentarios tuiteando o haciendo clic en el icono Enviar comentarios .
Chromium problema #1051466
Vea también:
- Bloquear solicitudes en Inspeccionar actividad de red.
Nuevos iconos para puntos de interrupción, puntos de interrupción condicionales y puntos de registro
Actualización: A partir de 2022, los puntos de interrupción ahora se indican mediante un rectángulo azul, en lugar de un círculo rojo.
El panel Orígenes tiene nuevos iconos para puntos de interrupción, puntos de interrupción condicionales y puntos de registro:
- Los puntos de interrupción (
) se representan mediante círculos rojos. - Los puntos de interrupción condicionales (
) se representan mediante círculos mitad rojos y mitad blancos. - Los puntos de registro (
) se representan mediante círculos rojos con iconos de consola.
La motivación para los nuevos íconos fue hacer que la interfaz de usuario fuera más consistente con otras herramientas de depuración de GUI (que generalmente colorean los puntos de interrupción de rojo) y facilitar la distinción entre las 3 características de un vistazo.
Chromium problema #1041830
Vea también:
Ver las solicitudes de red que establecen una ruta de acceso a las cookies específica
Use la nueva cookie-path palabra clave de filtro en la herramienta Red para centrarse en las solicitudes de red que establecen una ruta de cookie específica.
Para descubrir más palabras clave como cookie-path, consulte Filtrar solicitudes por propiedades en lareferencia de características de red.
Acoplar a la izquierda desde el menú de comandos
Para mover DevTools a la izquierda de la ventanilla (página web representada), abra el menú Comandos y ejecute el Dock to left comando. La función Acoplar a la izquierda está disponible desde Microsoft Edge 75, pero anteriormente solo se podía acceder a ella desde el menú principal. Ahora también puede acceder a la característica Acoplar a la izquierda desde el menú de comandos.
"
Envíe sus comentarios tuiteando o haciendo clic en el icono Enviar comentarios .
Chromium problema #1011679
Vea también:
El panel Auditorías es ahora el panel Faro
El equipo de DevTools recibió con frecuencia comentarios de los desarrolladores web de que, si bien era posible ejecutar Lighthouse desde DevTools, cuando lo probaron, no pudieron encontrar un panel "Lighthouse". Entonces, el panel de Auditorías ahora se llama panel Lighthouse .
Nota: El panel Faro proporciona vínculos a contenido hospedado en sitios web de terceros. Microsoft no es responsable ni tiene control sobre el contenido de estos sitios y los datos que puedan recopilar.
Vea también:
Eliminar todas las invalidaciones locales de una carpeta
Después de configurar Invalidaciones locales, puede hacer clic con el botón derecho en un directorio y, a continuación, seleccionar la nueva opción Eliminar todas las invalidaciones para eliminar todas las invalidaciones locales de esa carpeta.
Envíe sus comentarios tuiteando o haciendo clic en el icono Enviar comentarios .
Chromium problema #1016501
Vea también:
Interfaz de usuario actualizada de tareas largas
Una tarea larga es código JavaScript que monopoliza el subproceso principal durante mucho tiempo, lo que provoca que una página web se bloquee.
Hace tiempo que puede visualizar tareas largas en el panel Rendimiento , pero en Microsoft Edge 83 se ha actualizado la interfaz de usuario de visualización de tareas largas en la herramienta Rendimiento . La parte de tarea larga de una tarea ahora está coloreada con un fondo rojo a rayas:
Envíe sus comentarios tuiteando o haciendo clic en el icono Enviar comentarios .
Chromium problema #1054447
Compatibilidad con iconos enmascarables en el panel Manifiesto
Hay una nueva casilla de verificación, Mostrar solo el área mínima segura para iconos enmascarables, en el panel Manifiesto de la herramienta Aplicación .
Android Oreo introdujo íconos adaptativos, que muestran íconos de aplicaciones en una variedad de formas en diferentes modelos de dispositivos. Los iconos enmascarables son un nuevo formato de icono que admite iconos adaptables, lo que le permite garantizar que el icono de PWA tenga un buen aspecto en dispositivos compatibles con el estándar de iconos enmascarables.
Para comprobar que el icono enmascarable se vea bien en dispositivos Android Oreo, en el panel Manifiesto de la herramienta Aplicación , seleccione la nueva casilla Mostrar solo el área mínima segura para los iconos enmascarables:
Esta característica se inició en Microsoft Edge 81. Las actualizaciones que se tratan aquí en Microsoft Edge 83 no estaban cubiertas en Novedades de DevTools (Microsoft Edge 81).
Vea también:
- Ver, editar y eliminar cookies - Artículos sobre la herramienta Aplicación .
Nota:
Algunas partes de esta página son modificaciones que se basan en trabajo creado y compartido por Google y que se usan de acuerdo con los términos descritos en la Licencia internacional de Creative Commons Atribution 4.0. La página original se encuentra aquí y está escrita por Kayce Basques.
Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.