वीएससीओडी के साथ कोणीय डीबग कैसे करें?

Question

मैं कोणीय और वीएससीओडी को कैसे कॉन्फ़िगर कर सकता हूं ताकि मेरे ब्रेकपॉइंट्स काम कर सकें?

Answer 1

1. स्थापित Chrome Debugger Extension
2. launch.json (.vscode अंदर फ़ोल्डर) बनाएं
3. का उपयोग करें मेरी launch.json (नीचे देखें)
4. tasks.json (.vscode अंदर फ़ोल्डर) बनाएं
5. का उपयोग करें मेरी tasks.json (नीचे देखें)
6. प्रेस CTRL + SHIFT + बी
7. प्रेस 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

01 के साथ परीक्षण किया गया

---

1. स्थापित Chrome Debugger Extension
2. launch.json
3. का उपयोग करें बनाएं अपना launch.json (नीचे देखें)
4. प्रारंभ एनजी लाइव विकास सर्वर (ng serve)
5. प्रेस 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

Answer 2

यहाँ के साथ परीक्षण किया गया, समाधान थोड़ा हल्का कोणीय के साथ काम करता 2+

(मैं कोणीय 4 का उपयोग कर रहा) यदि आप 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" 
     ] 
    } 
    ] 
} 

Answer 3

ऐसा लगता है कि वीएस कोड टीम अब डिबगिंग व्यंजनों को संग्रहीत कर रही है।

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