Comment puis-je déboguer un JS minifié dans Firebug?

Question

J'ai une page web qui comprend une quantité folle de minifiés fichiers JS. La page web fonctionne parfaitement bien sur mon réseau local, mais jette un peu de JS erreur sur la mise en scène. Il y a un problème en JS et je wan pas à déboguer. Lorsque je charge le JS dans Firebug de la balise de script, il apparaît dans une longue ligne horizontale. Est-il un moyen de sortir dans Firebug qui se dilate ou se embellit le script pour le débogage? Je sais que je peux utiliser jsbeautifier mais ils l'habitude de m'aider. Je ne peux pas télécharger un fichier étendu à la CAN, défaites le but de l'utilisation de CDN.

Points à noter,
a) je ne peux pas contrôler la boîte qui sert JS, son sur CA, je l'ai mentionné.
b) je peux utiliser beautifiers etc mais cela serait m'aider au débogage du script au moment de l'exécution? À mon humble avis, pas de
c) d'Être lié par NDA et d'autres choses, je ne peux pas partager le script, mais c'est un problème générique, vous pouvez rencontrer avec un minifiés jQuery

Answer 1

Mise à jour: Il y a maintenant une extension firebug qui embellit JavaScript:

https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/

Cela fonctionne parfaitement pour moi dans Firefox 12.0.

Crédit à cette réponse pour l'avoir repéré.

Answer 2

1. Embellissez votre script
2. Ajoutez l'hôte CDN dans / etc / hosts ou votre DNS local pour le résoudre sur votre propre serveur Web.
3. Hébergez la version embellie et tout ce dont vous avez besoin sur ledit serveur Web

Answer 3

Edit: Cette réponse est également correcte pour Firefox 31+

Je sais que cette question concerne Firefox / Firebug, mais Chrome s’en occupe très bien. Il suffit de charger le fichier réduit et d’appuyer sur le bouton {} en bas pour l’embellir instantanément, ce qui permet de créer des points de rupture et d’autres méthodes de débogage.

Answer 4

Il s’agit d’un problème courant et l’équipe de développement de Chrome a récemment proposé une solution élégante, appelée Source Maps - voir http://www.html5rocks.com/fr/tutorials/developertools/sourcemaps/ pour plus d’informations, Je pense que vous constaterez que c'est exactement ce que vous (et le reste d'entre nous) réclamez! :)

Answer 5

Ce n'est plus une solution de contournement, mais il peut aider. L'idée est que nous allons remplacer les fichiers provenant du serveur de fichiers sur votre machine.
Cela fonctionne avec n'importe quel navigateur.
Il faut un peu de configuration la première fois (15 minutes peut-être), mais il peut être très pratique.
Il peut également permet de tester vos corrections de bogues dans un live/environnement de prod.

1. Obtenir Fiddler (c'est un web debugging proxy), l'installer, le lancer.
   http://www.fiddler2.com/fiddler2/
   (Redémarrer le navigateur après l'installation pour obtenir le Violoneux extension)
2. Si vous déboguez un site HTTPS, vérifiez d'abord ceci:
   http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
3. À partir de maintenant, vous devriez voir dans un violon ("les Sessions Web" sur le volet de gauche) tous les téléchargements effectués par votre navigateur, y compris les fichiers JS.
   Si non, vérifiez ceci : Fiddler pas l'affichage des sessions
4. Trouver le fichier que vous souhaitez déboguer dans la liste (Ctrl+F fonctionne)
5. Cliquez sur le fichier. Alors soit:
   • obtenir le contenu du fichier par les inspecteurs volet (textView onglet), d'embellir, de l'enregistrer dans un fichier sur votre ordinateur local
   • ou avoir accès à un fichier qui contient le code source (ex: à partir de votre source de contrôle)
6. Aller à la liste à réponse préenregistrée de l'onglet (en haut à gauche de la fenêtre).
   Sélectionnez "Activer les réponses automatiques" case à cocher.
   Sélectionnez "Inégalée demandes passthrough" case à cocher.
7. Faites glisser votre fichier à partir du volet de gauche à droite volet (pré-remplit la règle de l'éditeur en bas)
8. Définir le champ d'autres avec le chemin de votre fichier local
9. Cliquez sur le bouton Enregistrer
10. Recharger la page et profiter de votre session de débogage.

Fiddler peut faire beaucoup plus de choses, mais ce cas d'utilisation répond à la question initiale.