Buscar y corregir problemas con la herramienta Problemas

En Microsoft Edge DevTools, la **** herramienta Problemas analiza automáticamente la página web actual, informa de los problemas agrupados por tipo y proporciona documentación para ayudar a explicar y resolver los problemas.

La herramienta Problemas proporciona comentarios en las siguientes categorías:

• Accesibilidad.
• Compatibilidad entre exploradores.
• Rendimiento.
• Aplicaciones web progresivas.
• Security.
• Otros.

Varios orígenes proporcionan comentarios en la herramienta Problemas, como la plataforma Chromium, El eje Deque, los datos de compatibilidad del explorador MDN y la webhint. Para obtener información sobre estos orígenes de comentarios que rellenan la herramienta Problemas, vaya a:

• Introducción a axe Tools
• repositorio browser-compat-data
• webhint

Abrir la herramienta Problemas

1. Navegue a una página web que contenga problemas que corregir. Por ejemplo, abra la página de demostración de pruebas de accesibilidad en una nueva pestaña o ventana.

2. Abra DevTools. Después de unos segundos, el contador de problemas ( Contador de problemas DevTools.

3. Actualice la página, ya que algunos problemas se notifican en función de las solicitudes de red. Observe el recuento actualizado en el contador Problemas.

4. Seleccione el contador Problemas. La herramienta Problemas se abre con problemas agrupados en distintas categorías.

   

   Categorías de problemas en la herramienta Problemas de la página de demostración

Otras formas de abrir la herramienta Problemas

Hay varias formas adicionales de abrir la herramienta Problemas:

• Seleccione el menú Más herramientas ( ) en el panel principal o en el cajón y, a continuación, seleccione + **** Problemas.
• Seleccione Personalizar y controlar DevToolsMás > herramientas > Problemas.
• En el árbol DOM de la herramienta Elementos, seleccione y, a continuación, haga clic en un nombre de elemento Shift ondulado subrayado. O bien, abra el menú contextual en un elemento ondulado subrayado y, a continuación, seleccione Ver problemas.

Los problemas se ordenan automáticamente por gravedad

Dentro de cada categoría de problemas, primero se enumeran los errores, después las advertencias y, a continuación, las sugerencias.

Incluir problemas de terceros

Para incluir problemas causados por sitios de terceros, **** en la parte superior de la herramienta Problemas, active la casilla Incluir problemas de terceros.

Expandir entradas en la herramienta Problemas

La herramienta Problemas presenta documentación adicional y correcciones recomendadas para aplicar a cada problema. Para expandir un problema para obtener esta información adicional, seleccione un problema, como se muestra a continuación.

1. Abra la página de demostración en una nueva ventana o pestaña y, a continuación, abra DevTools.

2. Abra la herramienta Problemas seleccionando el contador Problemas ( Contador de ).

3. Seleccione un problema para expandir el problema.

   

   La herramienta Problemas que muestra información adicional sobre cómo solucionar el problema

Cada problema mostrado tiene los siguientes componentes:

• Un titular que describe el problema.
• Una descripción que proporciona más contexto y soluciones propuestas.
• Sección RECURSOS AFECTADOS que se vincula a recursos de DevTools, como la herramienta Elementos, Orígenes o Red.
• Vínculos a documentación adicional.

Ver problemas en el contexto de una herramienta asociada

Un problema en la herramienta Problemas puede incluir uno o más vínculos que abran distintas herramientas, como la herramienta Elementos, Orígenes o Red. Puede abrir una de estas herramientas para realizar pasos de solución de problemas adicionales. Para abrir una herramienta vinculada desde la herramienta Problemas, siga estos pasos.

1. Como se describe en la sección anterior, abra la página de demostración y, a continuación, expanda un problema en la herramienta Problemas.

2. En RECURSOS AFECTADOSAbra > en, seleccione el nombre de la herramienta. El recurso afectado se muestra en la herramienta seleccionada.

   

   Seleccionar una herramienta para abrir un recurso afectado desde dentro de la herramienta Problemas

   Un problema expandido puede tener un vínculo Red para mostrar el recurso afectado en la herramienta Red.

   

   La herramienta Red se abre al seleccionar un vínculo de recurso Red

Abrir problemas desde el árbol DOM

Si un elemento tiene un problema asociado, el árbol DOM de la herramienta Elementos muestra un subrayado ondulado bajo el nombre del elemento. Puede abrir el menú contextual (hacer clic con el botón secundario) en el elemento y, a continuación, seleccionar Ver problemas oseleccionar y hacer clic izquierdo en el elemento con el Shift subrayado ondulado.

Para mostrar un problema para los elementos con subrayados ondulados en el árbol DOM, siga estos pasos.

1. Abra una página, como la página de demostración,en una nueva pestaña o ventana.

2. Abra DevTools y, a continuación, seleccione la pestaña Elementos.

3. En el árbol DOM, expanda <body> > <header> > <form> . Observe que el <input> elemento tiene un subrayado ondulado.

   

   Problemas con subrayado ondulado en el árbol DOM de la herramienta Elementos

4. Mantenga el mouse sobre el <input> elemento. Una información sobre herramientas muestra información sobre el problema.

5. Abra el menú contextual del elemento con el subrayado ondulado y, a continuación, seleccione Ver problemas. La herramienta Problemas se abre y muestra el problema asociado con ese elemento.

   

   Detalles sobre los problemas de un elemento ondulado subrayado en el árbol DOM

Vea también

• Probar automáticamente una página web para problemas de accesibilidad