Débogage avec chrome avec es6
J'essaie d'utiliser Ecmascript 2015 pour mon projet et j'ai du mal à ajouter des points d'arrêt à des endroits spécifiques (des endroits que j'estimais logiques d'avoir un point d'arrêt).
J'ai le drapeau # enable-javascript-harmony en chrome défini sur true (si cela aide), mais j'utilise babeljs pour transpiler et j'ai des cartes source permettant de définir directement des points d'arrêt dans le fichier que je souhaite déboguer. Je suis presque certain que je fais quelque chose de mal, mais quelqu'un peut-il m'indiquer où je fais une erreur.
Pour référence, j'ai ajouté un GIF de ce dont je parle.
Le problème concerne le code source (via les cartes source) et le mappage réel du code. Bien que la source soit concise et dense, le code généré est généralement plus long et le mappage entre les deux n'est pas (et ne peut probablement pas) être fait de manière à garantir une relation 1: 1 entre les deux.
Ainsi, lorsque vous essayez de placer un point d'arrêt dans une instruction à une seule ligne telle que (foo) => bar, le code exécuté réel dure au moins quelques lignes et je suppose (et je ne sais pas vraiment!) Que devtools essaie de placer le point d'arrêt réel simplement sur la première ligne du code réel en cours d'exécution. - Ce qui échoue à son tour pour les expressions.
C'est un inconvénient inhérent au code généré et s'applique à tous les langages de compilation à js avec des mappes source. Malheureusement, je ne suis pas au courant d'une solution de contournement efficace. En dernier recours, dans ce cas, il suffit de désactiver les cartes source dans le navigateur et de parcourir 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
De plus, si vous avez activé le jeu d'icônes d'harmonie, vous n'aurez pas besoin d'utiliser babeljs pour transpiler, Chrome comprendra ES6/2015 ou au moins le sous-ensemble qu'il prend en charge ... alors, désactivez peut-être babeljs et évitez les cartes source toutes ensemble.
Cela semble être une erreur sur Chrome.
C'est réglé sur Canary: https://bugs.chromium.org/p/chromium/issues/detail?id=611328#c21
Il y a une grosse discussion dans github si cela ne résout pas votre problème . https://github.com/webpack/webpack/issues/2145
Normalement, je blâmerais uniquement les cartes source, mais de ce que vous montrez ici, je tire une conclusion en comparant debug in chrome à l’instruction javascript du débogueur. Je crois qu'ils ne fonctionnent pas différemment.
Nous savons donc que vous ne pouvez pas placer une instruction 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 faire une pause, vous devez ajouter plus de code.
.then((whatever) => {
// We need an existing empty line here.
return whatever
})
Il est également judicieux de désactiver les cartes source, puis de parcourir le code ligne par ligne.
Je remarque que vous voulez faire une pause près ou dans le flux promis . N'oubliez pas cet avertissement selon lequel le fait de suspendre le code asynchrone dans des applications complexes peut être à l'origine de situations de concurrence critique et, en outre, d'un comportement inattendu.