दृश्य स्टूडियो कोड के साथ डीबग और रन Angular2 टाइपस्क्रिप्ट?

Question

दृश्य स्टूडियो कोड के साथ डीबग और रन Angular2 टाइपस्क्रिप्ट?

मैं VS कोड https://angular.io/guide/quickstart के साथ Angular2 टाइपस्क्रिप्ट एप्लिकेशन को डीबग करने का प्रयास कर रहा हूं

क्या कोई कृपया डीएस कोड से डिबग और रन करने के लिए कदम साझा कर सकता है?

Answer 1

बहुत खोजबीन के बाद, मुझे ये चरण मिले-

शुरू करने से पहले, सुनिश्चित करें कि आपके पास वीएस कोड का नवीनतम संस्करण है। आप नवीनतम संस्करण को सत्यापित कर सकते हैं - सहायता> अपडेट के बारे में या इसके बारे में जाँच करें।

1. एक्सटेंशन इंस्टॉल करें जिसे 'डीबगर के लिए क्रोम' कहा जाता है। एक बार पूरा स्थापित होने के बाद, वीएस कोड को पुनरारंभ करें।

2. डीबग विंडो पर जाएं, Chrome का उपयोग करके लॉन्च.जॉन खोलें।

3. Launch.json कॉन्फ़िगरेशन अनुभाग में, कॉन्फ़िगरेशन के नीचे का उपयोग करें

   {
       "name": "Launch localhost with sourcemaps",
       "type": "chrome",
       "request": "launch",
       "url": "http://localhost:3000/Welcome",
       "sourceMaps": true,
       "webRoot": "${workspaceRoot}"
   }
   

4. Tsconfig.json में, सुनिश्चित करें कि आपके पास "sourceMap": सच है

यह आपकी डिबग वातावरण सेटिंग्स को पूरा करता है। अब, डिबगिंग शुरू करने से पहले, सुनिश्चित करें कि आपके सभी मौजूदा Chrome.exe इंस्टेंस बंद हैं। टास्क मैनेजर से सत्यापित करें या डॉस कमांड 'किलॉल क्रोम' का उपयोग करें

5. अपने प्रोजेक्ट को चलाएँ, npm स्टार्ट कमांड और क्रोम को डिफ़ॉल्ट ब्राउज़र के रूप में उपयोग करें।

6. एक बार आवेदन सफलतापूर्वक चलाए जाने के बाद, आपको पोर्ट नंबर प्राप्त होगा। URL को क्रोम ब्राउज़र से कॉपी करें और ऊपर url सेक्शन में पेस्ट करें। (नोट: यदि आप अपने आवेदन में रूटिंग का उपयोग कर रहे हैं तो url ऊपर होगा अन्यथा यह index.html आदि समाप्त हो जाएगा)

7. अब, जहाँ भी आप अपनी टाइपस्क्रिप्ट फ़ाइलों में चाहते हैं, ब्रेकप्वाइंट लगाएं।

8. फिर से, वीएस कोड में डिबग विंडो पर जाएं, और रन को हिट करें। डीबगर से जुड़ा आपका टैब / उदाहरण नीचे की तरह दिखेगा।

Comments

समझ में नहीं आ रहा है। 1. जो स्थापित करने के लिए विस्तार। 2. Launch.json कहाँ है?

— azulay7

@ azulay7 क्या आप पहली बार VScode का उपयोग कर रहे हैं? इसका वीएसकोड विजुअल स्टूडियो 2015 आईडीई नहीं है। वैसे भी, बाईं ओर, आपको डीबग विकल्प दिखाई देगा (या CTRL + SHFT + D का उपयोग करें) डिबग विंडो खोलने के लिए क्लिक करें। एक बार जब आप डिबग विंडो खोलते हैं, तो डिबग विंडो के ऊपर दाईं ओर आपको Open Launch.json के लिए विकल्प दिखाई देगा । क्रोम एक्सटेंशन के लिए, आपको बाईं ओर एक्सटेंशन विकल्प (या CTRL + SHFT + X का उपयोग करना) दिखाई देगा। एक बार जब आप एक्सटेंशन विंडो खोलते हैं, तो क्रोम के लिए डीबगर की खोज करें इस एक्सटेंशन को इंस्टॉल करें। आपको VScode पुनः आरंभ करना होगा। उम्मीद है की यह मदद करेगा।

