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

127

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

angular  debugging  webpack  visual-studio-code 
— Asesjix
स्रोत
आपका मतलब क्या है? वे कैसे काम नहीं करते हैं?
— 21
2
@ टायलरएच, यह एक गाइड होना चाहिए कि यह कैसे काम करता है। यह संशोधित लॉन्च के बिना काम नहीं करता है। जेसन।
— अस्सजिक्स

जवाबों:

178

कोणीय 5 / सीएलआई 1.5.5 के साथ परीक्षण किया गया

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

एंगुलर 2.4.8 के साथ परीक्षण किया गया

  1. Chrome डीबगर एक्सटेंशन स्थापित करें
  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": "${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/*"
      }
    }
  ]
}
— Asesjix
स्रोत
7
क्या आप जानते हैं कि कैसे शुरू करें NG Live Development Serverऔर फिर Chromeसिर्फ एक F5क्लिक में लॉन्च करें?
— मरदान गोचमुराडोव
2
खेद है कि यह संभव नहीं है क्योंकि कार्य "एनजी सर्व" को प्रीलांचटैस्क में शुरू करना होगा। "एनजी सर्व" स्थायी रूप से चलना चाहिए और इस प्रकार "प्रीलांचटस्क" पूरा नहीं हुआ है जिसका अर्थ है कि बनाम कोड डिबग प्रक्रिया शुरू नहीं करता है। लेकिन मैंने एक नया कॉन्फ़िगरेशन जोड़ा है जिससे काम थोड़ा तेज हो जाना चाहिए ;-)
— Asesjix
1
स्पष्ट और संक्षिप्त उत्तर। यह अच्छा होगा यदि आप के बारे में संक्षेप में समझा सकता हैं launch.jsonऔर tasks.jsonयहाँ से करता है। जैसा कि मैंने समझा launch.jsonकि नोड सर्वर लॉन्च करना है और 8080 पोर्ट सुनना है, और एप्लिकेशन को चलाने के लिए कमांड का tasks.jsonउपयोग करने npmऔर निष्पादित करने का निर्देश देता है ng serve।
— शैजुत
@Zachscs किस कोणीय संस्करण का आपने उपयोग किया?
— एसेजिक्स
1
मुझे एक ही समस्या थी, ब्रेकप्वाइंट सेट नहीं किया जा रहा था, अंत तक मुझे एहसास हुआ कि मेरा वेबरोट गलत था। मेरे पास वेबरूट ("वेबरूट": "$ {वर्कस्पेसफॉल्डर}") के बजाय $ {वर्कस्पेसफॉल्डर} / मेरे ऐप-फोल्डर के लिए डिफ़ॉल्ट मूल्य था
— जोसेफ सिम्पसन
48

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

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"]
    }      
  ]
}
— लेवी फुलर
स्रोत
10

ऐसा करने के दो अलग-अलग तरीके हैं। आप एक नई प्रक्रिया शुरू कर सकते हैं या संलग्न कर सकते हैं किसी मौजूदा को ।

दोनों प्रक्रियाओं में मुख्य बिंदु वेबपैक देव सर्वर और VSCode डिबगर एक ही समय में चल रहा है ।

एक प्रक्रिया शुरू करें

  1. अपनी launch.jsonफ़ाइल में निम्न कॉन्फ़िगरेशन जोड़ें:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Angular debugging session",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

  2. निष्पादित करके कोणीय सीएलआई से वेबपैक देव सर्वर चलाएँ npm start

  3. VSCode डिबगर पर जाएं और "कोणीय डिबगिंग सत्र" कॉन्फ़िगरेशन चलाएं। नतीजतन, आपके आवेदन के साथ नई ब्राउज़र विंडो खोली जाएगी।

किसी मौजूदा प्रक्रिया से संलग्न करें

  1. उसके लिए आपको खुले पोर्ट के साथ डीबगर मोड में Chrome चलाने की आवश्यकता है (मेरे मामले में यह होगा 9222):

    मैक:

    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

    खिड़कियाँ:

    chrome.exe --remote-debugging-port=9222

  2. launch.json फ़ाइल निम्न तरीके से दिखाई देगी:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}
  3. निष्पादित करके कोणीय सीएलआई से वेबपैक देव सर्वर चलाएँ npm start
  4. "क्रोम अटैच" कॉन्फ़िगरेशन चुनें और इसे चलाएं।

इस मामले में, डिबगर एक नई विंडो लॉन्च करने के बजाय मौजूदा क्रोम प्रक्रिया से जुड़ा हुआ है।

मैंने अपना लेख लिखा, जहाँ मैंने दृष्टांतों के साथ इस दृष्टिकोण का वर्णन किया।

सरल निर्देश कैसे VSCode में कोणीय के लिए डिबगर कॉन्फ़िगर करें

— skryvets
स्रोत
धन्यवाद, हर बार क्रोम को शुरू करने के लिए मुझे यह कमांड चलाना होगा chrome.exe --remote-debugging-port=9222। यदि
— ऑनटाइम
आपके क्रेडेंशियल्स के आधार पर, आप विंडोज़ स्टार्ट मेनू में क्रोम पर राइट क्लिक करने, प्रॉपर्टीज़ को हिट करने और वहां फ्लैग जोड़ने में सक्षम हो सकते हैं। यह मेरे लिए मेरे काम के कंप्यूटर पर काम नहीं करता है, इसलिए मैंने विंडोज़ के लिए गिट बैश में कमांड को अलियास किया।
— vitale232
7

यह दृश्य स्टूडियो कोड साइट पर विस्तार से बताया गया है: https://code.visualstudio.com/docs/nodejs/angj-tutorial

— विक्टर Ionescu
स्रोत
क्या आपका मतलब कोड था ।visualstudio.com/docs/nodejs/… ? यदि आप अपना उत्तर संपादित करना चाहते हैं तो # _debugging- कोणीय अंक सीधे दिलचस्प बिंदु पर ...
— Pipo
@Pipo नहीं, मेरा मतलब नोडज नहीं था, मैं सर्वर साइड पर नोडज का उपयोग नहीं करता, इसलिए मुझे नहीं पता होगा।
— विक्टर Ionescu
3

इस विन्यास का उपयोग कर सकते हैं:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}
— अहमद आगजादेह
स्रोत
2

यहाँ एक हल्का सा हल है, Angular 2+ के साथ काम करता है (मैं Angular 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"
      ]
    }
  ]
}
— इसक ला फ्लेर
स्रोत
क्या आप इस कॉन्फ़िगरेशन के साथ कोणीय के रूप में उसी समय अपने सर्वर साइड कोड को डिबग / ब्रेकपॉइंट कर सकते हैं?
— मिका ५ .१
@ Mika571 दुर्भाग्य से ... मैंने अभी यह कोशिश की। मैं एक ही समय में सर्वर और क्लाइंट पक्ष को डीबग करना चाहूंगा।
— लेनियल मैकाफेर्री
1

@Asjix का उत्तर बहुत गहन है, लेकिन जैसा कि कुछ ने बताया है, अभी भी ng serveक्रोम में कोणीय ऐप को शुरू करने और फिर शुरू करने के लिए कई इंटरैक्शन की आवश्यकता है । मुझे निम्नलिखित कॉन्फ़िगरेशन का उपयोग करके एक क्लिक के साथ यह काम मिला। @ Asesjix के उत्तर से मुख्य अंतर कार्य प्रकार अब है shellऔर कमांड कॉल startइससे पहले ng serveकि ng serveयह अपनी प्रक्रिया में मौजूद हो सकता है और लॉन्च से डीबगर को ब्लॉक नहीं करता है:

tasks.json:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "ng serve",
        "type": "shell",
        "command": "\"start ng serve\""
      },
      {
        "label": "ng test",
        "type": "shell",
        "command": "\"start ng test\"",
      }
    ]
  }

launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch in Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng serve"
        }
    ]
}
— ubiquibacon
स्रोत
0

मेरे मामले में मैंने मूल कोणीय प्रोजेक्ट फ़ोल्डर ट्री का उपयोग नहीं किया था और मुझे पता था कि कुछ गलत था webRoot/{workspaceFolder} बिट के लेकिन मेरे सभी प्रयोग का कोई परिणाम नहीं निकला। एक और एसओ जवाब से एक टिप मिला, जो मुझे फिर से मिल जाए तो मैं लिंक कर दूंगा।

मुझे {workspaceFolder}रनटाइम पर चर की सामग्री को खोजने में मदद मिली और फिर इसे मेरे "src" फ़ोल्डर के स्थान में संशोधित किया गया जिसके तहत आपके पास "ऐप / *" है। इसे खोजने के लिए, मैंने preLaunchTaskअपनी लॉन्च.जॉसन फ़ाइल में एक जोड़ा और इसके मूल्य को आउटपुट करने के लिए एक कार्य किया {workspaceFolder}।

launch.json , जो क्रोम डीबगर को स्थापित करने के बाद दिखाई देता है

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/newProjectRoot/",
      "preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
    }
  ]
}

कार्य । डिफ़ॉल्ट रूप से मौजूद नहीं है। Ctrl + Shift + p दबाएं और मुझे लगता है कि इसे 'अन्य कमांड के लिए कार्य बनाएं' या कुछ इसी तरह का है। कार्यों के बाद इसे देखने के लिए प्रतीत नहीं किया जा सकता है। जेटसन बनाया गया है। आप फ़ाइल को लॉन्च के समान स्थान पर भी बना सकते हैं

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Echo values",
      "command": "echo",
      "args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
      "type": "shell"
    }
  ]
}

एक बार जब मुझे $ {workspaceFolder} का मूल्य पता था, तो मैंने इसे अपने नए प्रोजेक्ट ट्री में अपने src फोल्डर को इंगित करने के लिए तय किया और यह सब काम कर गया। डिबगिंग को ng serveया तो प्रीलेच कार्य के रूप में या निर्माण के भाग के रूप में (ऊपर के उदाहरण) या कमांड प्रॉम्प्ट में चलाने की आवश्यकता होती है।

यहां उन सभी चरों का लिंक दिया गया है जिनका आप उपयोग कर सकते हैं:

— एश
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.