Débogage tapuscrit avec la source des cartes et des webpack

J'ai projet écrit en caractères d'imprimerie et je veux être en mesure de le corriger (en Chrome Dev Tools ou dans Intellij).

Au premier abord, j'ai vu que la Machine est import fonctionnalité n'était pas pris en charge. J'ai donc essayé d'utiliser Webpack avec webpack dev server mais cela a échoué complètement. Même si ma demande a été de travail (en raison d'avoir un seul bundle.js fichier qui a tout le code), il serait impossible de faire correspondre avec le code source donné des cartes et cela rend le débogage impossible.

Après j'ai cessé d'utiliser webpack j'ai essayé d'ajouter require.js comme une dépendance de résoudre le require is not defined erreur que je recevais. Qui a fonctionné mais maintenant je suis coincé à nouveau et se présente:

Uncaught ReferenceError: les exportations n'est pas défini

Je n'ai aucune idée de pourquoi cela ne fonctionne pas. Je veux faire ma demande de travail (que ce soit par webpack ou d'être en mesure de résoudre les déclarations d'importation après transpilation) et toujours être en mesure de déboguer le code à l'aide de la machine-produit de la source-cartes. Comment puis-je y parvenir?

Je suis joins mes fichiers de config dans le cas où il y a quelque chose qui manque:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js:

module.exports = {
    resolve: {
        extensions: [/*'.ts', '.tsx', */'.js']
    },
    entry: './scripts/main.js',
    output: {
        path: '/',
        filename: 'app.js'
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' }
        ],
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
            {test: /\.css$/, loader: "style!css"}
        ]
    },
    watch: true
};

OriginalL'auteur Konstantine | 2017-03-19

  1. 12

    Pour activer le débogage avec webpack, ajouter devtool: "source-map" à votre webpack.config.js.

    Pour charger les fichiers à l'aide de require.js, changement "module": "amd" dans tsconfig.json. require.js ne prend pas en charge le chargement commonjs modules.

    Un grand merci! Les deux façons effectivement travaillées. Je peux déboguer à la fois par le biais de chrome via webpack-dev-server ET par le biais de l'Ide, avec correctement mappé et transpiled Tapuscrit

    OriginalL'auteur Saravana

  2. 17

    Je vais poster une réponse ici. Cette réponse peut pas travail pour vous (Voir l'Étape 5). Il varie énormément d'une personne à l'autre. Après tant de jours passés dans la recherche, robin-un-meade du poste de GitHub a été celui qui a cloué.

    Avant le départ, le principal problème semble résider dans la source de la cartographie de l'URL de l'intérieur de la VS Code de Débogage du fichier de Configuration, et comment il (VS Code) voit l'application. Ceci est indépendant de toute arrière-fin de la pile que vous utilisez (E. g Express, .NET Core, Django, etc.). La seule chose que vous devez être conscient de, c'est que Google Chrome charge correctement la source générée carte lorsque votre application est en cours d'exécution.

    Utilisé:

    • Code de Visual Studio ver 1.13.1
    • NodeJS 7.4.0
    • Windows 10 64 bits
    • Webpack de 2,5 (qui Doit s'appliquer pour Webpack 3)
    • Tapuscrit 2.3

    Installer Google Chrome Extension:

    1) Cliquez sur l'icône carrée sur la gauche.

    2,3), de type "Débogueur pour Chrome" sans virgule et cliquez sur installer.

    Débogage tapuscrit avec la source des cartes et des webpack

    Configuration du débogueur:

    Débogage tapuscrit avec la source des cartes et des webpack

    4) Cliquez sur le bug de l'icône.

    5) Cliquez sur l'icône d'engrenage. Cela va ouvrir "le lancement.json", qui est utilisé pour la configuration et le débogage de Code de Visual Studio.

    Maintenant. C'est là que ça devient vraiment difficile. C'est la partie qu'il peut ou peut ne pas fonctionner pour vous.

    Encore une fois, grâce à la robin-un-meade à partir de GitHub dont le code du travail:

    6) Entrez les informations suivantes. Cela va lancer un Google Chrome instance avec http://localhost dans l'URL. Ensuite, il va utiliser la webpack:// chemin d'accès à la recherche pour le Webpack mappages. C'est vraiment délicat et vous pourriez avoir à essayer différentes combinaisons pour voir ce qui fonctionne. 

     {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }

    Si vous utilisez Firefox, essayez d'utiliser celui-ci:

    {
            "name": "Launch Firefox",
            "type": "firefox",
            "firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe",
            "request": "launch",
            "reAttach": true,
            "webRoot": "${workspaceRoot}",
            "sourceMaps": "server",

            "pathMappings": [
                {
                    "url":  "webpack:///",
                    "path": "${webRoot}/"
                }
            ],
            "url": "localhost"
        }

    Webpack Configuration
    Ajouter:

    outil développeur d'internet explorer : "source" plan

    À votre webpack de configuration. Cela devrait passer sous les modules.l'exportation de l'objet.
    Débogage tapuscrit avec la source des cartes et des webpack

    Run/Construire le projet avec Webpack, ce qui devrait générer la source-carte (Vérifier si la carte source est généré, sinon rien ne fonctionnera!):
    Débogage tapuscrit avec la source des cartes et des webpack

    Alors vous devriez être prêt à aller:
    Appuyez sur le bouton "lecture" dans le débogage et cela devrait fonctionner!
    Débogage tapuscrit avec la source des cartes et des webpack

    Débogage tapuscrit avec la source des cartes et des webpack

    Rappelez-vous, tout fichier est pas importés dans votre main .js fichier (où vous avez toutes vos importations et nécessite), ne sera pas en mesure d'avoir un point d'arrêt défini.

    Si cela ne fonctionne pas, vérifiez cette liste d'Url qui peuvent vous aider.

    1. https://github.com/angular/angular-cli/issues/2453 (Miracle de la page qui m'a aidé)
    2. Debug webpack groupée de nœud ts avec le Code de Visual Studio
    3. VS Code: "point d'arrêt ignorée parce que le code généré n'est pas trouvé" d'erreur
    4. https://github.com/Microsoft/vscode-chrome-debug
    5. https://github.com/Microsoft/vscode/issues/25349
    6. https://github.com/angular/angular-cli/issues/1223
    7. https://github.com/Microsoft/vscode-chrome-debug/issues/40 (En bas de la page)
    8. https://stackoverflow.com/a/42405563/1057052

    Pour générer soruce cartes:
    Comment puis-je générer sourcemaps lors de l'utilisation de babel et webpack?

    Envisagez-vous de le re-marquage ce que l'on a accepté la réponse? C'est beaucoup plus que l'actuel.
    Également intéressant de noter ici -- Après que vous avez la bundled.js source de la carte, essayez et de débogage dans le navigateur dev console, de cette façon, vous savez les cartes fonctionnent correctement.

    OriginalL'auteur Jose A