Debug di javascript in bundle in Visual Studio 2015

Question

Uso il WebPack con questo semplice file di configurazione per raggruppare la mia applicazione.

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

Questo crea mappatura fonte che posso facilmente usare per eseguire il debug i miei file javascript originali in tutti i browser più diffusi. Tuttavia, l'impostazione del punto di interruzione all'interno di Visual Studio e l'esecuzione del progetto non funziona, i punti di interruzione sono disabilitati dicendo "Nessun simbolo è stato caricato per questo documento". Sto eseguendo il debugging tramite IE11, in cui è possibile eseguire il debug del semplice javascript da Visual Studio, ma dopo averlo raggruppato non funziona più.

C'è un segnale che il sourcemapping funziona, perché ottengo in uscita console Unsupported format of the sourcemap. Il Sourcemap generato il tramite di configurazione sopra appare 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":""} 

così posso capire che questo formato potrebbe non essere supportata a causa del webpack: // (anche se IE non capirlo). Tuttavia, se sapessi come il formato corretto per VS sembra che potrei essere in grado di ottimizzare webpack per produrre tale formato.

Sto chiedendo idee, tutorial, .. qualunque cosa per farlo funzionare.

Answer 1

Ho trovato una soluzione per il tuo problema.

Nei webpack.config.js aggiungere questo plugin

plugins: [ 
    new webpack.SourceMapDevToolPlugin(
    sourceMapFilename, null, 
    "[absolute-resource-path]", "[absolute-resource-path]") 
] 

sourceMapFilename dovrebbe essere il nome del vostro pacco.
È anche possibile utilizzare il tag [nome] se si utilizzano più punti di ingresso.

rimuovere questo dal tuo webpack.config.js

devtool: 'source-map' 

Ora, quando si avvia il debug in VS con Internet Explorer si dovrebbe colpire i punti di interruzione impostati nei file .ts.

fonte: https://github.com/webpack/webpack/issues/238

Spero che questo aiuti.

Answer 2

Non ho una soluzione completa al problema ma l'ho ristretto un po '.

La prima cosa da verificare è che i percorsi sia per la mappa di origine sia per i file originali siano disponibili per Visual Studio. Ho scoperto che alcune di queste richieste stavano ricevendo la pagina di accesso come risposta. Ho concesso l'accesso anonimo alla mappa e ai file ts. Ho provato a utilizzare percorsi assoluti di file system per i file ts che funzionavano per Visual Studio ma i browser non sembravano molto contenti.

Da quello che ho capito, il seguente è un collegamento per la configurazione del plugin SourceMapDevToolPlugin. Andando direttamente al plug-in otterrai un maggiore controllo sulle mappe sorgente generate.

devtool: 'source-map' 

Ciò significherebbe sostituire la riga in alto con qualcosa di simile al seguente.

config.plugins.push(new webpack.SourceMapDevToolPlugin({ 
    filename: '[file].map', 
    moduleFilenameTemplate: "[resource-path]", 
    fallbackModuleFilenameTemplate: "[resource-path]?[hash]" 
})); 

Annotare la [absolute-resource-path] macro che si tradurrà in percorsi di sistema di file che Visual Studio può utilizzare per accedere ai file senza caricarli attraverso il sito web. Questi vengono emessi nella proprietà sources con i backslash sottoposti a escape con una seconda barra rovesciata (C: \ Projects \ ... ad esempio). Come ho già notato sopra, questo ha rotto il debug nei browser.

Inoltre, la macro [percorso-risorsa] sembra risolta durante il debug come se fosse relativa alla cartella che contiene le mappe di origine. Questo non era corretto per il mio setup. Ho aggiunto un prefisso e ho usato qualcosa di simile al seguente per risolverlo.

"../../app/[resource-path]" 

Il problema successivo era con gli ultimi segmenti per alcune delle linee all'interno della proprietà mapping (all'interno dei file della mappa). Questo explanation of the source map format è stato molto utile qui, ma praticamente tutto quello che devi sapere è che i due punti punti separano le linee e che ogni riga può avere più segmenti separati da virgole. I segmenti possono codificare le seguenti informazioni.

• colonna generata
• del file originale questo è apparso in
• originale numero di riga
• colonna originale
• E se disponibile nome originale.

ho scoperto che se ho rimosso tutti i segmenti corti dalle estremità delle linee che Visual Studio potrebbe elaborare la mappa e ho potuto impostare i punti di interruzione, ecc nei file originali (file tipografico che sono stati convertiti in javascript che è stato poi in bundle nel mio caso).

Per rimuovere i segmenti brevi ho utilizzato il seguente processo manuale in Visual Studio per ciascuno dei file mappa. Si noti che ho trovato più semplice interpretare i file dopo averli formattati facendo clic con il pulsante destro del mouse sul corpo del documento e selezionando Formato documento dal menu di scelta rapida.

• Eseguire un'operazione di sostituzione con le espressioni regolari abilitate. Utilizzare la seguente espressione nel campo find e $ 1 come valore da sostituire.

  , \ s * [^ \ s \ ";] {1,3}? (; | \")

Questo sostituirà tutti i segmenti che contengono solo 1, 2 o 3 caratteri alla fine delle righe.

È possibile che ci siano problemi nell'impostazione dei punti di interruzione alle estremità delle linee, ma non sono stato in grado di romperlo fino a quel momento. Tuttavia, ho notato che quando c'erano errori che causavano l'interruzione dell'esecuzione nel debugger che le righe non corrispondevano sempre, forse un risultato di questa manipolazione?

Ho anche scritto una piccola applicazione per console che eseguirà questa modifica su tutti i file di mappa in una determinata cartella. Lo eseguo automaticamente alla fine della nostra build.

static void Main(string[] args) 
    { 
     var sourceMapFolder = new DirectoryInfo(args[0]); 

     foreach (var sourceMapFile in sourceMapFolder.EnumerateFiles("*.map")) 
     { 
      var sourceMapFilePath = sourceMapFile.FullName; 

      var regex = new Regex(",\\s*[^\\s\\\";]{1,3}?(;|\\\")"); 

      var oldContent = File.ReadAllText(sourceMapFilePath); 

      var newContent = regex.Replace(oldContent, "$1"); 

      File.WriteAllText(sourceMapFilePath, newContent); 
     } 
    } 

io sono sicuri se si tratta di Webpack che non dovrebbe essere la generazione dei segmenti o Visual Studio che dovrebbero essere loro manipolazione.

Aggiornamento: Ho creato un Bug sul sito Connect per Visual Studio che copre questo problema.