Compartir a través de

Análisis de problemas en línea y en directo

  • Artículo

Los problemas del código fuente (.html, .csso .js archivos) se resaltan con subrayados ondulados. Puede inspeccionar el problema y obtener información detallada sobre cuál es el problema, cómo corregirlo y dónde encontrar más información. Para inspeccionar el problema, haga clic en el código que tiene el subrayado ondulado:

Un problema de accesibilidad notificado dentro de un fragmento de código que muestra cómo corregir el problema y dónde encontrar más información

Esta característica requiere Node.js y npm (Administrador de paquetes de Node). Vea Paso 4: Instalar Node.js y el Administrador de paquetes de Nodo (npm) en Instalación de la extensión DevTools para Visual Studio Code.

Esta característica está activada de forma predeterminada; La casilla Webhint está seleccionada en Configuración. Para activar o desactivar esta característica, seleccione Barra> de actividad Herramientas > deMicrosoft Edge a la derecha de Destinos>Más acciones (...) >Abrir configuración> active o desactive la casilla Webhint:

Casilla webhint en Configuración

Para ver todos los problemas del archivo, haga clic en Ver problema:

Un problema resaltado en el código fuente con una barra de navegación que explica el problema y botones para pasar a los problemas siguientes y anteriores

En la pestaña Problemas del panel inferior se enumeran todos los problemas que DevTools encontró en los archivos abiertos actualmente:

La pestaña Problemas del panel inferior de Visual Studio Code muestra todos los problemas que se encuentran en los archivos del proyecto.

Vídeo: Problemas avanzados de filtrado en Edge DevTools y VSCode

Imagen en miniatura del vídeo

Actualización activa de informes de problemas

Los problemas se evalúan en directo mientras edita el código. A medida que escribe, obtendrá comentarios sobre los problemas que se encuentren y cómo corregirlos:

Un posible problema que se explica en un elemento de salida

Correcciones rápidas automatizadas y filtrado de problemas

La extensión Microsoft Edge DevTools para Visual Studio Code incluye una característica de corrección rápida . Mediante el uso de correcciones rápidas, puede personalizar los informes de errores de la extensión para satisfacer las necesidades del proyecto actual.

Al mantener el puntero sobre un elemento que tiene un problema, se obtiene un icono de bombilla (icono de bombilla) que indica que hay correcciones rápidas disponibles:

Elemento delimitador con un atributo href específico del protocolo resaltado como un problema, con un subrayado ondulado y un icono de bombilla encima

Al hacer clic en el icono de bombilla se muestra una lista de opciones. Por ejemplo, si agregó un vínculo que tiene una dirección URL relativa al protocolo, obtendrá la siguiente lista de corrección rápida entre la que elegir:

El panel Corrección rápida se abrió junto al elemento delimitador con el error, ofreciendo varias opciones de corrección rápida.

Puede seleccionar la corrección rápida que quiera usar para resolver el problema o dejar de notificarlo como un problema:

  • Corrección del problema "no-protocol-relative-urls": agrega el prefijo https:// de dirección URL que falta al vínculo.

  • Deshabilite las sugerencias "no-protocol-relative-urls" en este proyecto : crea un .hintrc archivo de configuración en la carpeta del proyecto (si aún no existe) y indica a la extensión que no notifique este problema para este proyecto.

  • Editar .hintrc para este proyecto : abre el .hintrc archivo de configuración para que pueda editarlo para personalizar los informes de errores de la extensión.

Vea también