Comment utiliser VS débogueur de Code avec webpack-dev-serveur (points d'arrêt ignoré)

Mon problème est simple.

Je veux juste faire VS Code du débogueur de travail avec webpack-dev-serveur sans ignorer mes points d'arrêt.

Maintenant, webpack-dev-serveur sert le lot de fichiers à partir de la mémoire, tandis que, si je comprends bien, le VS débogueur de Code recherche pour eux sur le disque (...ou pas?...)

Comme un résultat, à chaque fois que j'ai mis un point d'arrêt je obtenir le redouté

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

Maintenant, tous liés à la question que j'ai pu trouver a eu à faire avec la machine pour la plupart, et non pas avec le fait que webpack-dev-server sert de la mémoire. Je ne suis pas à l'aide de caractères d'imprimerie. Semble que les gens ne sont pas à l'aide de webpack-dev-serveur, ou il me manque quelque chose de flagrant, avec mon argent sur celui-ci.

C'est mon 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
    }
  ]
}

et ces sont les lignes de mon webpack.config.js

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

J'ai essayé différentes modifications de la launch.json en vain, donc je suis en train de le coller dans la vanille forme.

Noter que le output.path est utilisé uniquement lorsqu'il y a une production de construire et les fichiers sont vomies sur le disque.

Voici ce que la structure des fichiers est dans la servi en de la page:

Comment utiliser VS débogueur de Code avec webpack-dev-serveur (points d'arrêt ignoré)

Et voici la commande que j'suis en cours d'exécution dans le développement

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

Enfin, en voici un morceau du fichier de trace

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

Cela me conduire fou, j'ai passé les 3 dernières heures à récurer les Googles en vain, et actuellement il est 5H du matin.

Juste essayé ce mon projet qui utilise également webpack-dev-serveur par l'ajout de Chrome lancer l'extrait de code que vous avez partagé avec un minimum de modifications - { "type": "chrome", "request": "lancer", "nom": "Lancement de Chrome contre localhost", "url": "localhost:3000", "webRoot": "${workspaceRoot}", "sourceMaps": true, "trace": true } j'ai été en mesure de débogage. Pourriez-vous essayer à votre fin? J'ai couru le projet dans un cmd session via yarn run start-ui pour obtenir le wds commencé. Ensuite, j'ai utilisé vscode pour le lancement de chrome.
Non, les points d'arrêt-je ajouter dans mon Réagir composants perdu avec la Breakpoint ignored because generated code not found (source map problem?) message
Il peut être utile de tester avec mon repo. Ou bien, si vous pouvez partager un minimum de pension sur titres, je peux l'essayer à ma fin. Cela permet d'écarter toute machine de questions connexes.
Ok, je vais créer un minimum de pensions plus tard ce soir, quand j'aurai un peu de temps.
Vous compréhension est correcte. Webpack-dev-serveur n'est pas d'écrire le fichier sur le disque, afin de mettre tout au point d'arrêt ne va pas aider. Vous pouvez explorer les dessous de 2 plugins et d'essayer: github.com/gajus/write-file-webpack-plugin github.com/FormidableLabs/webpack-disk-plugin

OriginalL'auteur Dimitris Karagiannis | 2017-09-27

9

De mon expérience (environ 15 mins ago), si 'webpack.config.js" a une valeur pour la propriété de contexte, alors que doit être pris en compte".vscode/lancement.json".

Pour un exemple, si 'webpack.config.js' a la suivante:
```
module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.ts',
```
Puis de le lancer.json besoins de ce contexte ('src'):
```
"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}/src",
"sourceMaps": true,
```
Je viens de mettre à jour/fixe mon repo alors maintenant, Tapuscrit de points d'arrêt doivent lier.

https://github.com/marckassay/VSCodeNewProject

J'espère que ça aide.

Cela a fonctionné pour moi. J'ai eu context: resolve(__dirname, "app") dans webpack.config.js j'ai donc dû ajouter "/app' à la 'racine' de la clé. Ce sont mes réglages. ` "configurations": [ { "type": "chrome", "request": "joindre", "nom": "Ajouter à Chrome", "port": 9222, "racine": "${workspaceFolder}/app" }, { "type": "chrome", "request": "lancer", "nom": "Lancement de Chrome contre localhost", "url": localhost:5000", "racine": "${workspaceFolder}/app" } ]` j'ai Débogué avec 'le Lancement de Chrome contre localhost'.`
Et j'ai aussi dû changer d'outil développeur d'internet explorer valeur: devtool: "source-map"
Changement de clé est devtool: "source-map" dans webpack-config.

OriginalL'auteur marckassay
1

Pour Webpack 4:

Installer webpack-cli localement si vous ne l'avez pas déjà installé (il a été tiré de webpack).

Ajouter le suivant VSCode configuration de débogage de votre .vscode/launch.json (c'est le fichier qui VSCode s'ouvre lorsque vous cliquez sur l'icône roue en vue de Débogage):

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

stopOnEntry fera débogueur s'arrêter dans la première (inclus) de la ligne de webpack.js, comme ceci:

De cette manière, je peux débogueur la webpack code source. Mais je veux le débogueur la webpack.config.prod.js, pourriez-vous me donner des conseille？
Pas d'autre moyen, sauf à creuser dans webpack source. Je ne suis pas assez familier avec elle, de vous donner les meilleurs conseils.
Merci en tout cas.
Je peux vous garantir que ce que vous essayez de faire ne vaut pas le temps et j'ai des doutes si c'est réalisable. Débogage à l'aide de node ./your-file.webpack.js ou essayez-n-échec.

OriginalL'auteur Marko Bonaci

Vous devez vous connecter pour publier un commentaire.