Как мне настроить configure Angular и VSCode, чтобы мои точки останова работали?
Как отлаживать Angular с помощью VSCode?
Ответ 1
Протестировано с Angular 5/CLI 1.5.5
- Установите расширение Chrome Debugger
- Создайте
launch.json
(внутри папки .vscode) - Используйте мой
launch.json
(см. Ниже) - Создайте
tasks.json
(внутри папки .vscode). - Используйте мой
tasks.json
(см. Ниже) - Нажмите CTRL + SHIFT + B
- Нажмите F5
launch.json for angular/cli >= 1.3
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}"
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Chrome (Test)",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Chrome (E2E)",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceFolder}/protractor.conf.js"]
}
]
}
tasks.json for angular/cli >= 1.3
{
"version": "2.0.0",
"tasks": [
{
"identifier": "ng serve",
"type": "npm",
"script": "start",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
},
{
"identifier": "ng test",
"type": "npm",
"script": "test",
"problemMatcher": [],
"group": {
"kind": "test",
"isDefault": true
}
}
]
}
Протестировано с Angular 2.4.8
- Установите расширение Chrome Debugger
- Создайте
launch.json
- Используйте мой
launch.json
(см. Ниже) - Запустите NG Live Development Server (
ng serve
) - Нажмите F5
launch.json for angular/cli >= 1.0.0-beta.32
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"userDataDir": "${workspaceFolder}/.vscode/chrome",
"runtimeArgs": [
"--disable-session-crashed-bubble"
]
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200",
"port": 9222,
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
]
}
launch.json for angular/cli < 1.0.0-beta.32
{
"version": "0.2.0",
"configurations": [
{
"name": "Lunch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/src/app",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceFolder}/node_modules/*",
"webpack:///./src/*": "${workspaceFolder}/src/*"
},
"userDataDir": "${workspaceFolder}/.vscode/chrome",
"runtimeArgs": [
"--disable-session-crashed-bubble"
]
},
{
"name": "Attach Chrome",
"type": "chrome",
"request": "attach",
"url": "http://localhost:4200",
"port": 9222,
"webRoot": "${workspaceFolder}/src/app",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceFolder}/node_modules/*",
"webpack:///./src/*": "${workspaceFolder}/src/*"
}
}
]
}
Ответ 2
Похоже, команда VS Code теперь хранит рецепты отладки.
https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome with ng serve",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch Chrome with ng test",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch ng e2e",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
"protocol": "inspector",
"args": ["${workspaceRoot}/protractor.conf.js"]
}
]
}
Ответ 3
Это подробно объясняется на сайте кода Visual Studio: https://code.visualstudio.com/docs/nodejs/angular-tutorial
Ответ 4
Есть два разных способа сделать это. Вы можете запустить новый процесс или присоединиться к существующему.
Ключевым моментом в обоих процессах является одновременная работа dev-сервера webpack и отладчика VSCode.
Запустить процесс
-
В вашем файле
launch.json
добавьте следующую конфигурацию:{ "version": "0.2.0", "configurations": [ { "name": "Angular debugging session", "type": "chrome", "request": "launch", "url": "http://localhost:4200", "webRoot": "${workspaceFolder}" } ] }
-
Запустите сервер разработки Webpack из Angular CLI, выполнив
npm start
- Перейдите к отладчику VSCode и запустите конфигурацию "Сеанс угловой отладки". В результате откроется новое окно браузера с вашим приложением.
Присоединить к существующему процессу
-
Для этого вам нужно запустить Chrome в режиме отладчика с открытым портом (в моем случае это будет
9222
):Mac:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Окна:
chrome.exe --remote-debugging-port=9222
-
Файл
launch.json
будет выглядеть следующим образом:{ "version": "0.2.0", "configurations": [ { "name": "Chrome Attach", "type": "chrome", "request": "attach", "port": 9222, "url": "http://localhost:4200/", "webRoot": "${workspaceFolder}" } ] }
- Запустите сервер разработки Webpack из Angular CLI, выполнив
npm start
- Выберите конфигурацию "Chrome Attach" и запустите ее.
В этом случае отладчик подключается к существующему процессу Chrome вместо запуска нового окна.
Я написал свою собственную статью, где описал этот подход с иллюстрациями.
Простая инструкция, как настроить отладчик для Angular в VSCode
Ответ 5
Вот немного более легкое решение, работает с Angular 2+ (я использую Angular 4)
Также добавлены настройки для Express Server, если вы запустите стек MEAN.
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Angular Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"runtimeArgs": [
"--user-data-dir",
"--remote-debugging-port=9222"
],
"sourceMaps": true,
"trace": true,
"webRoot": "${workspaceRoot}/client/",
"userDataDir": "${workspaceRoot}/.vscode/chrome"
},
{
"type": "node",
"request": "launch",
"name": "Launch Express Server",
"program": "${workspaceRoot}/server/bin/www",
"outFiles": [
"${workspaceRoot}/out/**/*.js"
]
}
]
}
Ответ 6
Можно использовать этот конфиг:
{
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}