मैं वीएससीओडी (विजुअल स्टूडियो कोड) में एक साथ HTML और जावास्क्रिप्ट को कैसे डिबग कर सकता हूं?

Question

मेरे पास VSCode में एक बहुत ही सरल प्रोजेक्ट है, एक index.html फ़ाइल जो एक app.js फ़ाइल से जुड़ी है।

जब मैं F5 दबाता हूं तो मैं इस मिनी वेबसाइट को चलाने और डीबग करना चाहता हूं।

ब्राउज़र में index.html खोलने के लिए मैं VSCode को कैसे कॉन्फ़िगर कर सकता हूं और फिर मुझे app.js में ब्रेकपॉइंट्स सेट करने की अनुमति देता है जो ब्राउज़र में ऐप के साथ मेरी बातचीत से ट्रिगर होगा?

विजुअल स्टूडियो में यह "बस काम करेगा", क्योंकि यह अपने स्वयं के वेब सर्वर, आईआईएस एक्सप्रेस को सक्रिय करता है। वीएससीओडी में मुझे यकीन नहीं है कि मैंने एक साधारण node.js वेब सर्वर बनाने और index.html की सेवा करने के लिए launch.json और/या tasks.json को कैसे स्थापित किया है।

मैं इस launch.json उदाहरण के लिए, डिबगिंग जावास्क्रिप्ट क्षुधा के कुछ उदाहरण देखा है:

{ 
    "version": "0.1.0", 
    "configurations": [ 
     { 
      "name": "Launch Bjarte's app", 
      "type": "node", 
      "program": "app.js", 
      "stopOnEntry": true, 
      "args": [], 
      "cwd": ".", 
      "runtimeExecutable": null, 
      "runtimeArguments": [], 
      "env": {}, 
      "sourceMaps": false 
     }, 
     { 
      "name": "Attach", 
      "type": "node", 
      "address": "localhost", 
      "port": 5858, 
      "sourceMaps": false 
     } 
    ] 
} 

इस js फ़ाइल चलाया जाएगा, लेकिन मुझे समझ नहीं आता कि कैसे मैं अनुप्रयोग के साथ बातचीत कर सकते हैं।

Answer 1

माइक्रोसॉफ्ट द्वारा जारी किए गए एक्सटेंशन के साथ क्रोम रिमोट डीबगिंग के माध्यम से बनाम क्रोम वेब पृष्ठों को डीबग करना संभव है। Debugger for Chrome

जैसा कि आप उस पृष्ठ से देख सकते हैं, डिबगिंग, लॉन्च और अटैच के दो तरीके हैं। मैं केवल अटैच मोड का उपयोग करने में कामयाब रहा, शायद इसलिए कि मेरे पास सर्वर चल रहा नहीं है। इस एक्सटेंशन में सभी महत्वपूर्ण डीबग टूल्स कार्यात्मक हैं: स्थानीय चर, ब्रेकपॉइंट्स, कंसोल, कॉल स्टैक।

बनामोडिस को फिर से देखने का एक अन्य कारण यह है कि अब ईसीएमएस्क्रिप्ट 6 के लिए इंटेलिसेन्स समर्थन है, जो कि मैंने कोशिश की है कि अन्य "इंटेलिसेन्स जैसे" समाधानों में दिखाई नहीं दे रहा है, जैसे कि सब्लिमेकोडइन्टेल या वेबस्टॉर्म का नवीनतम संस्करण।

Answer 2

वीएससीओडी आपके ऐप को लॉन्च करने के लिए नोड का उपयोग करेगा, जिसका अर्थ है कि आपका ऐप कुछ पोर्ट पर चल रहा है। http://localhost:PORT/ पर जाकर आप अपने ऐप से बातचीत कर सकते हैं यदि आप app.js में ब्रेकपॉइंट सेट करते हैं तो इसे नोड के माध्यम से स्थानीय चलने वाली साइट पर जाने के बाद इसे मारा जाना चाहिए। यहां एक अच्छा डेमो https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

Answer 3

ऐसा लगता है कि मैं क्या करना चाहता हूं VSCode (अभी तक?) में संभव नहीं है। इस समय मेरा समाधान, नोड पैकेज लाइव-सर्वर का उपयोग करना है। साथ

> npm install -g live-server 

फिर खुला VSCode, किसी भी फाइल को अपने प्रोजेक्ट के रूट फ़ोल्डर में राइट क्लिक करें और चुनें "कंसोल में खोलें" को स्थापित करें। फिर

> live-server 

रूट प्रोजेक्ट के रूप में अपनी प्रोजेक्ट के साथ सर्वर प्रारंभ करने के लिए टाइप करें। लाइव-सर्वर आपके डिफ़ॉल्ट ब्राउज़र को खोल देगा और आपके प्रोजेक्ट फ़ोल्डर को किसी भी फ़ाइल में बदलाव के लिए मॉनीटर करेगा, और जब भी आप कोई भी बदलाव करेंगे तो एचटीएमएल पेज को पुनः लोड कर देगा।

मुझे यह उल्लेख करना चाहिए कि लाइव-सर्वर का उपयोग करके मेरा समाधान मुझे VSCode में अपना ऐप डीबग करने की अनुमति नहीं देता है, केवल ब्राउज़र में चलाता है। मैं क्रोम में डिबगिंग कर रहा हूं।

Answer 4

आप https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

का उपयोग कर सकते लॉन्च करने पर।तुम सिर्फ पु करने के लिए सर्वर है कि आप प्रयोग कर रहे हैं के url मूल्य JSON और फिर आप

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome against localhost", 
      "url": "http://127.0.0.1:8081", 
      "webRoot": "${workspaceFolder}" 
     } 
    ] 
}