web-dev-qa-db-fra.com

Débogage de TypeScript avec des cartes source et un pack Web

J'ai un projet écrit en TypeScript et je veux pouvoir le déboguer (soit en Chrome Dev Tools ou dans Intellij).

Au début, j'ai constaté que la fonctionnalité import de TypeScript n'était pas prise en charge. J'ai donc essayé d'utiliser Webpack avec webpack dev server mais cela a complètement échoué. Même si mon application fonctionnait (à cause d'un seul bundle.js fichier qui contient tout le code), il serait impossible de faire correspondre le code avec les cartes source données, ce qui rendrait le débogage impossible.

Après avoir arrêté d'utiliser Webpack, j'ai essayé d'ajouter require.js comme dépendance pour résoudre le require is not defined erreur je devenais. Cela a fonctionné mais maintenant je suis à nouveau coincé et je reçois ceci:

Uncaught ReferenceError: les exportations ne sont pas définies

Je ne sais pas pourquoi ça ne marche pas. Je souhaite que mon application fonctionne (soit via WebPack, soit en mesure de résoudre les instructions d'importation après la transpilation) tout en continuant à déboguer le code à l'aide des mappes source produites par TypeScript. Comment puis-je atteindre cet objectif?

Je joins mes fichiers de configuration au cas où il manquerait quelque chose:

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
};
debuggingtypescriptintellij-ideawebpacksource-maps
28
Konstantine

Pour activer le débogage avec Webpack, ajoutez devtool: "source-map" à ton webpack.config.js.

Pour charger des fichiers en utilisant require.js, changement "module": "AMD" dans tsconfig.json. require.js ne supporte pas le chargement de modules commonjs.

19
Saravana

Je vais poster une réponse ici. Cette réponse peut pas fonctionner pour vous (voir l'étape 5). Cela varie beaucoup d'une personne à l'autre. Après tant de jours passés dans la recherche, le message de robin-a-meade de GitHub était celui qui l'a cloué.

Avant de commencer, le principal problème semble résider dans l'URL du mappage source, à l'intérieur du fichier de configuration de débogage du code VS, et dans la façon dont il (l'application VS Code) voit l'application. Ceci est indépendant de toute pile back-end que vous utilisez (E.g Express, .NET Core, Django, etc.). La seule chose dont vous devez être conscient, est que Google Chrome charge avec succès la carte source générée lorsque votre application est en cours d'exécution.

Utilisé:

  • Code Visual Studio version 1.13.1
  • NodeJS 7.4.0
  • Windows 10 64 bits
  • Webpack 2.5 (devrait également s'appliquer à Webpack 3)
  • TypeScript 2.3

Installez Google Chrome Extension:

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

2,3) tapez "Debugger for Chrome" sans virgule et cliquez sur Installer.

Installing Chrome Extension for VS Code

Configurez le débogueur:

Configuring the debugger

4) Cliquez sur l'icône de bogue.

5) Cliquez sur l'icône représentant une roue dentée. Cela ouvrira "launch.json" qui est utilisé pour configurer le débogage dans Visual Studio Code.

À présent. C'est là que ça devient vraiment difficile. C'est la partie qui peut ou ne peut pas fonctionner pour vous.

Encore une fois, merci à robin-a-meade de GitHub dont le code a fonctionné:

6) Entrez les informations suivantes. Cela va lancer une instance de Google Chrome avec http://localhost dans l'URL. Ensuite, il utilisera le webpack:// chemin pour rechercher les mappages Webpack. C'est vraiment difficile et vous devrez peut-être essayer différentes combinaisons pour voir laquelle 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 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"
        }

Configuration Webpack Ajouter:

devtool: "source-map"

Pour la configuration de votre webpack. Cela devrait aller sous l'objet modules.export. devtool sourcemap in Webpack

Exécuter/Construire le projet avec Webpack; cela devrait générer la carte source (vérifiez si la carte source est générée, sinon rien ne fonctionnera!): enter image description here

Alors vous devriez être prêt à partir: appuyez sur le bouton "Play" dans le débogage et cela devrait fonctionner! enter image description here

enter image description here

Rappelez-vous, tout fichier qui est non importé dans votre fichier .js (où vous avez toutes vos importations et nécessite), ne pourra pas définir de point d'arrêt.

Si cela ne fonctionne pas, consultez cette liste d'URL pouvant vous aider.

  1. https://github.com/angular/angular-cli/issues/245 (page miracle qui m'a aidé)
  2. Déboguer le noeud pack Webpack ts avec le code Visual Studio
  3. Code VS: erreur "Point d'arrêt ignoré car code généré introuvable"
  4. https://github.com/Microsoft/vscode-chrome-debug
  5. https://github.com/Microsoft/vscode/issues/25349
  6. https://github.com/angular/angular-cli/issues/122
  7. https://github.com/Microsoft/vscode-chrome-debug/issues/4 (en bas de la page)
  8. https://stackoverflow.com/a/42405563/1057052

Pour générer des cartes soruce: Comment puis-je générer des cartes source en utilisant babel et webpack?

24
Jose A