Chrome : Editer le code JavaScript dans la barre des outils développeurs

Vous avez sûrement dû vous rendre compte que je fais mal de JavaScript en ce moment :). Voici encore une astuce que j’ai découverte il y a peu et qui va vous faire gagner en productivité. J’imagine que la plupart d’entre vous savent et utilisent l’édition des styles directement depuis la barre d’outil de leur navigateur mais savez-vous que sous Chrome il est également possible d’éditer votre code JavaScript. Cela vous évite de devoir effectuer des allers-retours entre votre navigateur et votre éditeur de code.

Pour cela, il suffit simplement d’ouvrir la barre d’outils de développement de Chrome (F12 ou Maj+Ctrl+I ou via le menu), d’aller dans l’onglet Sources, de sélectionner un fichier. Il vous suffit ensuite de cliquer à l’endroit où vous souhaitez effectuer vos modifications et les effectuer … Le fichier apparaît alors avec une * indiquant que le fichier est en cours de modification et un Ctrl+S permet d’enregistrer vos modifications.

Modification en Live d'un fichier JavaScript

Une fonctionnalité encore plus puissante est qu’il ait également possible de visualiser les modifications effectuées sur le fichier comme vous pouvez l’avoir dans un gestionnaire de sources type SVN, CVS, … Pour cela, il suffit de faire clic droit sur le fichier et cliquer sur Local Modifications

Accèder aux modifications locales d'un fichier JSLa liste des modification apparaît alors. Magique !!!

Visuallisation des modifications locales JS dans Chrome

Il est bien sur possible de sauvegarder les modifications effectuées via un clic droit sur le fichier puis Save ou Save As …

J’espère que les autres navigateurs implémenteront cette fonctionnalité très pratique.

Laisser un commentaire

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