7

पर वीएससीओडी/जावास्क्रिप्ट में रखे गए तोड़ने वाले ब्रेकपॉइंट्स मैं जावास्क्रिप्ट और वेबपैक का उपयोग करके एक नोड.जेएस वेबपैप चला रहा हूं जिसे मैंने this guide के बाद बनाया था। मैंने क्रोम डीबगर एक्सटेंशन स्थापित किया है।क्रोम

मैं आदेश का उपयोग नोड सर्वर चलाते:

webpack-dev-server --progress --colors 

मैं भी webpack --devtool स्रोत-नक्शा दौड़े हैं

मेरे लांच config इस तरह दिखता है:

{ 
    // 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:8080", 
      "webRoot": "${workspaceFolder}" 
     } 
    ] 
} 

वेबपैक-देव-सर्वर - प्रगति - रंग चलाने और VSCode में F5 को मारने के बाद क्रोम वेबपृष्ठ के साथ लोड हो जाता है, मेरे सभी ब्रेकपॉइंट ठोस लाल दिखाई देते हैं, लेकिन जब रखा जाता है तो वे थोड़ा नीचे कूदते हैं जहां से मैंने उन्हें रखा था (i कोड निष्पादित करने वाली रेखाओं को छोड़कर)। ब्रेकपॉइंट्स भी हिट नहीं करते हैं जो मुझे विश्वास दिलाता है कि डीबग मैपिंग के साथ कुछ गड़बड़ है। जब मेरे पास अवसर पर रखे ब्रेकपॉइंट होते हैं तो यादृच्छिक फाइलें लोड हो जाती हैं और उनमें अदृश्य ब्रेकपॉइंट्स हिट होते हैं, जैसे कि नोड_मोड्यूल/फायरबेस/इंडेक्स.जेएस में एक टिप्पणी की गई लाइन पर एक अदृश्य ब्रेकपॉइंट हिट होता है।

मुझे यह भी ध्यान रखना चाहिए कि बनाम में लिपियों को उपज (सभी मॉड्यूल के बीच) मेरी प्रविष्टि.जेएस फ़ाइल है जो मैं ब्रेकपॉइंट्स को हिट करने की कोशिश कर रहा हूं, अर्थात्: -webpack: ///./entry.js (डी: \ myproject \ entry.js)

सबकुछ मेरी निर्देशिका की जड़ में रखा गया है (यदि मैं निर्देशिकाओं को स्थानांतरित करने में गलती करता हूं तो स्क्रीनशॉट);

enter image description here

इसके अलावा मेरे webpack.config.js फ़ाइल:

module.exports = { 
    entry: "./entry.js", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    } 
}; 
+0

क्या आप रूट निर्देशिका संरचना को दिखा सकते हैं, जैसे कि बंडल की गई फाइलें कहां रखी जा रही हैं? –

+0

@AjayGupta मैंने रूट निर्देशिका फ़ोल्डर की एक तस्वीर संलग्न की है, अगर आप यही देखना चाहते हैं तो मुझे बताएं :) – tweetypi

+0

तो 'बिल्ड' वह है जहां सभी बंडल संपत्तियां जाती हैं? –

उत्तर

6

समस्या हल!

जोड़ने के लिए आवश्यक:

devtool: 'inline-source-map' 

मेरी webpack.config.js module.exports करने के लिए। अब ब्रेकपॉइंट्स हर जगह कार्यों पर इनलाइन हिट करें।