Отлаживайте как javascript, так и С# в ASP.NET Core MVC, используя VS Code

Есть ли способ установить контрольные точки и отлаживать javascript и С# одновременно в VS Code (на macOS)?

Я установил chrome debugger extension, а затем создал новое приложение MVC с помощью dotnet new mvc.

Но когда я запускаю точку останова приложения, попадают только в файлы С#, они остаются серыми в файлах js (site.js), потому что никакие символы не загружены.

Это мои настройки запуска (единственное, что я изменил, это osx command, потому что chrome не является моим браузером по умолчанию в 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"
            }

Ответы

Ответ 1

Что вы хотите сделать, так это отладить 2 разных процесса. С вашей конфигурацией вы отлаживаете сервер. Если вы хотите отлаживать браузер, у вас есть 2 варианта.

Первый вариант, просто запустите второй сеанс отладки. VS Code автоматически начнет многоцелевую отладку. Вы захотите начать сеанс "attach to chrome" (см. Ниже пример конфигурации) или сеанс "Запустить хром". После этого вы отлаживаете экземпляр chrome, который вы выбрали или запустили, и сервер.

Второй вариант, возможно, более удобный, если вы делаете это много, чтобы создать соединение. Результаты в одном и том же, но вы можете начать его одним щелчком.
В этом случае вы можете удалить настройки браузера запуска, которые запускают ваш браузер, если вы не присоедините к этому экземпляру.

Чтобы запустить его, вы можете попробовать настроить браузер отдельно. Делайте хром-отладку корректной (игнорируйте сервер), а затем объединяйте ее в состав.

Пример с 2 хромированными конфигурациями для запуска или присоединения:

Конфигурация должна выглядеть так: Пожалуйста, имейте в виду, что я взял его с моей машины Windows, если есть специальные обозначения для macOS или разных портов отладки.

{
    "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"]
        }
    ]
}

По сути, вы используете 2 разных расширения для отладки. Расширение отладчика .NET и расширение хром-отладчика. Следовательно, две различные части конфигурации.

Справка:
Microsoft называет это "multitarget-debugging" в VS Code. См. Документы здесь: https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging

Ответ 2

serverReadyAction рекомендуется более launchBrowser

если вы создаете новое приложение реактивного сетевого трафика с браузером dotnet new reactredux -n testreactredux, запускается, но все еще не отлаживается, пока не измените action на debugWithChrome следующим образом

{
    "version": "0.2.0",    
    "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/netcoreapp3.0/testreactredux.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
            "serverReadyAction": {
                "action": "debugWithChrome", // <---- CHANGE HERE ( default is 'openExternally' )
                "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        }
    ]
}

таким образом, если я установлю точку останова на отладчик кода С#, произойдет

enter image description here

и либо на JavaScript (я использовал машинопись TSX)

enter image description here

Я заметил, что точка останова на js-коде при запуске все еще остается серой, но затем она останавливается правильно.