Compartir a través de

Visual Studio para el desarrollo web

  • Artículo

Microsoft Visual Studio es un entorno de desarrollo integrado (IDE). Úsela para editar, depurar, compilar y publicar las aplicaciones web. Visual Studio es un programa rico en características que se puede usar para muchos aspectos del desarrollo web.

Además del editor estándar y el depurador que proporcionan la mayoría de los IDE, Visual Studio incluye características para facilitar el proceso de desarrollo, entre las que se incluyen:

  • Compiladores.
  • Herramientas de finalización de código.
  • Diseñadores gráficos.
  • Y muchas más características.

Si aún no usa Visual Studio, vaya a Descargar Visual Studio para descargarlo.

Actualmente, Visual Studio 2019 admite la depuración de JavaScript en Microsoft Edge para las aplicaciones de ASP.NET Framework y ASP.NET Core. Para usar Visual Studio para depurar Microsoft Edge, siga estos pasos.

Inicio de Microsoft Edge

Siga los pasos de esta sección para usar Visual Studio para hacer lo siguiente:

  • Compile la aplicación ASP.NET y ASP.NET Core.
  • Inicie un servidor web.
  • Inicie Microsoft Edge.
  • Conecte el depurador de Visual Studio con un solo botón.

El flujo de trabajo simplificado permite depurar JavaScript que se ejecuta en Microsoft Edge directamente desde el IDE.

Creación de una nueva aplicación web ASP.NET Core

En primer lugar, cree una nueva aplicación web de ASP.NET Core, como se indica a continuación:

  1. Abra Visual Studio 2019 y seleccione Crear un nuevo proyecto.

  2. En el cuadro de búsqueda de la pantalla siguiente, escriba react.

  3. Seleccione ASP.NET Core con React.js en la lista de plantillas y, a continuación, Siguiente.

Creación de una nueva aplicación web de ASP.NET Core con React.js

Esta plantilla deReact.js especifica cómo integrar React.js con una aplicación de ASP.NET Core.

Ahora ha creado un proyecto para una aplicación web de ASP.NET Core.

Inicio de Microsoft Edge desde Visual Studio

A continuación, ejecute y depure el proyecto de aplicación web de ASP.NET Core en Visual Studio, como se indica a continuación:

  1. Abra ClientApp/src/components/Counter.js.

  2. Seleccione la lista desplegable situada junto al botón Reproducir verde y IIS Express.

    Lista desplegable junto al botón reproducir verde y IIS Express

  3. Seleccione Depuración de> scriptshabilitada.

    Activar la depuración de scripts en Visual Studio

  4. En la misma lista desplegable, seleccione Explorador> web el canal de vista previa de Microsoft Edge que quiere que Visual Studio inicie, como Microsoft Edge Canary, Dev o Beta. Si aún no usa uno de los canales de vista previa de Microsoft Edge, vaya a Convertirse en microsoft edge insider para descargar uno.

    Seleccione el canal de vista previa de Microsoft Edge que desea que Visual Studio inicie.

  5. Seleccione el botón reproducir verde. Visual Studio compila la aplicación, inicia el servidor web, inicia Microsoft Edge y navega a https://localhost:44362/ o cualquier puerto especificado en launchSettings.json.

    Microsoft Edge se inicia desde Visual Studio

Continúe con los pasos siguientes.

Depuración de código JavaScript que se ejecuta en Microsoft Edge

  1. Vuelva a Visual Studio para establecer un punto de interrupción.

  2. En Counter.js, establezca un punto de interrupción en la línea 13 seleccionando el canalón situado junto a la línea.

    Seleccione el canalón situado junto a la línea 13 en Counter.js para establecer un punto de interrupción en Visual Studio.

  3. Vuelva a la instancia de Microsoft Edge que inició Visual Studio.

  4. Seleccione Contador en el menú de navegación de la parte superior de la página web y, a continuación, seleccione Incrementar.

    La página Contador de nuestra aplicación web ASP.NET Core

  5. El depurador de JavaScript en Visual Studio alcanza el punto de interrupción establecido en Counter.js. Visual Studio ahora pausa el tiempo de ejecución de JavaScript que se ejecuta en Microsoft Edge y puede recorrer el script línea a línea.

