johanBleuzen

Pour avoir un site performant, il est nécessaire de minifier les données pour qu'elles soient moins lourdes à télécharger pour le client. Mais parfois lorsque des problèmes en prod surviennent, il est beaucoup plus facile de débugguer avec du JS non minifié, et généralement on doit utiliser un autre outil online ou en ligne de commande pour pouvoir prettyfier le JavaScript...

Heureusement, il existe une petite option fort sympatique dans l'inspecteur de propriétés de Chrome qui permet de prettyfier directement dans le navigateur du code JavaScript auparavant minifié, tout cela sans installer un plugin, c'est du natif Chrome. Ainsi il n'est plus nécessaire de désactiver votre framework de minification/compression de votre site pour analyser le code JavaScript.

Pour accéder à cette fonction, il faut faire apparaitre l'inspecteur de propriétés (touche F11), puis rendez vous sur l'onglet "Scripts" puis cliquez en bas à gauche de l'inspecteur sur le bouton avec la double accolade "{ }».

Une fois que vous avez cliqué, vous obtenez du JavaScript prettyfier tout de suite beaucoup plus lisible.

Si vous ne voyez pas le bouton, c'est que la version de votre navigateur Chrome ne le gère pas... Cette fonction qui peut faire gagner du temps lors de phase de débuggage est disponible à partir de Chrome 13 dans la branche de développement (elle n'y est pas dans la version 11).