web-dev-qa-db-fra.com

Comment déboguer efficacement des fichiers JS minifiés?

J'ai un problème de débogage de JS minifié sur le serveur de production. Bien que vous ne puissiez pas détecter certaines erreurs sur votre machine lors du test des serveurs de développement/prod, il est possible d'envoyer des erreurs frontales et des exceptions de l'utilisateur au journal spécial. Lorsque les fichiers JS sont minifiés, le débogage de ce code devient un enfer. Quelles sont les meilleures pratiques pour effectuer un tel travail?

javascriptdebuggingminify
14
Sergey Solomatin

Donc, après un certain temps, nous avons continué à essayer de résoudre de sacrés problèmes et nous sommes tombés sur cette bibliothèque qui vous permet de mapper votre pile sur une version non réduite de la construction.

https://github.com/mozilla/source-map

Nous en avions besoin pour l'intégrer à notre système interne qui collecte les rapports d'erreur. Il existe également des solutions prêtes sur le Web si vous n'avez pas besoin des vôtres comme nous le faisons:

https://raygun.com/sourcemaps

https://sourcemaps.info/

5
Sergey Solomatin

Mordre la balle;) Dans chrome vous pouvez formater automatiquement le code minifié depuis le panneau des sources click the brackets icon in the bottom left to format

Vous pouvez ensuite ajouter des instructions de débogage en cliquant sur les numéros de ligne. Exécutez votre code et en savoir plus ...

add debugger by clicking line number

25
Mettin Parzinski

Ce que la plupart des gens font normalement, c'est qu'ils ont un javascript.min.js et un javascript.js. Si vous avez un fichier réduit, vous pouvez utiliser un outil en ligne comme: http://unminify.com/ pour le minimiser. Vous pouvez donc le déboguer plus facilement.

1
user6589747

Une approche que vous pouvez essayer est un proxy inverse.

La fonction Chrome est OK, mais j'ai trouvé l'approche proxy plus stable (vous n'avez pas besoin de continuer à appuyer sur ce bouton embêtant {}) et cela fonctionnera sur tous les navigateurs (comme ceux qui ne pas la fonctionnalité de prettify de Chrome).

Le proxy se situe entre votre navigateur et le serveur Web (qui pourrait s'exécuter sur un serveur distant ou votre machine locale). Toutes les demandes Web passent par le proxy, à l'exception de celles que vous configurez pour servir à partir d'un emplacement différent. Dans ce cas, vous serviriez une version non réduite du fichier JavaScript à partir d'un emplacement local plutôt que la version réduite à distance. J'ai utilisé le proxy inverse nginx pour cela (sous Windows) mais je m'attends à ce que d'autres puissent être utilisés de la même manière (par exemple, le proxy HA).

Exemples d'étapes et de configuration ci-dessous:

Configurez votre fichier nginx\conf\nginx.conf quelque chose comme ça, les parties importantes sont l'alias d'emplacement (pour intercepter la demande de fichier JavaScript) et l'emplacement proxy_pass (pour transmettre toutes les autres demandes au serveur en amont):

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    keepalive_timeout  65;
    server {
        listen       8081;
        server_name  localhost;
        # the unminified version of the JavaScript file you want to debug
        location /context/js/compressed.js {
            alias "C:/dev/nginx-1.10.2/html/uncompressed.js";
        }
        # your remote web server
        location / {
            proxy_pass http://1.2.3.4:8080/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

Démarrer nginx

open a command window (run cmd.exe)
cd\
cd C:\dev\nginx-1.10.2
start nginx

Ouvrez le navigateur, par exemple http: // localhost: 8081/context/index.html

Le proxy récupère toutes les ressources du serveur distant à l'exception du fichier demandé à http: // localhost: 8081/context/js/compressé.js que le proxy sert désormais à partir du fichier mis en cache localement (non minifié) ( c'est-à-dire le fichier uncompressed.js).

Si vous n'en avez pas, vous pouvez facilement créer votre fichier uncompressed.js avec un non-minifier/embellisseur (bien que le fichier précompressé d'origine serait besst car il aurait tous les noms significatifs). L'important est qu'il est fonctionnellement équivalent au fichier minifié.

1
Moika Turns

Vous ne pouvez pas le "dé-minimiser" complètement mais vous pouvez "l'embellir", ce qui ne restaurera pas les noms de variables d'origine, mais cela rendra au moins le code plus facile à suivre. Voici ne bonne explication de la façon dont cela peut être fait dans le navigateur. Et voici un site Web où vous pouvez copier et coller du code pour l'embellir . Il existe également des plugins pour presque tous les éditeurs de texte et IDE qui produira les mêmes résultats.

J'espère que ça aide. Bon codage!

0
Patrick DiGiovanni

Vous pouvez minimiser les codes js en utilisant ceci Unminify Js . Vous pouvez également utiliser CSS Unminify pour annuler la minimisation des codes CSS ou vous devez annuler la minimisation de tout le code html, utilisez HTML Unminifier .

Bien sûr, vous pouvez simplement identifier les bugs après avoir minimisé le code javascript en utilisant ce site.

0
Mohandas P G