Débogage Ionique 2 dans le Code de Visual Studio - Comment Frapper les points d'arrêt dans les Fichiers sources?

Problème:
Les points d'arrêt ne sont que le fait d'être frappé dans la concaténation de fichier de build www\build\js\app.bundle.js

Reproduire

  1. J'ai démarrer l'émulateur, exécutez l'application sur l'émulateur (cela fonctionne parfaitement)

  2. Définir des points d'arrêt dans le dossier app fichiers par exemple app/pages/list/list.js

  3. VS Code>Debug Volet, je choisis Attach to running Android on Emulator. Le débogueur s'exécute et se connecte.

Résultat Réel

  1. Les points d'arrêt ne sont pas touchés dans les fichiers source d'origine. Ils ne se faire frapper si je l'ai mis dans le build fichier js www\build\js\app.bundle.js

Note sur Sourcemaps

Dans MyIonic2Project\.vscode\launch.json, les paramètres de l'Attacher à l'Exécution de l'Émulateur de configuration sont:

"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false

Ma Configuration

C'est un Ionique 2 du projet créé à l'aide de:

ionic start --v2 -a "My Ionic 2" MyIonic2Project tutorial

Cela fonctionne parfaitement avec les commandes cli: sur google Chrome avec ionic serve, émulateur en utilisant ionic emulate android, et sur l'appareil (HTC One M8), donc tout est bon jusqu'à ce point 🙂

J'ai installé la dernière Code de Visual Studio, et inclus les Cordova outils: ext install cordova-tools

github.com/Microsoft/vscode-cordova/issues/92 - "Nous ne sommes pas totalement en charge ionique 2 pour le moment. Ionique 2 projets sont structurés différemment à ionique 1"
Aussi en raison de github.com/Microsoft/vscode/issues/6930
Mise à jour en juillet 2016 - C'est en cours d'élaboration à l'heure actuelle. Question: github.com/Microsoft/vscode-cordova/issues/..., Pull Request: github.com/Microsoft/vscode-cordova/pull/173

OriginalL'auteur Drenai | 2016-05-24

  1. 7

    J'ai des infos supplémentaires, mais ce serait trop long à mettre en commentaire, afin de mettre en comme réponse. Donner de la rétroaction si les mises à jour nécessaires.

    De l'Ionique 2 forums, voici un lien vers un tutoriel pour le Débogage directement dans VSCode Tapuscrit fichiers.

    Utilise Ionique CLI extension, pour des raisons de concision. Aussi besoin de Debugger pour extension Chrome pour VSCode.

    De débogage Ionique 2 Applications en Chrome de Code de Visual Studio
    http://www.damirscorner.com/blog/posts/20161122-DebuggingIonic2AppsInChromeFromVisualStudioCode.html

    Mise à jour:
    Voir @Kinorsi commentaire pour plus de détails sur l'obtention de ce travail pour mobile

    Il y a un problème connexe sur GitHub - qui a été Closed, ce qui peut être intéressant de noter. La résolution a été Ionique 2 RC système de construction n'est plus à l'aide de gulp. Il y a aussi un autre commentaire au sujet de l'utilisation de inline sourcemaps "ionic_source_map_type": "#inline-source-map":
    Tapuscrit fichiers source ne peut être débogué sur un vrai appareil mobile en Android #22

    La poste travaille pour google chrome. Mais comment le faire fonctionner sur l'appareil? Je ne peux pas faire de point de rupture avec mon genimotion émulateur...
    Que je ne sais pas. J'ai vu une question soulevée à propos de l'appareil mobile de débogage des fichiers TS sur les ionique github, havn a pas un lien de droit maintenant, mais la peine de chercher
    J'ai eu la réponse de la poste de l'auteur dans les commentaires: Pour le faire fonctionner, j'ai dû ajouter de l' --dev passer à ionique:le script de construction dans le paquet.json, comme il est suggéré dans cette GitHub question: "ionic:build": "ionic-app-scripts build --dev"
    De grandes choses!
    Qu'en est ionique 3?

    OriginalL'auteur Drenai

  2. 4

    Bien, cette question est un peu vieux, donc VSCode beaucoup changé depuis. Il fonctionne presque droite de la boîte, et le sourcemaps trop de travail. Testé avec Ionic3.

    1 - Installer la Cordoue des Outils de vulgarisation de Code de Visual Studio.

    2 - Générer un lancement.json fichier en sélectionnant "Cordova" l'environnement dans le Panneau de Débogage.
    Débogage Ionique 2 dans le Code de Visual Studio - Comment Frapper les points d'arrêt dans les Fichiers sources?

    Après cela, le débogage sur Chrome fonctionne si vous exécutez "Servir le navigateur (ionique)".

    3 - Si vous voulez la faire fonctionner avec un simulateur iOS ou de l'appareil, vous devez installer le Webkit iOS Debug Proxy.

    J'ai lutté pendant si longtemps pour faire ce travail que j'ai fait tout un article sur mon blog pour le rendre plus simple pour les autres: https://geeklearning.io/live-debug-your-cordova-ionic-application-with-visual-studio-code/

    Avec cela, vous pouvez déboguer sur chrome, les simulateurs et les dispositifs réels avec Ionique livereload!
    Je suis toujours en avoir quelques problèmes parfois, mais j'espère que cette aide.

    OriginalL'auteur Mitch