BrowserSync est un outil que l’on pourrait pratiquement considéré comme magique! J’ai découvert cet utilitaire il y a quelques semaines, et depuis je ne peux plus m’en passer lorsque je travaille sur à peu près n’importe quel projet web.

Qu’est-ce que BrowserSync?

BrowserSync est l’utilitaire de choix à utiliser lorsque vous développez un site internet adaptif (mon dieu que je déteste toujours autant ce mot… Je parle bien entendu de “responsive design”!). BrowserSync permet de synchroniser l’affichage et les actions effectuées dans le navigateur sur différents périphériques en temps réel.

Comment cela fonctionne-t-il?

Vous démarrez BrowserSync sur votre machine de développement en lui indiquant l’url/adresse IP du site internet à afficher. BrowserSync va servir de serveur proxy intermédiaire auquel tous les autres périphériques se connecteront. Ainsi, tous les périphériques connectés afficheront la même page, mais le rendu pourra différer d’un périphérique à l’autre (prenons le cas d’un ordinateur et d’un téléphone, il y a de fortes chances que le rendu de la page ne soit pas le même sur les deux écrans).

Là où ça devient super intéressant, c’est lorsque vous effectuez des actions sur l’un des périphériques connectés à BrowserSync tels qu’un défilement, remplir un formulaire, cliquer sur un lien, … Toutes ces actions vont être automatiquement répercutées sur tous les périphériques!

Imaginez par exemple que vous deviez améliorer l’affichage de messages d’erreur liés à un formulaire de contact. Il faut bien évidemment que les messages soient lisibles et bien présentés sur toutes les tailles d’écran possibles.

Avec mon ancienne méthode de travail, je devais remplir le formulaire et le soumettre sur chacun des périphériques afin de visualiser l’affichage des messages d’erreur. Tandis que maintenant, avec BrowserSync, je fais tout cela d’une seule traite. Cela peut représenter un fameux gain de temps, imaginez: vous remplissez et soumettez le formulaire sur votre ordinateur, et ces actions sont automatiquement répercutées sur les autres périphériques. Vous pouvez visualiser les messages d’erreur sur tous les écrans en une seule manipulation.

Installation et utilisation de BrowserSync

L’utilisation de BrowserSync requiert l’installation de Node.js. Si vous ne l’avez pas encore fait, installez-le en utilisant l’installateur pour votre plateforme (MaC OS, Windows ou Linux). C’est facile et rapide.

Installez ensuite BrowserSync en tapant cette ligne de commande dans votre terminal: npm install -g browser-sync

Enfin, vous pouvez lancer BrowserSync en tapant la ligne de commande suivante dans votre terminal: browser-sync start --proxy "monprojet.dev" --files "css/*.css"

Quelques éclaircissements concernant la ligne de commande pour lancer BrowserSync:

  • start démarre BrowserSync
  • --proxy "monprojet.dev" spécifie l’url permettant d’afficher votre projet
  • --files "css/*.css" indique les répertoires et les types de fichier que BrowserSync doit surveiller(1)

Quelles sont les limitations de BrowserSync?

Une très grosse limitation de BrowserSync (à mon goût): le site doit être hébergé localement sur votre machine, sinon BrowserSync ne fonctionnera pas correctement. Tous les périphériques se connectant à BrowserSync seront redirigés vers la vraie url du site.

Une autre limitation gênante, BrowserSync ne fonctionne pas bien avec les sites affichant des url complètes. En effet, si vous cliquez sur un lien contenant une url complète, vous serez redirigé vers l’url en question et perdrez la connexion à BrowserSync.

Et Wordpress?

Et bien malheureusement, avec Wordpress ça fonctionne moyennement :(

En effet, Wordpress utilise des url complètes (voir point précédent) pour tous les liens tels que ceux présents dans les menus, les images, les liens vers d’autres articles et pages, …. Par exemple, si votre site est hébergé à l’adresse http://www.exemple.com, le lien vers la page A propos (ayant pour slug a-propos) contiendra l’url complète http://www.exemple.com/a-propos. BrowserSync ne filtrant pas le contenu, cliquer sur le lien vous redirigera vers http://www.exemple.com/a-propos et vous perdrez la connexion à BrowserSync ainsi que la synchronisation avec vos autres périphériques.

Il existe cependant une extension Wordpress qui peut aider: Browser-sync Filter. Je ne parlerai pas d’avantage de cette extension car elle a l’air de fonctionner moyennement… Parfois ça marche, parfois pas!

Une autre extension qui m’a l’air plus intéressante: Root Relative URLs. Lorsque vous insérez une url dans votre site Wordpress, l’extension va automatiquement convertir les urls complètes en urls relatives.

Conclusion

BrowserSync est un utilitaire que je conseille fortement à tout développeur web. Testez-le et vous devriez rapidement constater un gain en temps lors de vos développements front-end!

Notes

(1) BrowserSync permet également de surveiller les fichiers de votre projet. Si vous modifiez le contenu d’un fichier, BrowserSync rafraichira automatiquement le contenu de la page sur tous les périphériques. BrowserSync propose d’autres fonctionnalités telles qu’un mini serveur web (ne gère que les fichiers HTML je pense, pas de PHP, ASP ou autre…). Pour découvrir la liste complète des fonctionnalités de BrowserSync, rien de mieux que de se rendre sur la page officielle, dans la rubrique documentation des lignes de commandes.

Quelques nouvelles

Bien…. Ca fait plus de 5 mois que je n’ai plus rien posté sur ce blog, la honte! Pourtant les idées se bousculent au portillon…## Ce qu …… Continuer la lecture