Visual Studio pausa la ejecución de JavaScript en Microsoft Edge

En el enfoque anterior, ha iniciado Microsoft Edge desde Visual Studio. Como alternativa, puede asociar el depurador de Visual Studio a una instancia de Microsoft Edge que ya se esté ejecutando, como se describe a continuación.

El ejemplo era simplemente una demostración secundaria de la funcionalidad disponible en Visual Studio. Para obtener más información sobre la funcionalidad en Visual Studio 2019, consulte la documentación de Visual Studio.

Asociación del depurador de Visual Studio a una instancia en ejecución de Microsoft Edge

Para adjuntar el depurador de Visual Studio a una instancia de Microsoft Edge que ya se está ejecutando:

  1. Asegúrese de que no hay instancias en ejecución de Microsoft Edge.

  2. Desde la línea de comandos, ejecute el siguiente comando:

    start msedge --remote-debugging-port=9222

  3. En Visual Studio, seleccione Depurar>adjuntar al proceso o Ctrl+Alt+P.

    Selección de

  4. En el cuadro de diálogo Asociar al proceso, establezca Tipo de conexión en WebSocket del protocolo Devtools de Chrome (sin autenticación).

  5. En el cuadro de texto Conectar destino , escriba http://localhost:9222/ y presione Entrar.

  6. Revise la lista de pestañas abiertas que tiene en Microsoft Edge que se enumeran en la sección Procesos disponibles .

    Configuración del cuadro de diálogo

  7. Seleccione la pestaña que desea depurar de la lista y, a continuación, seleccione Asociar.

  8. En el cuadro de diálogo Seleccionar tipo de código, seleccione JavaScript (Microsoft Edge - Chromium) y seleccione Aceptar.

El depurador de Visual Studio ahora está asociado a Microsoft Edge. Puede pausar la ejecución de JavaScript, establecer puntos de interrupción y ver console.log() instrucciones directamente en la ventana Depurar salida de Visual Studio.

Extensión Edge DevTools para Visual Studio

Depure los proyectos de ASP.NET en Visual Studio con edge Developer Tools. Puede insertar las Herramientas de desarrollo de Microsoft Edge en Microsoft Visual Studio para depurar los proyectos de ASP.NET en directo. Descargue Microsoft Edge Developers Tools para Visual Studio (VERSIÓN PRELIMINAR) desde Visual Studio Marketplace.

Para usar la extensión:

  1. Asegúrese de que Visual Studio 2022 y la carga de trabajo ASP.NET están instaladas.

  2. Configure Web Live Preview como el Web Forms Designer predeterminado, tal como se describe en la página anterior.

  3. Abra un proyecto de ASP.NET.

  4. Abra una página web del proyecto en la ventana Diseño .

  5. En la parte superior izquierda de la ventana Diseño , haga clic en el botón Open Edge DevTools (icono Open Edge DevTools):

Un proyecto de ASP.NET, abriendo Edge DevTools

Se abre Edge DevTools para Visual Studio, con la herramienta Elementos seleccionada:

Herramientas de desarrollo de Microsoft Edge para Visual Studio: herramienta Elements de DevTools

La herramienta Red también está abierta de forma predeterminada:

Herramientas de desarrollo de Microsoft Edge para Visual Studio: herramienta de red de DevTools

La herramienta Inspeccionar (icono inspeccionar herramienta) y Alternar pantallacast (alternar icono de difusión de pantalla) están disponibles, y el menú Más herramientas (más herramientas icono) ofrece la herramienta Problemas , la herramienta Condiciones de red y la herramienta de bloqueo de solicitudes de red :

La ventana Edge DevTools de Visual Studio, desacoplada

Consulta también:

Ponerse en contacto con el equipo de Microsoft Visual Studio

Los equipos de Microsoft Visual Studio y Microsoft Edge quieren obtener más información sobre cómo trabajar con JavaScript en Visual Studio. Para enviar sus comentarios, seleccione el icono Enviar comentarios en Visual Studio o tweet @VisualStudio and @EdgeDevTools.

Icono Enviar comentarios en Visual Studio

Consulte también

Externo: