वेबस्टॉर्म में वेबपैक डीबगिंग 11

Question

मैं स्रोत मैपिंग का उपयोग कर वेबस्टॉर्म में वेबपैक के साथ बंडल किए गए जावास्क्रिप्ट एप्लिकेशन को डीबग करने का प्रयास कर रहा हूं। मेरे वर्तमान webpack.config.js इस तरह दिखता है:

var path = require('path'); 

module.exports = { 
    debug: true, 
    devtool: 'source-map', 

    context: path.join(__dirname, 'js'), 
    entry: './main.js', 
    output: { 
     path: path.join(__dirname, 'Built'), 
     filename: '[name].bundle.js' 
    } 
} 

स्रोत नक्शा उत्पन्न होता है और इस तरह दिखता है:

{"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack:///./main.js","webpack:///./structure_editor/content.js","webpack:///./structure_editor/test_bundle.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;ACVA,8C;;;;;;ACAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6B","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 2919a5f916c286b8e21a\n **/","document.write(require(\"./structure_editor/content.js\"));\r\nvar TestBundle = require(\"./structure_editor/test_bundle.js\");\r\n\r\nvar test = new TestBundle();\r\ntest.testMe();\r\n\r\n//var StructureEditor = require(\"./structure_editor/structure_editor.js\");\r\n\r\n//var editor = new StructureEditor(0x00FF00);\r\n\r\n//editor.run();\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./main.js\n ** module id = 0\n ** module chunks = 0\n **/","module.exports = \"It works from content.js.\";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/content.js\n ** module id = 1\n ** module chunks = 0\n **/","var TestBundle = function() {\r\n \r\n}\r\n\r\nTestBundle.prototype.testMe = function() {\r\n var a = 10;\r\n var b = 12;\r\n var c = a + b;\r\n document.write(c);\r\n};\r\n\r\nmodule.exports = TestBundle;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/test_bundle.js\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""} 

अब, मैं पाया है कहा गया है कि WebStorm 11 पूरी तरह से Webpack का समर्थन करेंगे और यह है स्रोत मैपिंग [उदाहरण के लिए। here] लेकिन यह बहुत कम जानकारी प्रदान करता है। प्रदान की गई कॉन्फ़िगरेशन के साथ डिबगिंग काम नहीं करती है, ब्रेकपॉइंट को नजरअंदाज कर दिया जाता है। कई प्रयासों के बाद मुझे एकमात्र कॉन्फ़िगरेशन मिला है जो मुझे डीबगिंग करने देता है (सही ढंग से, अन्य प्रयास कभी-कभी कोड तोड़ सकते हैं लेकिन लाइनों और कोड निष्पादन को मिस्केच किया गया था), devtool: 'eval' सेट करके। हालांकि, इसका उपयोग करने के लिए स्रोत मैपिंग के साथ कुछ लेना देना नहीं है।

जेनरेट किया गया स्रोत नक्शा सभी लोकप्रिय ब्राउज़रों में काम करता है और मुझे उन में मूल स्रोतों को डीबग करने दें, तो वेबस्टॉर्म क्यों काम नहीं करता है? क्या मुझे स्रोत मानचित्रों का उपयोग करने से पहले वेबस्टॉर्म में कुछ कॉन्फ़िगरेशन करने की आवश्यकता है?

वर्तमान डब्ल्यूएस संस्करण जिसका मैं उपयोग कर रहा हूं वह 142.4148 है और क्रोम एक्सटेंशन के माध्यम से डीबगिंग किया जाता है। मैं पुराने डब्लूएस 10 संस्करण के लिए यहां भी डिबगिंग सेट अप करने के बारे में किसी भी विचार या ट्यूटोरियल की सराहना करता हूं (मैं डब्ल्यूएस 11 का उपयोग कर रहा हूं क्योंकि यह वेबपैक के साथ अच्छी तरह से खेलना था)

Answer 1

वेबपैक स्रोतमैप अधिकतर समर्थित हैं वेबस्टॉर्म 11, लेकिन आपको अपने Javascript Debug में रिमोट यूआरएल मैपिंग्स सेट अप करने की आवश्यकता है, वेबस्टॉर्म को वेबपैक आउटपुट फाइलों (स्रोत मानचित्र समेत) के साथ निर्देशिका को जानने के लिए और स्रोतमैप मानचित्र में उनके स्थान पर निर्दिष्ट स्रोत फ़ाइलों के पथ को कैसे जाने दें परियोजना। इसलिए, आपको संकलित स्क्रिप्ट वेब सर्वर यूआरएल के मैपिंग को अपने स्थानीय पथ पर, और प्रोजेक्ट में स्थानीय पथ पर मानचित्र स्रोत यूआरएल (स्रोत मानचित्र में सूचीबद्ध) निर्दिष्ट करने की आवश्यकता है। अजीब लगता है, लेकिन यह जटिल नहीं है। आपके जैसे कॉन्फ़िगरेशन फ़ाइल के लिए, आपको 'Built' निर्देशिका के लिए रिमोट यूआरएल http://localhost:63342/webpack/Built निर्दिष्ट करना होगा जहां बंडल फ़ाइल और सोर्समैप स्थित हैं, और webpack:///. - 'js' निर्देशिका के लिए। यह मेरे लिए ठीक काम करता है ... हम जल्द ही webpack डिबगिंग के बारे में एक ब्लॉग पोस्ट प्रकाशित करने के लिए ... अभी के लिए योजना बना रहे हैं, मैं

Answer 2

मैं घंटों के लिए इस पर मेरे दिमाग racked सरल उदाहरण के लिए https://github.com/prigara/debugging-webpack पर रखने का सुझाव देते सकते हैं, और मुझे उम्मीद है कि यह किसी और की मदद कर सकता है। इस ब्लॉग पोस्ट में दिए गए निर्देश वास्तव में काम करते हैं: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

तो, अपने वेबस्टॉर्म इंस्टेंस को कॉन्फ़िगर करने के लिए निर्देशों का पालन करें, लेकिन इसे वेबपैक-डीवी-सर्वर से नहीं चलाएं, वेबबैक :: जैसे एक अलग वेब सर्वर का उपयोग करें। रूबी खान/रेल या डीबग सर्वर में निर्मित एचटीटीपीएस सर्वर। किसी कारण से वेबपैक-देव-सर्वर स्रोत संख्या को सही ढंग से लाइन संख्याओं से सहसंबंधित नहीं करता है।

Answer 3

मैं जोड़ना होगा कि आप बयान

डिबगर रख सकते हैं;

आपके जावास्क्रिप्ट/टाइपस्क्रिप्ट में कोणीय या vue2 की ढांचे फ़ाइलों में भी।

तो यदि यूआरएल पर आपका पथ मैपिंग काम नहीं करता है, तो भी यह कदम उठाएगा।