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


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, aucune

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

InformationsquelleAutor Kumar | 2011-03-22
  1. 49
    1. Embellir votre script
    2. Ajouter le CDN d'accueil dans /etc/hosts ou votre local DNS pour la résolution de votre propre serveur web
    3. Hôte de l'embellie de la version et de tout ce dont vous avez besoin sur le dit serveur web
    4. À la fois Firefox et Chrome (versions de cette édition) l'appui à l'embellissement de script avec le {} bouton disponible dans l'inspecteur.
    • C'est une vieille réponse. Ma réponse ci-dessous (en Charge de la minifiés fichier et appuyez sur la {} bouton) s'applique désormais à Firefox 31+ et est beaucoup plus simple.
    InformationsquelleAutor rsp
  2. 55

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

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

    Il fonctionne parfaitement pour moi dans Firefox 12.0.

    Du crédit à cette réponse pour les taches il.

    • C'est vraiment utile. A la chasse de certains problème étrange qui n'est apparu que sur la production, et cela permet de repérer où les choses vont mal. Merci.
    • C'est une vieille réponse. Ma réponse ci-dessous (en Charge de la minifiés fichier et appuyez sur la {} bouton) s'applique désormais à Firefox 31+
    InformationsquelleAutor Jonathan Sayce
  3. 29

    Il suffit de charger la minifiés fichier et appuyez sur la {} bouton en bas et il embellit instantanément, faire des points d'arrêt et d'autres débogage possible. (Vrai pour Chrome aussi)

    • Oh, Firefox a que trop, je n'ai pas d'avis.
    • Pour Firefox, ce n'est pas assez tout le temps. Je suis confronté à ce minification problème dès maintenant. Certains fichiers toujours pas minimisé. Il n'y a pas de demande au serveur pour obtenir le non-minifiés fichier lorsque le jour juste appuyez sur { }
    • Faire des points d'arrêt de travail dans Firefox? On dirait qu'il prend uniquement en charge les points d'arrêt sur la première ligne, comme si le javascript n'avait pas été pretified.
    InformationsquelleAutor Kyle Heironimus
  4. 14

    C'est un problème commun et le Chrome dev team ont récemment viennent avec une solution élégante, qu'ils ont appelé la Source des Cartes - voir http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ pour plus d'info, je pense que vous trouverez que c'est exactement ce que vous (et les autres) ont été criant pour! 🙂

    • J'ai trouvé qu'il y a 2 mois, mais la question est de un an maintenant. J'utilise principalement Firefox, vient de sortir de l'habitude et de là était la question.
    • Carte Source sonore très utile.
    • Malheureusement, *.min.js.carte fichiers ne peuvent pas vous montrer de mappage entre l'original et l'a renommé les variables (les arguments). Théoriquement, je pense que, dans le cas des arguments d'une fonction, il pourrait être fait, mais dans la pratique, les navigateurs ne pas le faire.
    • C'est une vieille réponse. Ma réponse (Charger le minifiés fichier et appuyez sur la {} bouton) s'applique désormais à Firefox 31+
    InformationsquelleAutor MarcusTucker
  5. 7

    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 aussi 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 œuvres)
    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 à 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.

    • Il a résolu mon problème pour utiliser le Dev code de débogage.merci.
    InformationsquelleAutor JB Hurteaux
  6. 7

    Envisager un Changement!

    Firefox w/Firebug était mon préféré JavaScript méthode de débogage pendant presque un an, mais j'ai récemment déménagé à Google-Chrome Developer Tools qui est beaucoup plus supérieure.

    • Chrome prend en charge une À La Volée (fonctionnalité intégrée) de l'embellissement des ressources JavaScript
      Comment puis-je déboguer un minifiés JS dans firebug?

    • Une fois embelli, vous êtes libre de débogage du JavaScript fichier de ressources, comme c'était le "nativement" téléchargé embelli de du serveur web. La rupture des points sont définis en cliquant sur le numéro de la ligne.
      Comment puis-je déboguer un minifiés JS dans firebug?

    • L'un des plus extrêmement puissante fonctionnalité de,

      Est une fois que Vous avez Arrêté À Un point de Rupture, Vous Êtes Libre D'Exécuter des Commandes (à l'aide de la console) Dans Le Même Champ d'application que Vous ÊTES Dans Le point de Rupture. Dans Firefox, vous ne pouvez pas le faire.
      Comment puis-je déboguer un minifiés JS dans firebug?
      Son si facile à déboguer (même les fonctions anonymes), Vous ne serez jamais revenir à Firefox.

      Essayer!

    InformationsquelleAutor
  7. 3

    Jolie-imprimer votre JavaScript. Google et vous en trouverez plusieurs sur la ligne de JS beautifiers.

    Il m'arrive d'utiliser http://jsbeautifier.org/ moi-même et il fonctionne très bien, mais en chercher d'autres et d'utiliser celui qui convient à vos besoins.

    Mise en garde: Vous ne serez pas en mesure d'obtenir des local les noms de variables (qui sont généralement renommé par un minifier). Si le code a été compilé par le Compilateur de Fermeture, alors vous enflammer de ne pas obtenir toutes les informations utiles de retour à tout, même quand beutified, car alors tous les variables et les fonctions et les propriétés sont déformés (pas seulement ceux des locaux).

    Maintenant, si votre problème est avec le débogage de code qui vient de l'extérieur (par exemple, un CDN), évidemment que le code serait minimisé, et vous ne pouvez pas enregistrer votre version embellie de retour. Dans ce cas, vous pouvez remplacer les balises qui se chargent de code à partir d'un rdc avec une url pointant vers votre version locale, alors vous pouvez embellir le code (téléchargé à partir du CDN) dans votre propre serveur et vous pouvez déboguer avec FireBug.

    Maintenant, si vous n'avez pas à même de contrôler le HTML qui contient ces balises (par exemple, ils résident sur un serveur extérieur), puis, malheureusement, il n'existe aucun moyen pour vous de faire ce que vous voulez sans être physiquement téléchargement de 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 peut ne pas fonctionner depuis le site peut être piloté par un traitement en arrière-plan de la langue ou qui accède à une base de données principale. Dans ce cas, vous aurez également besoin de simuler toutes ces données. Il peut être fait, néanmoins, vous avez juste à passer par beaucoup de douleur. Ma recommandation est d'enregistrer une version de la page web et l'exécuter sur votre propre serveur, servant embelli de code à partir de votre propre serveur de débogage.

    • Je suppose que vous n'avez pas compris la question, j'ai ajouté des précisions
    • Voir ma mise en garde. Vous ne serez pas capable de désosser un minifiés morceau de code JS sans la source d'origine, car les variables locales sont généralement renommé. La norme jQuery distribution est minimisé avec le Compilateur de Fermeture en Mode Simple (pas Avancé). Il fait un très bon travail en ôtant tout, sauf de la fonction publique/les noms de propriété.
    • dans mon cas, le script est juste minifiés pas obscurci, les espaces blancs retiré chose
    • Cependant, vous pouvez toujours "à la carte" l'embellie (avec le code source d'origine (si vous en avez). Ensuite, vous pouvez simplement comparer les lignes une par ligne pour voir la ligne dans le minifiés code correspond à la ligne dans la source d'origine, et qui renommé variable locale correspond à quelle origine nom de la variable. Notez que si le code est traité par le Compilateur de Fermeture en Mode Avancé (comme la plupart de Google code JS), puis le code compilé montrera peu de ressemblance avec l'original de la source -- et vous aurez besoin d'être extrêmement bien-formé à l'utilisation du Compilateur de Fermeture de la carte de retour.
    • Dans ce cas, vérifier mon édité réponse.
    • jQuery utilise UglifyJS maintenant – voir commit d503845d.
    • Oh. @rsp grâce. Apprendre quelque chose de nouveau chaque jour! 🙂

    InformationsquelleAutor Stephen Chung
  8. 0

    De placer des points d'arrêt sur JavaScript rend le débogage beaucoup plus facile, mais si votre code a déjà fait de la production, alors il a probablement été minimisé. Comment pouvez-vous débogage minifiés code? Heureusement, certains navigateurs ont une option pour l'onu-minify votre JavaScript.

    Dans Chrome et Safari, il suffit de sélectionner l'onglet 'Scripts', trouver le fichier, puis appuyez sur la touche "{ }" (pretty print) icône située dans la partie inférieure du panneau.

    Dans Internet Explorer, cliquez sur l'icône de l'outil par le script déroulant de sélection pour trouver l'option pour formater le JavaScript.

    Opéra sera automatiquement embellir minifiés JavaScript. Source

    InformationsquelleAutor Aamol