Chrome : Bien débuger avec la barre d’outils

Chrome est un formidable outil de développement pour le web. Voici quelques trucs et astuces pour bien debuger avec Chrome.

Extensions

Il est possible d’ajouter des extensions à la barre d’outils de développement que vous trouverez sur le chrome webstore dans la catégorie Outils de développement. (toutes les extensions ne se rajoute pas à la barre d’outils).

  • jQuery Debugger : permet de visualiser rapidement dans votre page le résultat d’un sélecteur jQuery
  • Pagespeed insights : analyse votre page et vous donne des recommandations pour améliorer les performance de votre site

Canary

Chrome Canary est la version « bêta » de Chrome qui contient pas mal de nouveautés dans la barre d’outils qui seront plus tard intégré dans la version courante de Chrome. C’est une version dédié aux développeurs. Canary s’installe en parallèle de Chrome et on peut donc utiliser les 2 simultanément sans aucun problème.

Activer les expérimentations

Les nouveautés en cours de développement de Chrome ne sont pas activé par défaut mais peuvent l’être via l’interface de gestion des fonctionnalités expérimentales. Il en est de même pour la barre de développement. Pour les activer il faut aller à l’url chrome://flags/, activer l’option Activer les expérimentations dans les outils de développement puis redémarrer.

Activation des expérimentations pour la barre d'outils Un onglet Experiments dans les paramètres de la barre d’outils de développement permet d’activer certaines fonctionnalités.

Activer les Experimentations

Snippets

Chrome (canary par défaut et chrome si activation dans les expérimentations) permet la gestion de snippets. Il s’agit de bout de code JavaScript que vous allez pouvoir enregistrer afin de pouvoir les exécuter rapidement au lieu de les taper à la main via la console. Vous trouverez ici une liste de snippets prêt à l’emploi.

Rejouer des appels Ajax

Qui dit développement d’application web riche dit appel AJAX afin de récupérer des données. Il est possible de rejouer des appels AJAX (ou XHR pour XMLHttpRequest) directement depuis la barre d’outils. Pour cela, il faut aller dans l’onglet Networks, clic droit sur l’appel Ajax (XHR) puis cliquer sur Replay XHRs

Rejouer un appel XHR

Pause on exceptions

Chrome possède également une option permettant de mettre en pause le code JavaScript dès qu’une exception est levée.  Il y a 3 modes :

  • Ne pas s’arrêter lors des exceptions. Le mode par défaut.
  • S’arrêter à toutes les exceptions.
  • S’arrêter à toutes les exception non catchées (sans bloc try/catch).

Le passage d’un mode à l’autre se fait en cliquant sur le symbole pause en bas de la l’onglet Sources.

Pause sur les exceptions

Pretty Print JavaScript

Une bonnes pratique pour avoir de bonnes performances consiste a minifier vos scripts JavaScript afin que ceux-ci soit plus léger et donc plus rapide à télécharger. Cependant, vos fichiers ne sont plus facilement débugable (en production). Chrome intègre un outil qui permet de formater un fichier afin de le rendre plus lisible et plus facile à debuger. Il suffit pour cela d’ouvrir un script dans l’onglet Sources et de cliquer sur { }. (le bleu indique que la fonctionnalité est activée)

Indenter le code JavaScriptDésactiver le cache

Le cache du navigateur peut vous amener à perdre du temps lors du développement de votre application web (vous pensez utiliser la dernière version de votre site mais vous utiliser une ancienne version d’un fichier issu du cache de votre navigateur). La barre d’outils Chrome permet de désactiver le cache pour toujours récupérer le fichier du serveur. Pour cela, il faut cocher Disable Cache dans l’onglet General des paramètres de la barre d’outils. Cela n’est pris en compte seulement si la barre d’outils est ouverte.

Changer le thème de la barre d’outils

De nombreux outils de développement permettent de configurer le thème (couleurs, police, …) et la barre d’outils de Chrome n’échappe pas à la règle. En fait, il s’agit d’une application web et il suffit donc de modifier le style CSS afin de satisfaire vos besoins.

Le fichier se nomme Custom.css et se trouve dans :

  • Windows: « C:\Users\**Your username**\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\ »
  • Mac: « ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/ »
  • Linux: « ~/.config/chrome/Default/User StyleSheets/ »

Vous pouvez trouvez des thèmes prêt à l’emploi ici : http://devthemez.com/themes/chrome-developer-tools (contient également des thèmes pour sublime text 2, vim, …)

Liens

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *