debugging - वेबपैक-देव-सर्वर के साथ वीएस कोड डीबगर का उपयोग कैसे करें(ब्रेकपॉइंट को अनदेखा किया गया)



webpack visual-studio-code (1)

मेरे अनुभव से (लगभग 15 मिनट पहले), अगर 'वेबपैक.कॉन्फ़िग.जेएस' के संदर्भ संपत्ति के लिए मूल्य है, तो उसे '.vscode / launch.json' के लिए जिम्मेदार होना चाहिए।

उदाहरण के लिए, यदि 'webpack.config.js' में निम्नलिखित हैं:

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.ts',

तब launch.json को संदर्भ ('src') की भी जरूरत है:

"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}/src",
"sourceMaps": true,

मैंने अभी अपने रेपो को अपडेट / तय किया है, अब टाइपस्क्रिप्ट ब्रेकपॉइंट को बाइंड करना चाहिए।

https://github.com/marckassay/VSCodeNewProject

मुझे आशा है कि वह मदद करेंगे।

मेरी समस्या सरल है

मैं केवल अपने ब्रेकपॉइंट की अनदेखी के बिना वेबपैक-देव-सर्वर के साथ वी.एस कोड के डीबगर का काम करना चाहता हूं।

अब, वेबपैक-देव-सर्वर बंडल फ़ाइलों को स्मृति से कार्य करता है, जबकि, अगर मैं इसे सही ढंग से समझता हूं, तो वी.एस. कोड डीबगर डिस्क पर उनके लिए खोज (... या नहीं? ...)

नतीजतन, जब भी मैं एक ब्रेकपॉइंट सेट करता हूं, मैं खतरनाक हो जाता हूं

Breakpoint ignored because generated code not found (source map problem?)

अब, हर संबंधित प्रश्न को मैं ज्यादातर टाइपस्क्रिप्ट के साथ कर सकता था, और इस तथ्य से नहीं कि वेबपैक-देव-सर्वर स्मृति से कार्य करता है। मैं टाइपस्क्रिप्ट का उपयोग नहीं कर रहा हूं। ऐसा लगता है कि लोग या तो वेबपैक-देव-सर्वर का उपयोग नहीं कर रहे हैं, या मुझे कुछ गलत तरीके से स्पष्ट है, बाद में मेरे पैसे के साथ।

यह मेरा वी.एस. कोड 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": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "trace": true
    }
  ]
}

और ये मेरे webpack.config.js से संबंधित लाइनें हैं webpack.config.js

  devtool: 'cheap-module-source-map',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },

मैंने launch.json लिए कई संशोधनों की कोशिश की है। launch.json को कोई फायदा नहीं हुआ है, इसलिए मैं इसे वनीला रूप में launch.json कर रहा हूं।

ध्यान दें कि output.path का उपयोग केवल तभी होता है जब कोई उत्पादन निर्माण होता है और फाइल डिस्क पर निकलती है

यहां बताया गया है कि फाइलों की संरचना सेवा में दी गई है:

और यहाँ मैं विकास में चल रहा हूं

  "scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js"
  },

अंत में, यहाँ ट्रेस फ़ाइल से एक प्रासंगिक हिस्सा है

From target: {"method":"Debugger.scriptParsed","params":{"scriptId":"30","url":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","startLine":0,"startColumn":0,"endLine":150,"endColumn":57,"executionContextId":2,"hash":"216099518F33D6091EC12795265804FB35669A30","executionContextAuxData":{"isDefault":true,"frameId":"18228.1"},"isLiveEdit":false,"sourceMapURL":"manifest.0ec68ebd5f0abf9b4cd4.js.map","hasSourceURL":false,"isModule":false,"length":5906}}
Paths.scriptParsed: could not resolve http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js to a file under webRoot: e:\Mitch\Workspace\Projects\project-name. It may be external or served directly from the server's memory (and that's OK).
SourceMaps.getMapForGeneratedPath: Finding SourceMap for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js by URI: manifest.0ec68ebd5f0abf9b4cd4.js.map and webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMaps.loadSourceMapContents: Downloading sourcemap file from http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js.map
To client: {"seq":0,"type":"event","event":"script","body":{"reason":"new","script":{"id":1,"source":{"name":"manifest.0ec68ebd5f0abf9b4cd4.js","path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","sourceReference":1001}}}}
To client: {"seq":0,"type":"event","event":"scriptLoaded","body":{"path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js"}}
SourceMap: creating for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js
SourceMap: sourceRoot: 
SourceMap: sources: ["webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159"]
SourceMap: webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMap: no sourceRoot specified, using webRoot + script path dirname: e:\Mitch\Workspace\Projects\project-name\
SourceMap: mapping webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159 => webpack\bootstrap 7617f9bf7c8b0bc95159, via sourceMapPathOverrides entry - "webpack:///*": "*"
SourceMaps.scriptParsed: http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js was just loaded and has mapped sources: ["webpack\\bootstrap 7617f9bf7c8b0bc95159"]

यह मुझे पागल कर रही है, मैंने पिछले तीन घंटों से गुगल्स को कोई फायदा नहीं पहुंचा दिया है और वर्तमान में यह 5 एएम है।





webpack-dev-server