web-dev-qa-db-fra.com

Comment forcer Chrome outils de débogage à déboguer dans un joli code?

Bien que j'utilise du joli code et que j'aie configuré les points d'arrêt dans l'onglet "Pretty code", le débogueur continue de fonctionner en code minifié. (Je ne vois pas exactement où je suis et j'ai besoin de basculer en permanence entre la source et le "joli code"). Sur les mêmes pages avec le même script, cela fonctionne parfois et parfois non. Je ne trouve pas la cause ni aucune différence dans la façon de l'activer.

Existe-t-il un moyen de forcer le débogueur à utiliser du "joli code"? Des idées ou des questions supplémentaires? Faut-il signaler cela comme un bug?

EDIT: Je ne comprends toujours pas ce qui se passe mais il y a un correctif. Donc, lorsque cette situation se produit, modifiez simplement le script et ajoutez "débogueur;" mot-clé après le curseur. Cela fera un point d'arrêt. Ensuite, si vous utilisez du "joli code", le débogueur restera dans le code prettifié. Comme je l'ai dit, je ne comprends pas pourquoi cela se produit donc j'attends toujours des réponses.

EDIT: la version actuelle du navigateur est 42.0.2311.135 (64 bits).

EDIT: Dave a souligné qu'il y avait un bug signalé sur quelque chose de très similaire. https://code.google.com/p/chromium/issues/detail?id=415406 Il indique que cela est lié à la taille du fichier mais je peux " t confirmer cela. J'ai changé de titre pour refléter ces résultats.

33
Ante

Vous pouvez appeler cela un bug. Vous pouvez l'appeler un dillema.

Billet ouvert à partir du 9 août 201 (Chrome v. 28)

Observations du rapporteur de bogues

J'ai passé un certain temps à déboguer cela et à me familiariser avec la façon de développer des devtools localement; Je ne sais pas si tout cela est utile, mais voici un braindump de ce que j'ai regardé jusqu'à présent et quelques intuitions:

Lorsque vous attachez un point d'arrêt dans le fichier .js d'origine, l'interface utilisateur semble devenir confuse et attribue le point d'arrêt au fichier .coffee ou .ts associé par l'association sourceMap [voir image-1, ci-jointe]

Cependant, lorsque vous décochez le point d'arrêt à désactiver, l'interface utilisateur se met à jour correctement pour afficher le point d'arrêt au bon endroit dans le fichier .js. [voir image-2, ci-jointe]

Il me semble qu'une recherche incorrecte se produit dans WebInspector.CompilerScriptMapping.rawLocationToUILocation ou WebInspector.CompilerScriptMapping.uiLocationToRawLocation

Billet ouvert à partir du 21 sept. 2014 (Chrome v. 37)

Observation du développeur de chrome

Ce n'est pas quelque chose qui pourrait être résolu facilement. Le gestionnaire de points d'arrêt est construit autour de l'idée que le point d'arrêt est toujours affiché dans le meilleur emplacement possible de l'interface utilisateur, qui est la source non compilée dans le cas des cartes sources. Pour résoudre ce problème, nous devions utiliser l'emplacement principal de l'interface utilisateur du point d'arrêt comme indication de l'endroit où il devrait être affiché. De plus, puisque la ligne d'exécution sera affichée par défaut dans les sources non compilées, il est essentiel que nous continuions à y afficher également nos points d'arrêt. Donc, tout cela se termine par la nécessité d'afficher les points d'arrêt (et la ligne d'exécution) sur plusieurs emplacements de l'interface utilisateur en même temps. Toutes les actions avec ces emplacements doivent fonctionner correctement, etc.

Ceci est un effort important et ne ressemble pas à un "GoodFirstBug" pour moi.


Conclusion:

Prettify ne semble pas créer une nouvelle version non réduite. Il est plutôt rendu. C'est logique. Avec tous les différents frameworks et saveurs (par exemple Coffee), si le débogueur crée un nouveau fichier, il y a un fort potentiel d'erreur.

Le gestionnaire de points d'arrêt est construit autour de l'idée que le point d'arrêt est toujours affiché dans le meilleur emplacement possible de l'interface utilisateur, qui est la source non compilée dans le cas des cartes sources.

J'interprète cela comme signifiant que le Chrome Chrome et débogueur continuera de fonctionner à partir de la version minifiée. Lorsque vous définissez un point d'arrêt dans un "joli" fichier, le débogueur le définit dans le fichier minifié et donne au développeur un "joli" rendu du débogueur parcourant le fichier minifié.

C'est beaucoup à gérer pour le débogueur et peut être assez fragile. Nous pouvons appeler cela un bug ou une fonctionnalité très ambitieuse pour laquelle beaucoup de choses peuvent mal se passer.

**

J'ai ajouté ce fil aux deux bogues et envoyé un e-mail aux deux développeurs qui lui sont affectés.

**

10
Dave Alperovich

Icons help

Dans Chrome et Safari, sélectionnez simplement l'onglet "Scripts", trouvez le fichier approprié et appuyez sur l'icône "{}" (jolie impression) située dans le panneau inférieur.

3
peterpeterson

Que diriez-vous de cela?: Générez la version jolie-impression de votre version "min" et enregistrez en utilisant votre nom de version "min": Remplacez le "min" par un joli "one"

2
Pakosis

On dirait que vous cliquez sur l'icône "{}" (jolie impression) située dans le panneau inférieur et que vous y définissez un point d'arrêt sans y attacher carte source du fichier d'origine.

Lorsqu'on leur donne un fichier .map, Chrome dev tools et mappe chaque ligne de code minifié exécuté sur le fichier source d'origine en utilisant les données du fichier .map. Sinon, il est préférable de mettre en retrait/formater le fichier minifié.

Je vous suggère d'utiliser grunt uglify ou similaire pour réduire votre js qui générera automatiquement un fichier de carte pour le débogage. Consultez les liens suivants pour plus d'informations sur la façon de procéder.

http://blog.teamtreehouse.com/introduction-source-maps

fichiers Javascript .map - cartes source javascript

1