web-dev-qa-db-fra.com

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


J'ai une page Web qui inclut une quantité insensée de fichiers JS minifiés. La page Web fonctionne parfaitement sur mon réseau local, mais génère une erreur JS lors de la mise en place. Il y a un problème dans JS et je ne veux pas le déboguer. Lorsque je charge le script JS dans la balise de script de Firebug, il apparaît sur une longue ligne horizontale. Existe-t-il un moyen de sortir ou d’embellir le script de débogage dans Firebug? Je sais que je peux utiliser jsbeautifier mais ils ne m'aideront pas. Je ne peux pas télécharger un fichier développé sur CDN, annule l'objectif d'utiliser CDN.

Points à noter,
a) Je ne peux pas contrôler la boîte qui sert JS, c’est sur CDN, je l’ai mentionné.
b) Je peux utiliser des beautificators, etc. IMHO, non
c) Étant lié par NDA et d’autres problèmes juridiques, je ne peux pas partager le script, mais c’est un problème générique; vous pouvez le rencontrer avec un jQuery réduit

javascriptdebuggingfirefoxfirebug
60
Kumar
  1. Beautify 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
  4. Firefox et Chrome (versions à partir de cette édition) prennent en charge l’embellissement du script avec le bouton {} disponible dans l’inspecteur.
48
rsp

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 à ceci répondre pour l'avoir repéré.

55
Jonathan Sayce

Il suffit de charger le fichier minifié et d’appuyer sur le bouton {} en bas pour l’embellir instantanément, ce qui permet des points de rupture et d’autres méthodes de débogage. (Vrai pour Chrome aussi)

29
Kyle Heironimus

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) avez réclamé! :)

14
MarcusTucker

Considérez un changement!

Firefox avec Firebug était ma méthode de débogage JavaScript préférée depuis presque un an, mais je suis récemment passé aux outils pour développeurs de Google Chrome, qui sont bien plus avancés.

  • Chrome prend en charge une embellissement à la volée (fonctionnalité intégrée) des ressources JavaScript enter image description here

  • Une fois embelli, vous êtes libre de déboguer le fichier de ressources JavaScript, car celui-ci a été téléchargé "nativement" embelli du serveur Web. Les points de rupture sont définis en cliquant sur le numéro de ligne .enter image description here

  • L’un des fonctionnalités les plus puissantes,
    Is _ {une fois que vous vous êtes arrêté à un point de rupture, vous êtes libre d'exécuter des commandes (à l'aide de la console) de la même façon que vous êtes au point de rupture} Dans Firefox, vous ne pouvez pas faire ça .enter image description here C’est tellement facile à déboguer (même avec des fonctions anonymes), vous ne reviendrez jamais à Firefox.
    Try It!

7
user257319

C'est plus une solution de contournement, mais cela peut aider. L'idée est que nous allons remplacer les fichiers provenant du serveur par des fichiers sur votre machine .
Cela fonctionnera avec n'importe quel navigateur .
Cela prend un peu de configuration la première fois (15 minutes peut-être), mais alors cela peut être très pratique .
Cela peut également vous aider à tester vos corrections de bugs dans un environnement live/prod.

  1. Obtenez Fiddler (c'est un proxy de débogage Web), installez-le, lancez-le.
    http://www.fiddler2.com/fiddler2/
    (Redémarrez le navigateur après l'installation pour obtenir l'extension Fiddler)
  2. Si vous déboguez un site Web HTTPS, vérifiez d'abord ceci:
    http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
  3. À partir de maintenant, vous devriez voir dans Fiddler (volet "Sessions Web" à gauche) tous les téléchargements effectués par votre navigateur, y compris les fichiers JS .
    Sinon, vérifiez ceci: Le violoneur n'affiche pas les sessions
  4. Recherchez le fichier que vous souhaitez déboguer dans la liste (Ctrl + F fonctionne)
  5. Cliquez sur le fichier. Puis soit:
    • récupérez le contenu du fichier à partir du volet inspecteurs (onglet TextView), embellissez-le, enregistrez-le dans un fichier sur votre ordinateur local
    • ou avoir accès à un fichier contenant le code source (par exemple, à partir de votre contrôle de code source)
  6. Accédez à l'onglet Répondeur automatique (volet supérieur gauche).
    Cochez la case "Activer les réponses automatiques" .
    Cochez la case "Requêtes sans correspondance".
  7. Faites glisser votre fichier du volet gauche au volet droit (éditeur de règles de préremplissage en bas)
  8. Définissez l'autre champ avec le chemin de votre fichier local
  9. Cliquez sur le bouton Enregistrer
  10. Rechargez la page et profitez de votre session de débogage.

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

7
JB Hurteaux

Pretty-print votre JavaScript. Google cela et vous trouverez plusieurs embellisseurs JS en ligne.

Il m'est arrivé d'utiliser http://jsbeautifier.org/ moi-même et cela fonctionne bien, mais recherchez-en d'autres et utilisez-en un qui convient à vos besoins.

Avertissement: vous ne pourrez toujours pas obtenir de noms de variables significatifs locaux (qui sont généralement renommés par un minifier). Si le code a été compilé par le compilateur Closure Closure , vous ne recevrez absolument aucune information utile, même une fois beutifié, car alors toutes les variables , fonctions et propriétés sont mutilées (pas uniquement locales).

Maintenant, si votre problème concerne le code de débogage qui vient de l’extérieur (par exemple un CDN), il est évident que ce code serait réduit au minimum, et vous ne pouvez pas sauvegarder votre version embellie. Dans ce cas, vous pouvez remplacer les balises qui chargent le code à partir d'un CDN par une URL pointant vers votre version locale, puis embellir le code (téléchargé à partir du CDN) sur votre propre serveur, puis déboguer avec FireBug.

À présent, si vous ne contrôlez même pas le code HTML contenant ces balises (par exemple, elles résident sur un serveur externe), vous ne pourrez malheureusement pas faire ce que vous voulez sans télécharger physiquement l'intégralité du site sur votre propre serveur. Même si vous avez téléchargé l'intégralité du site (avec tous les fichiers), il est possible que cela ne fonctionne pas car le site peut être régi par un langage de traitement dorsal ou accéder à une base de données principale. Dans ce cas, vous devrez également simuler toutes ces données. Cela peut être fait, cependant - il vous suffit de vivre beaucoup de douleur. Ma recommandation est de sauvegarder une version de la page Web et de l'exécuter sur votre propre serveur, en servant de code embelli à partir de votre propre serveur pour le débogage.

3
Stephen Chung

Le fait de placer des points d'arrêt sur JavaScript facilite le débogage, mais si votre code a déjà été mis en production, il a probablement été réduit. Comment pouvez-vous déboguer du code minifié? Certains navigateurs disposent d’une option permettant de réduire la taille de votre JavaScript.

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

Dans Internet Explorer, cliquez sur l'icône de l'outil dans la liste déroulante de sélection de script pour rechercher l'option permettant de formater le code JavaScript.

Opera va automatiquement embellir JavaScript. La source

0
Aamol