— संक्राति

मैं "ओपन लॉन्च.जॉन" से भी जूझ रहा था। चरण इस प्रकार हैं: बाएं साइडबार में "डीबग" आइकन पर क्लिक करें, फिर डिबग विंडो के ऊपरी दाएं कोने में कॉगव्हील पर क्लिक करें और यदि यह दिखाई देता है तो ड्रॉप-डाउन सूची से "क्रोम" चुनें।

— इवान क्रिवाकोव

किसी और को मिल रहा हैFailed to load resource: net::ERR_CONNECTION_REFUSED (http://localhost:3000/)

— benscabbia

मुझे भी डिबग पोर्ट पर कनेक्शन त्रुटि मिल रही है? HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:9222लोकलहोस्ट फाइन पर लोड हो रहा है।

— मंगूप

Answer 2

UserDataDir निर्दिष्ट करें - यह आपके द्वारा पहले से चल रहे अन्य Chrome उदाहरणों के साथ टकराव से बचाएगा। मैंने देखा है कि इसकी वजह से, Chrome आपके द्वारा निर्दिष्ट किसी भी पोर्ट पर सुनना बंद कर देता है। नीचे मैं क्या उपयोग करता हूं और यह बहुत अच्छा है!

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

@Reecebradley - GitHub का धन्यवाद : लक्ष्य से कनेक्ट नहीं हो सकता: ECONNREFUSED कनेक्ट करें

Comments

अभी भी किसी को समस्याएँ मिल सकती हैं .. मैंने अपना कोड आधार C: (रूट) ड्राइव में स्थानांतरित कर दिया, डीबग ठीक काम कर रहा था।

— हाईटेक

कोणीय 2 क्रोम डिबगिंग के काम नहीं करने के अजीब कारण हैं। कुछ समय चेकइन सभी स्रोत नियंत्रण में हैं, एक साफ फ़ोल्डर ले लो, नवीनतम, डीबग काम करना शुरू कर देता है ... कारण मुझे पता नहीं है ..:

— हाइडेची

मैं नीचे लॉन्च जसन का उपयोग कर रहा हूं - लगातार डिबग मोड कोड \ 0 /: {"संस्करण": "0.2.0", "कॉन्फ़िगरेशन" चला सकता है: [{"नाम": "स्रोत के साथ लोकलहोस्ट लॉन्च करें", "प्रकार": "क्रोम", "अनुरोध": "लॉन्च", "url": " लोकलहोस्ट: 4200 ", "वेबरूट": "$ {कार्यक्षेत्ररूट} / ऐप / फाइलें", "sourceMaps": true}, {name ":" लॉन्च "," टाइप ":" क्रोम "," अनुरोध ":" लॉन्च "," url ":" 127.0.0.1.14200 "," पोर्ट ": 9222," sourceMaps ": सच, //" diagnosticLinging ": सच , "ट्रेस": "वर्बोज़", "वेबरूट": "$ {कार्यक्षेत्ररूट}", "उपयोगकर्ताडॉटआर्ड":

— हाइडेची

स्रोत मानचित्रों के बजाय लाइव डिबगिंग के लिए TRY लॉन्च विकल्प!

— हाईटेक

Answer 3

मैं एक समान मुद्दा बना रहा था, लेकिन मेरी परियोजना में वेबपैक भी शामिल था जिसके कारण उपरोक्त समाधान विफल हो गए। इंटरनेट का पता लगाने के बाद मुझे जीथब पर एक सूत्र में एक समाधान मिला:

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

वैसे भी, यही किया गया था।

नोट: - शुरू करने से पहले आपको यह देखना होगा कि क्या आपके पास विज़ुअल स्टूडियो कोड का नवीनतम संस्करण है और वीएस कोड के भीतर ' डीबगर के लिए क्रोम ' नाम का एक्सटेंशन भी स्थापित किया है ।

सबसे पहले, './config/webpack.dev.js' में

• उपयोग => देवतुल: 'स्रोत-मानचित्र'
• के बजाय => devtool: 'सस्ते-मॉड्यूल-स्रोत-मानचित्र'

फिर राइट-फाइल-वेबपैक-प्लगइन को स्थापित और उपयोग करें:

• npm इंस्टाल - save राइट-फाइल-वेबपैक-प्लगइन

जोड़ने के लिए प्लगइन को './config/webpack.dev.js' में जोड़ें:

• const WriteFilePlugin = की आवश्यकता होती है ('राइट-फाइल-वेबपैक-प्लगइन');

शीर्ष पर वेबपैक प्लगइन्स के अंतर्गत। जोड़ना जारी रखें:

• नई WriteFilePlugin ()

नए नए DefinePlugin () के बाद प्लगइन्स की सूची, यानी

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

यह सुनिश्चित करता है कि स्रोत के नक्शे डिस्क पर लिखे गए हैं

अंत में, मेरा लॉन्च.जसन नीचे दिया गया है।

{
    "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 /' की अनुपस्थिति पर ध्यान दें। इस कॉन्फिगरेशन के साथ, सोर्स-मैप्स ./dist/ में हैं, लेकिन वे इंगित करते हैं ।/src/ vscode कार्यक्षेत्र के लिए पूर्ण रूट प्रस्तुत करता है, और फ़ाइल को सही ढंग से हल करता है।

Answer 4

यहाँ VSCode में कोणीय को डीबग करने का एक आधिकारिक दृश्य स्टूडियो कोड प्रलेखन है https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

क्लाइंट पक्ष कोणीय कोड को डीबग करने के लिए, हमें क्रोम एक्सटेंशन के लिए डीबगर को स्थापित करना होगा। एक्सटेंशन दृश्य खोलें (Ctrl + Shift + X) और खोज बॉक्स में 'क्रोम' टाइप करें। आपको कई एक्सटेंशन दिखाई देंगे जो क्रोम का संदर्भ देते हैं। Chrome के लिए डीबगर के लिए इंस्टॉल बटन दबाएं। बटन इंस्टॉल करने के लिए बदल जाएगा, फिर स्थापना को पूरा करने के बाद, यह रीलोड में बदल जाएगा। VS कोड को पुनरारंभ करने और एक्सटेंशन को सक्रिय करने के लिए रीलोड करें दबाएं।

हमें शुरू में डिबगर को कॉन्फ़िगर करने की आवश्यकता है। ऐसा करने के लिए, डिबग दृश्य (Ctrl + Shift + D) पर जाएं और लॉन्च बटन पर क्लिक करें। लॉन्च करने के लिए .json डिबगर कॉन्फ़िगरेशन फ़ाइल बनाएं। पर्यावरण ड्रॉप डाउन से क्रोम चुनें। यह आपके प्रोजेक्ट में एक नया .vscode फ़ोल्डर में एक लॉन्च। Json फाइल बनाएगा जिसमें वेबसाइट लॉन्च करना या रनिंग इंस्टेंस से जुड़ना दोनों शामिल हैं। हमें अपने उदाहरण के लिए एक परिवर्तन करने की आवश्यकता है: 8080 से 4200 तक पोर्ट बदलें।

Comments

क्या होगा अगर मैं इंटरनेट एक्सप्लोरर चलाना चाहता हूं और क्रोम नहीं?

— robermann

मुझे नहीं पता कि आप ऐसा क्यों करना चाहते हैं, लेकिन वर्तमान में IE समर्थन नहीं है।

— टेडी

Answer 5

मेरे पास इसके मुद्दे थे और जबकि @Sankets जवाब से यह मदद मिली कि इस मुद्दे ने इसे मेरे लिए हल कर दिया https://github.com/angular/angular-cli/issues/2453 ।

विशेष रूप से लॉन्च के लिए नीचे जोड़ रहा है। json

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}

Answer 6

कोणीय बीज के लिए:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}

Answer 7

इन मॉड्स launch.jsonने मेरे लिए MacOS पर काम किया, जिसने मुझे डीबग सत्र के नए उदाहरण में काम करने वाले डिबगर और ब्रेकप्वाइंट प्राप्त करने में सक्षम बनाया ...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }

Answer 8

यह एक कोशिश की और परीक्षण किया है -

चरण 1: क्रोम डिबगर स्थापित करें: बस वी.एस. कोड के अंदर कमांड पैलेट (Ctrl + Shift + P) खोलें और एक्सटेंशन टाइप करें: एक्सटेंशन कमांड स्थापित करें। जब एक्सटेंशन सूची दिखाई देती है, तो सूची को फ़िल्टर करने के लिए 'क्रोम' टाइप करें और क्रोम एक्सटेंशन के लिए डीबगर को स्थापित करें। फिर आप एक लॉन्च-कॉन्फ़िगरेशन फ़ाइल बनाएंगे।

[चरण 1 का अधिक विवरण]

चरण 2: लॉन्च और अपडेट करें। लॉन्च फ़ाइल: दो उदाहरण लॉन्च। जेसन "अनुरोध": "लॉन्च" के साथ कॉन्फ़िगर करता है। Chrome को स्थानीय फ़ाइल या url के विरुद्ध लॉन्च करने के लिए आपको फ़ाइल या url निर्दिष्ट करना होगा। यदि आप किसी url का उपयोग करते हैं, तो webRoot को उस डायरेक्टरी में सेट करें, जहाँ से फाइलें सेव की जाती हैं। यह $ {workspaceRoot} (कोड में खुला फ़ोल्डर) का उपयोग करके या तो एक निरपेक्ष पथ या पथ हो सकता है। webRoot का उपयोग url (जैसे " http: //localhost/app.js ") को डिस्क पर फ़ाइल (जैसे "/Users/me/project/app.js") को हल करने के लिए किया जाता है , इसलिए सावधान रहें कि यह सही तरीके से सेट है। अद्यतन की लॉन्च की सामग्री। जेसन फ़ाइल निम्नानुसार है-

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[चरण 2 का अधिक विवरण]

Answer 9

मुझे उपयोग करने की आवश्यकता है CORSइसलिए मैं अक्षम वेब सुरक्षा के साथ क्रोम को खोलता हूं। फिर मैं डिबगर को क्रोम से जोड़कर कोणीय अनुप्रयोग का डीबगिंग करता हूं।

अक्षम वेब सुरक्षा के साथ क्रोम लॉन्च करने के लिए सीएमडी लाइन:

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

launch.json डिबगर संलग्न करने के लिए फ़ाइल:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}

Answer 10

संचित का जवाब सही था लेकिन मुझे इससे कुछ समस्या थी।

सबसे पहले, Launch.json परियोजना की ".vscode" निर्देशिका में है, और दूसरा, पोर्ट संख्या आपके ऐप को लॉन्च करने के लिए आपके द्वारा उपयोग किए जाने वाले डिफ़ॉल्ट सर्वर पोर्ट के समान होनी चाहिए। मैं अपने प्रोजेक्ट को लॉन्च करने के लिए cmd से एनजी सर्व का उपयोग करता हूं और डिफ़ॉल्ट पोर्ट संख्या 4200 थी , इसलिए मैंने लॉन्च.जॉन फ़ाइल को निम्नानुसार बदल दिया।

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}