tutorial - Depure tanto javascript como c#en ASP.NET Core MVC utilizando VS Code

visual studio code tutorial español pdf

Question

¿Hay alguna forma de establecer puntos de interrupción y depurar javascript y c # al mismo tiempo en el Código VS (en macOS)?

Instalé la extensión del depurador de Chrome y luego creé una nueva aplicación MVC usando dotnet new mvc .

Pero cuando lanzo la aplicación, los puntos de interrupción solo se encuentran en los archivos C #, permanecen atenuados en los archivos js (site.js) porque no se han cargado símbolos.

Estas son mis configuraciones de inicio (lo único que he modificado es el command osx porque chrome no es mi navegador predeterminado en macOS):

"version": "0.2.0",
   "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/Foo.PhotoSite.dll",
            "args": [],
            "cwd": "${workspaceRoot}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": true,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start ${auto-detect-url}"
                },
                "osx": {
                    "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
                },
                "linux": {
                    "command": "xdg-open"
                }
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceRoot}/Views"
            }

Answer 1

Lo que quieres hacer es depurar 2 procesos diferentes. Con tu configuración depuras el servidor. Si quieres depurar el navegador también tienes 2 opciones.

Primera opción, simplemente inicie una segunda sesión de depuración. VS Code iniciará automáticamente la depuración de múltiples objetivos. Deseará iniciar una sesión "adjuntar a Chrome" (consulte a continuación la muestra de configuración) o la sesión "Iniciar Chrome". Después de eso, depura la instancia de Chrome que elegiste o inicias y el servidor.

La segunda opción, posiblemente más conveniente si lo haces mucho, es crear un compuesto. Resultados en la misma cosa, pero puede iniciarlo con un solo clic.
En este caso, puede eliminar las configuraciones del navegador de inicio que inician su navegador a menos que se adjunte a esa instancia.

Para que funcione, puedes probar la configuración de tu navegador por separado. Haga que la depuración de Chrome funcione correctamente (ignore el servidor) y luego combínelo en el compuesto.

Ejemplo con 2 configuraciones de cromo para iniciar o adjuntar:

La configuración debería tener este aspecto: tenga en cuenta que la tomé de mi máquina Windows en caso de que existan notaciones especiales para macOS o diferentes puertos de depuración.

{
    "version": "0.2.0",
    "configurations": [
        {
            // ...your configuration for .NET Core here... 
            // called .NET Core Launch (web)
        }
        {
            "type": "chrome",
            "request": "launch",
            "name": "LaunchChrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            // This one in case you manually start 2 debug sessions.
            // Like first .net core 
            // then attach to the browser that was started.
            "type": "chrome",
            "request": "attach",
            "name": "AttachChrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ],
    "compounds": [
        {
            "name": "Debug MVC and Chrome",
            "configurations": [".NET Core Launch (web)", "LaunchChrome"]
        }
    ]
}

Esencialmente utiliza 2 extensiones de depuración diferentes. La extensión del depurador .NET y la extensión del depurador chrome. De ahí las 2 partes de configuración diferentes.

Referencia:
Microsoft lo llama "multitarget-debugging" en VS Code. Vea los documentos aquí: https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging