Как использовать отладчик VS Code с webpack-dev-сервером (точки останова игнорируются)

Моя проблема проста.

Я просто хочу, чтобы отладчик VS Code работал с webpack-dev-сервером, не игнорируя мои точки останова.

Теперь webpack-dev-сервер обслуживает связанные файлы из памяти, а если я правильно понимаю это, отладчик VS Code ищет их на диске (... или нет?...)

В результате, когда я устанавливаю точку останова, я получаю страшный

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

Теперь каждый связанный с этим вопрос, который я мог найти, имел в основном typescript, а не тот факт, что webpack-dev-server служит из памяти. Я не использую typescript. Кажется, что люди либо не используют webpack-dev-сервер, либо я пропускаю что-то явно очевидное, мои деньги на последнем.

Это мой код VS 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

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

Я пробовал различные модификации 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 memory (and that 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"]

Это сводит меня с ума, я провел последние 3 часа, прочесывая Googles безрезультатно, и он в настоящее время 5AM.

Ответ 1

По моему опыту (около 15 минут назад), если для "webpack.config.js" задано значение для свойства context, то это следует учитывать для ".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,

Я только что обновил/исправил репо, поэтому теперь должны быть привязаны точки останова TypeScript.

https://github.com/marckassay/VSCodeNewProject

Надеюсь, это поможет.

Ответ 2

Для Webpack 4:
Установите webpack-cli локально, если он еще не установлен (он был извлечен из webpack).

Добавьте следующую конфигурацию отладки VSCode в ваш .vscode/launch.json (файл, который VSCode открывает при нажатии на значок колеса в представлении "Отладка"):

{
  "type": "node",
  "request": "launch",
  "name": "build",
  "program": "${workspaceFolder}/node_modules/.bin/webpack-cli",
  "args": [
    "--config",
    "webpack.config.prod.js"
  ],
  "autoAttachChildProcesses": true,
  "stopOnEntry": true
}

stopOnEntry остановит отладчик в самой первой (shebang) строке webpack.js, например так:

VSCode debugger stops without any breakpoints

Ответ 3

Старая ветка, но она все равно всплывает в поисках...

Такое ощущение, что включение "записи сгенерированного кода на диск" может быть решением здесь: согласно https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-, добавьте это в webpack.config.js:

module.exports = {
  //...
  devServer: {
    writeToDisk: true
  }
};

Ответ 4

Если кто-то беспокоится о start-server-webpack-plugin из webpack:

Я недавно застрял на той же проблеме, и ответ @MarkoBonaci пришел на помощь. Тем не менее, я застрял на другой ошибке, которую выдает плагин webpack: start-server-webpack-plugin.

Ниже приведена ошибка, которую я получил при запуске приложения через отладчик vscode:

cd/home/me/projects/villageger-themes; env "NODE_ENV = development"/home/me/.nvm/versions/node/v11.6.0/bin/node --inspect-brk = 33538 node_modules/.bin/webpack-cli --colors --progress --config./webpack.dev.js Отладчик прослушивает ws://127.0.0.1: 33538/d8bb6d64-a1a1-466e-9501-6313a3dc8bcf Для получения справки см.: https://nodejs.org/en/docs/inspector Отладчик прилагается. clean-webpack-plugin: /home/rajeev/projects/villageger-themes/dist был удален. 10% строят модули 1/1 0 активный веб-пакет следит за файлами...

98% после отправки StartServerPluginStarting инспектора на 127.0.0.1:33538 не удалось: адрес уже используется

Как вы видите, StartServerPlugin использует тот же порт 33538 который уже 33538 родительским процессом. Поэтому нам нужно указать StartServerPlugin использовать другой порт для инициализации проверки. Этого мы можем достичь путем инициализации StartServerPlugin.

new StartServerPlugin({
  name: 'server.js',
  nodeArgs: ['--inspect=5858'], // allow debugging),
})

Здесь, в nodeArgs мы указываем порт проверки как 5858. После сохранения этой конфигурации и повторного запуска приложения через отладчик vscode вы успешно запустите приложение.