如何使用VSCode調試Angular？

64

安裝Chrome Debugger Extension
創建launch.json（內.vscode文件夾）
用我launch.json（見下文）
創建tasks.json（內.vscode文件夾）
用我tasks.json（見下）
按CTRL + SHIFT + 乙
按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": "${workspaceRoot}" 
    }, 
    { 
     "name": "Attach Chrome", 
     "type": "chrome", 
     "request": "attach", 
     "url": "http://localhost:4200/#", 
     "webRoot": "${workspaceRoot}" 
    }, 
    { 
     "name": "Launch Chrome (Test)", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:9876/debug.html", 
     "webRoot": "${workspaceRoot}" 
    }, 
    { 
     "name": "Launch Chrome (E2E)", 
     "type": "node", 
     "request": "launch", 
     "program": "${workspaceRoot}/node_modules/protractor/bin/protractor", 
     "protocol": "inspector", 
     "args": ["${workspaceRoot}/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 
     } 
     } 
    ] 
    }

測試與角5/CLI 1.5.5

安裝Chrome Debugger Extension
創建launch.json
用我launch.json（見下文）
啓動NG直播開發服務器（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": "${workspaceRoot}", 
     "sourceMaps": true, 
     "userDataDir": "${workspaceRoot}/.vscode/chrome", 
     "runtimeArgs": [ 
     "--disable-session-crashed-bubble" 
     ] 
    }, 
    { 
     "name": "Attach Chrome", 
     "type": "chrome", 
     "request": "attach", 
     "url": "http://localhost:4200", 
     "port": 9222, 
     "webRoot": "${workspaceRoot}", 
     "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": "${workspaceRoot}/src/app", 
     "sourceMaps": true, 
     "sourceMapPathOverrides": { 
     "webpack:///./~/*": "${workspaceRoot}/node_modules/*", 
     "webpack:///./src/*": "${workspaceRoot}/src/*" 
     }, 
     "userDataDir": "${workspaceRoot}/.vscode/chrome", 
     "runtimeArgs": [ 
     "--disable-session-crashed-bubble" 
     ] 
    }, 
    { 
     "name": "Attach Chrome", 
     "type": "chrome", 
     "request": "attach", 
     "url": "http://localhost:4200", 
     "port": 9222, 
     "webRoot": "${workspaceRoot}/src/app", 
     "sourceMaps": true, 
     "sourceMapPathOverrides": { 
     "webpack:///./~/*": "${workspaceRoot}/node_modules/*", 
     "webpack:///./src/*": "${workspaceRoot}/src/*" 
     } 
    } 
    ] 
}

與角2.4.8

來源

2017-02-27 21:27:03 Asesjix

+4

你知道如何啓動'NG Live Development Server'，然後在一個'F5'點擊啓動'Chrome'嗎？ –

+0

我也有同樣的問題。 – JimiOr2

+1

抱歉，這是不可能的，因爲任務「ng serve」必須在preLaunchTask中啓動。「ng serve」必須永久運行，因此「preLaunchTask」未完成，這意味着vs代碼不會啓動調試過程。但我添加了一個新的配置，應該使工作更快一點;-) – Asesjix

0

這裏測試是有點輕解決方案，具有角工作2+（我用角4）

如果運行MEAN堆棧，還添加了Express Server的設置。

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

來源

2017-05-25 11:45:17

+0

您可以使用此配置在角度的同時調試/斷點您的服務器端代碼嗎？ – Mika571

15

看起來像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"] 
    }  
    ] 
}

來源

2017-07-27 04:25:46

如何使用VSCode調試Angular？

回答

相關問題