Visual Studio para el desarrollo web

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.

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.

   

3. Seleccione Depuración de> scriptshabilitada.

   

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 Descargar canales de Microsoft Edge Insider para descargar uno.

   

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.

   

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.

   

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.

   

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.

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.

   

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 .

   

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 Developer Tools para Visual Studio.

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 ():

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

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

La herramienta Inspeccionar () y Alternar pantallacast () están disponibles, y el menú Más herramientas () ofrece las herramientas Problemas, Condiciones de red y Bloqueo de solicitudes de red :

Consulte también:

• Edge Developer Tools para Visual Studio, en Visual Studio DevBlogs.

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.