Отладка кода Visual Studio с помощью AngularJS

у меня была аналогичная проблема, но мой проект также включал webpack, который привел к сбою вышеуказанных решений. После обхода интернета я нашел решение в потоке на github:

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

в любом случае, это то, что было сделано.

Примечание: перед запуском необходимо проверить наличие последней версии кода visual studio и также установили расширение под названием 'отладчик для Chrome ' в рамках VS кода.

во-первых, в './ config / webpack.разработка.js'

• использовать => devtool:'source-map'
• вместо => devtool:'дешево-модуль-источник-карта'

затем установите и используйте плагин write-file-webpack -:

• npm установить --сохранить write-file-webpack-плагин

добавить плагин './ config / webpack.разработка.Яш', добавив:

• const WriteFilePlugin = require ('write-file-webpack-plugin');

под плагинами Webpack вверху. Продолжайте добавлять:

• новый WriteFilePlugin()

в список плагинов после Нового нового DefinePlugin(), я.е

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

это гарантирует, что исходные карты записываются на диск

наконец, моя запуск.json приведен ниже.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

обратите внимание на отсутствие '/ dist/ ' в webroot. с помощью этой конфигурации, source-maps находятся внутри ./р/, но они указывают на ./ src/. vscode добавляет абсолютный путь к рабочей области, и правильно разрешает файл.

мы использовали Gulp.js и должен был добавить следующее:

"sourceMapPathOverrides": {
    "/source/*":"${workspaceRoot}/[directory where all of our mappings are located]/*"
 }

надеюсь, это поможет кому-то, кто пытается отладить приложение angularjs с кодом VS.

вот пример конфига:

{
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "[your url here]",
        "webRoot": "${workspaceRoot}/[directory where your app is located]",
        "sourceMaps": true,        
        "sourceMapPathOverrides": {
            "/source/*":"${workspaceRoot}/[directory where your app is located and any additional .js files that are required by your app]/*"
        },        
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "runtimeArgs": [
            "--disable-session-crashed-bubble"
        ]
    }
]
}