debugging - studio - Cómo usar el depurador VS Code con webpack-dev-server(se ignoran los puntos de interrupción)

visual studio code debug php

Question

Mi problema es simple

Solo quiero hacer que el depurador de VS Code funcione con webpack-dev-server sin ignorar mis puntos de interrupción.

Ahora, webpack-dev-server sirve los archivos empaquetados de la memoria, mientras que, si entiendo esto correctamente, el depurador VS Code los busca en el disco (... ¿o no? ...)

Como resultado, cada vez que establezco un punto de interrupción recibo el temido

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

Ahora bien, cada pregunta relacionada que pude encontrar tenía que ver principalmente con texto mecanografiado, y no con el hecho de que webpack-dev-server sirve de memoria. No estoy usando mecanografiado. Parece que la gente no está usando webpack-dev-server, o me falta algo descaradamente obvio, con mi dinero en este último.

Este es mi VS Code 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
    }
  ]
}

y estas son las líneas relacionadas de mi webpack.config.js

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

He intentado varias modificaciones al launch.json en vano, así que solo estoy pegándolo en vainilla.

Tenga en cuenta que output.path solo se usa cuando hay una compilación de producción y los archivos se arrojan al disco.

Esta es la estructura de los archivos en la página servida:

Y aquí está el comando que estoy ejecutando en desarrollo

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

Finalmente, aquí hay un fragmento relevante del archivo de rastreo

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"]

Esto me está volviendo loco, he pasado las últimas 3 horas recorriendo los Google en vano y actualmente son las 5AM.

Answer 1

Desde mi experiencia (hace aproximadamente 15 minutos), si ''webpack.config.js'' tiene un valor para la propiedad de contexto, entonces eso tiene que ser contabilizado para ''.vscode / launch.json''.

Por ejemplo, si ''webpack.config.js'' tiene lo siguiente:

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

Then launch.json necesita ese contexto (''src'') también:

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

Acabo de actualizar / arreglar mi repositorio, por lo que ahora los puntos de interrupción de TypeScript deberían enlazarse.

https://github.com/marckassay/VSCodeNewProject

Espero que eso ayude.