Débogage avec chrome avec es6

Le problème concerne le code source (via les cartes source) pour le mappage de code réel. Alors que la source est concise et dense, le code généré est généralement plus long et le mappage entre les deux n'est pas (et probablement pas) fait d'une manière qui garantira une relation 1: 1 entre les deux.

Donc, lorsque vous essayez de placer un point d'arrêt dans une instruction de ligne unique telle que (foo) => bar , le code exécuté réelle est d'au moins quelques lignes de long et je suppose (et ne sais pas vraiment!) Que les tentatives tentent de placer Le véritable point d'arrêt simplement sur la première ligne du code réel, en cours d'exécution. – Ce qui à son tour échoue pour les expressions.

C'est un inconvénient inhérent au code généré et s'applique à toutes les langues de compilation à js avec des cartes source. Malheureusement, je ne connais pas une bonne solution de contournement. En dernier recours dans ces cas, je ferme les cartes source dans le navigateur et franchi le code réel généré.

J'espère que cela pourra aider :/

Avez-vous suivi toutes les instructions ici?

https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps

En outre, si vous avez activé le drapeau de l'harmonie, vous n'aurez pas besoin d'utiliser les babeljs pour transporter, Chrome comprendra ES6 / 2015 ou du moins le sous-ensemble auquel il prend en charge … alors peut-être désactiver les babeljs et éviter tous les liens?

Normalement, je me bornerais uniquement à tirer le meilleur parti des résultats, mais à partir de ce que vous montrez ici, je tire une conclusion en comparant le débogueur dans Chrome à la déclaration du débogueur javascript. Je crois qu'ils ne fonctionnent pas différemment.

Nous savons donc que vous ne pouvez pas placer une déclaration de débogueur dans une zone de paramètres de fonctions.

Cela se passe beaucoup dans votre exemple enregistré.

 .then(debugger) 

Si vous voulez pouvoir y accéder, vous devez ajouter plus de code.

 .then((whatever) => { // We need an existing empty line here. return whatever }) 

Également éteindre les cartes source est également une bonne idée, puis passez simplement le code ligne par ligne.

Je remarque que vous voulez faire une pause près ou dans un flux prometteur. Rappelez-vous cet avertissement que la pause du code asynchrone dans les applications complexes peut provoquer des conditions de course et de nombreux comportements inattendus.

Il semble que ce soit une erreur sur Chrome.

Il est fixé sur Canary: https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21

Il y a une grande discussion dans github si elle ne résout pas votre problème. https://github.com/webpack/webpack/issues/2145