Debug di WebPack in WebStorm 11

Question

Sto cercando di eseguire il debug di un'applicazione javascript in bundle con WebPack in WebStorm utilizzando il mapping di origine. Il mio webpack.config.js corrente si presenta così:

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' 
    } 
} 

La mappa fonte viene generato e si presenta così:

{"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":""} 

Ora, ho trovato menziona che WebStorm 11 supporterà pienamente WebPack ed è mappatura delle fonti [ad es. here] ma fornisce pochissime informazioni. Il debugging con config fornito non funziona, il punto di interruzione viene ignorato. Dopo molti tentativi ho scoperto l'unica configurazione che consentitemi di eseguire il debug (correttamente, altri tentativi potrebbero talvolta interrompere il codice ma le righe e l'esecuzione del codice non corrispondevano), impostando devtool: 'eval'. Tuttavia, questo non ha nulla a che fare con il mapping sorgente che sto cercando di usare.

La mappa sorgente generata funziona in tutti i browser più diffusi e consentitemi di eseguire il debug delle sorgenti originali al loro interno, quindi perché WebStorm non funziona? Devo eseguire alcune configurazioni in WebStorm prima di utilizzare le mappe sorgente?

La versione WS corrente che sto utilizzando è 142.4148 e il debug viene eseguito tramite l'estensione chrome. Apprezzerei qualsiasi idea o tutorial su come configurare il debug qui, anche per la versione precedente di WS 10 (sto usando WS 11 solo perché doveva giocare bene con WebPack)

Answer 1

Le webdocumenti Webpack sono principalmente supportate in WebStorm 11, ma è necessario impostare i mapping degli URL remoti nella propria configurazione di Javascript Debug Esegui di conseguenza, per consentire a WebStorm di conoscere la directory con i file di output di Webpack (incluse le mappe di origine) e in che modo i percorsi dei file di origine specificati nella mappa di sourcemap nella loro posizione in il progetto. Pertanto, è necessario specificare i mapping dell'URL del server Web dello script compilato sul relativo percorso locale e mappare l'URL di origine (elencato in una mappa di origine) sul percorso locale nel progetto. Sembra strano, ma non è così complicato. Per il file di configurazione come il tuo, è probabile che tu debba specificare URL remoto http://localhost:63342/webpack/Built per la tua directory 'Built' in cui si trovano il file bundle e le sourcemaps e webpack:///. - per la directory 'js'. Per me va bene ... Abbiamo in programma di pubblicare presto un post sul debug del web pack ... Per ora, posso suggerire di guardare https://github.com/prigara/debugging-webpack per il semplice esempio

Answer 2

Mi sono tormentato per ore, e Spero che possa aiutare qualcun altro. Le istruzioni in questo post del blog funzionano davvero: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

Quindi, seguire le istruzioni per configurare l'istanza webstorm, ma non eseguirla con il webpack-dev-server, utilizzare un server Web diverso come il WEBrick :: HTTPServer utilizzato in Ruby mine/rails o nel server di debug integrato. Per qualche ragione il webpack-dev-server non mette in correlazione la mappa sorgente correttamente con i numeri di linea.

Answer 3

Vorrei aggiungere che si può mettere la dichiarazione

debugger;

in javascript/dattiloscritto anche in file framework di angular o vue2.

Quindi, anche se le mappature dei percorsi all'URL non funzionano, andrà comunque avanti.