web-dev-qa-db-fra.com

Comment déboguer TypeScript dans Visual Studio 2015 asp.net 5?

Existe-t-il un moyen de déboguer des fichiers TypeScript à partir de l'application Visual Studio 2015 CTP6 asp.net 5? Sinon, il existe peut-être un moyen de configurer les fichiers de carte source, donc quand je les débogue dans le navigateur et que je peux enregistrer automatiquement les modifications apportées à mes fichiers .ts sur le serveur? Cela peut être difficile, car les fichiers .ts sont compilés par gulp, mais peut-être que quelqu'un a trouvé une bonne solution pour cela?

debuggingtypescriptasp.net-corevisual-studio-2015
31
Marcin

Le débogage de TypeScript avec Visual Studio fonctionne avec les bons paramètres.

  1. D'abord, vous assurez-vous de créer des cartes sources lors de la compilation de TypeScript en JavaScript. Vous devriez donc avoir un xxx.js.map fichier près de chaque xxx.js.

    Obtenir des cartes sources en exécutant le compilateur TypeScript en dehors de Visual Studio ne pose aucune difficulté, ajoutez à la ligne de commande tsc:

    --sourcemap %1.ts

    votre script gulp créera généralement des sourcemaps par défaut.

  2. Configurez votre application Web dans Visual Studio.

    Définissez Internet Explorer comme navigateur de démarrage. Je l'ai fait fonctionner uniquement avec IE et je ne pense pas qu'un autre navigateur fonctionnera. ( edit : Somewhere I lire qu'il existe un pont de débogage Webkit, donc Chrome le débogage devrait être possible, mais je ne me souviens pas de la source.)

    Dans les propriétés du projet, allez dans l'onglet "Web" et configurez la section "Débogueurs" en bas: Désactivez tous les débogueurs! C'est contre-intuitif et vous pourriez voir ce message d'erreur:

    Vous avez tenté de démarrer le débogueur, mais en fonction de vos paramètres de débogage actuels sur la page des propriétés Web, il n'y a aucun processus à déboguer.

    Cela se produit lorsque l'option "Ne pas ouvrir une page. Attendre une demande d'un autre processus" est sélectionnée et le débogage ASP.NET est désactivé. Veuillez vérifier vos paramètres sur la page des propriétés Web et réessayer. Comme l'indique le message d'erreur, l'action de démarrage en haut des propriétés Web doit être une autre option, comme "page actuelle".

    Définissez points d'arrêt dans votre .ts code dans Visual Studio maintenant ou plus tard.

    Frappez F5

Bien que vous puissiez utiliser Visual Studio Editor pour déboguer et modifier .ts fichiers, "Modifier et continuer" ne fonctionnera pas, aucun navigateur ne peut actuellement recharger .js et .js.map fichiers et continuer. (Corrigez-moi n'importe qui si je me trompe et je serai heureux.)

19
citykid

La meilleure façon de gérer les fichiers cartographiques que j'ai trouvés est d'inclure la source dans les fichiers .js Générés eux-mêmes. C'est évidemment une solution pour un environnement de développement uniquement.

mon tsconfig.json ci-dessous:

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "outDir": "./wwwroot/scripts",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "inlineSourceMap": true,
        "inlineSources": true
    },
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

Les paramètres que vous recherchez sont inlineSourceMap et inlineSources.

Cela permet également de résoudre les problèmes causés par le déplacement du .js Généré vers différents chemins et sans avoir à se soucier de l'emplacement des fichiers de carte.

9
user281921

Dans ASP.NET 5 RC1, vous pouvez demander au compilateur TypeScript de générer des fichiers .map en ajoutant un fichier appelé tsconfig.json au répertoire racine du projet. Visual Studio a même un modèle pour cela appelé "TypeScript JSON Configuration File". Par défaut, il a le contenu suivant:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Le paramètre "sourceMap" indique au compilateur TypeScript de générer les fichiers de mappage nécessaires au débogage.

Dans mon cas, j'ai supprimé la valeur "wwwroot" de la section "exclude" car mes fichiers source Angular TypeScript sont situés sous wwwroot\App.

Une explication détaillée des paramètres tsconfig.json peut être trouvée ici: https://github.com/Microsoft/TypeScript/wiki/tsconfig.json

4
mobileiq

Le moyen le plus simple que j'ai trouvé est de mettre tous les fichiers TypeScript dans le wwwroot/app dossier et laissez les fichiers js générés par Visual Studio pour aller où ils le font par défaut. En utilisant gulp, je les injecte simplement dans des fichiers HTML. Dans Visual Studio 2015, cela fonctionne très bien et avec les tâches gulp, je peux également facilement configurer une tâche pour regrouper js pour la production.

2
Marcin

Lorsque vous utilisez gulp, vous pouvez écrire les sourcemaps avec un répertoire relatif. De cette façon, vos fichiers TS sont correctement résolus par Visual Studio. J'utilise gulp-TypeScript et gulp-sourcemaps pour ma compilation TypeScript.

Sous la partie compilation de mon fichier gulpfile.js (n'oubliez pas de désactiver la compilation TypeScript dans votre fichier de projet)

var tsProject = ts.createProject({
    declarationFiles: false,
    noExternalResolve: false,
    target: 'ES5',
    sortOutput: true,
    noEmitOnError: false,
    sourceMap:true
});

gulp.task('script', function () {
    var tsResult = gulp.src('App/Ts/**/*.ts')
            .pipe(sourcemaps.init())
            .pipe(ts(tsProject));
    return tsResult.js.pipe(concat('App.js'))
            .pipe(sourcemaps.write('.', {includeContent:false, sourceRoot: '../../App/Ts/'}))
            .pipe(gulp.dest('wwwroot/js'));
});

(J'ai modifié mon gulpfile pour plus de lisibilité, alors vérifiez les erreurs de compilation/codage)

2
markwilde