Razzle: नोड सर्वर को vscode से डिबग करें

मुझे प्रक्रिया आईडी द्वारा संलग्न करने का सौभाग्य मिला है। एक sourceMaps vscode लॉन्च कॉन्फ़िगरेशन विकल्प भी है जिसे आप सही पर सेट कर सकते हैं।

    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "restart": true
    }

@ajsharp आपके उत्तर के लिए धन्यवाद: स्माइली_कैट:

संलग्न विधि के समान। मैं src/index.js में ब्रेकपॉइंट सेट नहीं कर सकता।

सोर्समैप्स विकल्प डिफ़ॉल्ट रूप से सत्य है (cf. https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps)

मैंने इसे एक अलग स्रोतमैप सेटिंग का उपयोग करके हल किया है, VSCode cheap-module-sourcemap एक को पसंद नहीं करता है।
razzle.config.js :

module.exports = {
    modify(config, { target, dev }, webpack) {
        config.devtool = dev ? 'eval-source-map' : 'none';
        return config;
    }
}

launch.json :

{
    "name": "Attach to dev server",
    "type": "node",
    "request": "attach",
    "protocol": "inspector",
    "address": "localhost",
    "port": 9230
}

और सर्वर को yarn start --inspect --inspect-port 9230 . से शुरू करें

* संपादित, त्रुटि पकड़ने के लिए धन्यवाद @dguyonvarch ।

@ बेनहैमलिन : मुस्कान_कैट: यह ठीक काम करता है!
मैंने अभी आपका स्निपेट ठीक किया है:

module.exports = {
  modify: (config, { target, dev }, webpack) => {
      config.devtool = dev ? 'eval-source-map' : 'none';
      return config
  }
}

मुझे यह razzle/packages/razzle/config/createConfig.js लाइन 93 में मिलता है:

// Controversially, decide on sourcemaps.
devtool: 'cheap-module-source-map'

तो मैं विवाद खोलता हूँ :पलक : ! क्यों cheap-module-source-map के बजाय eval-source-map

कोई भी इस नुस्खा के बारे में दस्तावेज़ों में एक अनुभाग जोड़ना चाहता है?

@jaredpalmer क्या मैं eval-source-map के साथ मर्ज अनुरोध का प्रस्ताव कर सकता हूं? इस मामले में डॉक्टर को अपडेट करने की जरूरत नहीं है।

होला! तो यहाँ सौदा है, ओपन सोर्स और मेरे दिन के काम और जीवन के बीच और क्या नहीं, मेरे पास प्रबंधन करने के लिए बहुत कुछ है, इसलिए मैं यहां और वहां कुछ चीजों को स्वचालित करने के लिए गिटहब बॉट का उपयोग करता हूं। यह विशेष रूप से GitHub बॉट इसे बासी के रूप में चिह्नित करने जा रहा है क्योंकि इसमें कुछ समय के लिए हाल की गतिविधि नहीं हुई है। यदि कुछ दिनों में कोई गतिविधि नहीं होती है तो इसे बंद कर दिया जाएगा। इसे व्यक्तिगत रूप से न लें--गंभीरता से--यह पूरी तरह से स्वचालित कार्रवाई है। अगर यह एक गलती है, तो बस एक टिप्पणी करें, मुझे डीएम करें, एक वाहक कबूतर, या एक धूम्रपान संकेत भेजें।

निष्क्रियता के कारण ProBot ने इसे स्वचालित रूप से बंद कर दिया। होलर अगर यह एक गलती है, और हम इसे फिर से खोलेंगे।

अपडेट: सर्वर को डीबग करने के लिए vscode प्राप्त करने का एक बेहतर तरीका यह है कि इसे अपने लॉन्च.जेसन में जोड़ें, और devtool कॉन्फ़िगरेशन को razzle के डिफ़ॉल्ट पर छोड़ दें।

यह VSCode डिबगिंग की अनुमति देगा, साथ ही एक बेहतर क्लाइंट डिबगिंग अनुभव (eval-source-maps, React के डिबग एरर व्यूअर को तोड़ता है)।

"sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/*"
 }

धन्यवाद @ बेन्हमलिन। क्या आप रैज़ल में सॉफ्ट रीस्टार्ट ( rs फिर ENTER ) करने के बाद VSCode में डिबगर इंस्टेंस को आसानी से फिर से कनेक्ट कर सकते हैं?

एटीएम अगर मैं सॉफ्ट रीस्टार्ट करता हूं तो वीएससीओडी डीबगर डिस्कनेक्ट हो जाता है, इसलिए मुझे सर्वर को मारना होगा और इसे पुनरारंभ करना होगा और फिर डीबगर को फिर से कनेक्ट करना होगा।

@benhamlin यह इस विन्यास के साथ एक आकर्षण की तरह काम करता है: पलक:

{
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9230,
      "sourceMapPathOverrides": {
         "webpack:///*": "${workspaceRoot}/*"
      }
}

@ourmaninamsterdam RS एक नए डिबग पोर्ट (9230 + 1) पर सर्वर को पुनरारंभ करता है, इसलिए आपको लॉन्च कॉन्फ़िगरेशन में अटैच पोर्ट को बदलना होगा। मैंने और जांच नहीं की: निराश: