BrowserSync, tester ses sites sur plusieurs navigateurs simultanément

BrowserSync est un outil basé sur Node.js qui permet de débuguer ses sites en même temps sur plusieurs navigateurs, simultanément sur des machines, plate-formes différentes. Il joue le rôle de proxy hyper-vitaminé entre le site et vos browsers. La version 2 est sortie il y a un peu moins d'un mois.

Fonctionnalités

  • Naviguer simultanément avec plusieurs navigateurs desktops ou mobiles sur un même site
  • Si un fichier CSS change, la page est rechargée sur tous les navigateurs
  • Synchronisation des clics et scrolls, remplissage des champs et validation de formulaires
  • Recharger la page sur tous les navigateurs
  • Avec Weinre, débuguer une page avec un seul et même outil proposant les fonctionnalités standards (navigation et éditions des éléments HTML/CSS/JS, accéder à la console, voir la timeline des chargements, les activités réseau...)
  • Avec Pesticide.io, afficher des informations en overlay sur les boites CSS en live sur la page
  • Simuler de la latence sur le chargement des pages

Installation

  • Pré-requis : Node.js et npm
  • npm install -g browser-sync

Démarrage

  • sudo browser-sync start --proxy "www.monsite.loc" --files "css/*.css"
browsersync-in-action-screenshot

BrowserSync en action sur un Firefox, un Chromium et un Firefox pour Android

 

La seule chose que je regrette, c'est que les changements effectués dans le DOM via Weinre ne soient pas répercutés sur toutes les fenêtres ouvertes et connectées à BrowserSync. J'ai ouvert une issue sur GitHub pour savoir s'il serait possible d'implémenter cette fonctionnalité.

Encore un bel outil à ajouter à sa trousse au plus vite, si ce n'est pas déjà fait.

Liens utiles

Script GreaseMonkey pour retrouver la fonction « marquer comme lu et masquer » de Netvibes

Si vous utilisez Netvibes depuis plus de deux semaines, vous aurez sûrement remarqué sa refonte graphique et son lot de changements au niveau du comportement de l'application. Outre le fait que la place attribuée aux flux soit désormais considérablement réduite, c'est la disparition pure et simple de la fonction « marquer comme lu et masquer » lorsque le filtrage est en mode « n'afficher que les non-lus » qui m'a plus affecté. Sans cette option, Netvibes m'est tout simplement inutilisable. Je me suis donc empressé de faire un petit script GreaseMonkey pour la simuler et retrouver le résultat précédemment. Ce n'est pas parfait, les barres regroupant les items par jour ne sont pas cachées lorsqu'elles n'ont plus d'entrées en dessous d'elles, mais c'est déjà mieux qu'avant.

netvibes_logo

Installation

Firefox

Le seul prérequis est d'avoir préalablement installé l'extension GreaseMonkey avant de :

  • cliquer sur ce lien
  • cliquer sur le bouton Installer

Chrome

  •  faire un clic droit sur ce lien
  • enregistrer le fichier JavaScript proposé
  • aller sur la page des extensions
  • faire un glisser/déposer du fichier sur cette page
  • valider l'installation du script en cliquant sur le bouton Ajouter

Utilisation

Rechargez votre page Netvibes et si tout s'est bien passé, en cliquant sur les ronds, les entrées devraient désormais disparaître comme avant.

Liens utiles

Gardez vos vidéos flash en plein écran avec IgnoFlash

Ce billet fait suite à celui ci concernant la possibilité de garder une vidéo flash en plein écran alors que vous travaillez sur un autre (multi-screen), ou que vous souhaitez tout de même accéder à une autre fenêtre, sans avoir à remettre sans arrêt la vidéo en fullscreen. En effet, Rafa nous avait proposé un hack assez "technique" mais l'a abandonné au profit d'un autre bien plus simple auquel il fait référence sur son billet. Il s'agit d'un patch baptisé IgnoFlash qui se charge automatiquement de la modification du fichier concerné (alors qu'il était auparavant nécessaire de le remplacer soi-même). Ce dernier prend en compte les contrôles Netscape et ActiveX ce qui permet de le rendre actif sur Firefox, Chrome, Opéra, Internet Explorer...

Pour ce faire, téléchargez la dernière version d'IgnoFlash disponible ici, fermez bien TOUS vos navigateurs (vérifiez dans votre gestionnaire des tâches s'il n'y en a pas un qui joue les prolongations) puis démarrez le patch. Vérifiez que l'option Ignore focus changes est bien cochée puis cliquez sur Apply. Si vous utilisez IE, il vous faudra réitérer cette manipulation en validant ActiveX au lieu de Netscape (peut-être qu'il le fait tout seul si aucun élément Netscape n'est installé sur votre ordi, mais je n'en suis pas sûr).

Si jamais l'opération n'a pas fonctionné et que les vidéos reviennent en taille normale dès que vous changez de focus, relancez le patch puis dans Source file copiez/collez l'adresse suivante C:\Windows\system32\Macromed\Flash\NPSWF32.dll (si vous êtes en 32 bits) ou C:\Windows\SysWOW64\Macromed\Flash\NPSWF32.dll (si vous êtes en 64 bits), puis validez en cliquant sur Apply. Cette fois, les vidéos flash devraient rester en plein écran (vous pouvez toujours les quitter en appuyant sur la touche Esc de votre clavier).

Dans tous les cas, dès qu'une mise à jour de Flash sera installée, il vous faudra refaire cette manip', le fichier NPSWF32.dll étant lui aussi updaté !

Liens utiles:

Facebook: 2 autres scripts pour vous simplifier la vie

Comme je l'avais déjà fait il y a quelques temps, me revoilà pour vous présenter 2 scripts que j'utilise depuis peu et qui sont bien utiles. L'extension Grease Monkey (via Firefox ou Chrome) est requise.

facebook_logo

Le premier est tout simple mais assez utile depuis la réorganisation de la home page, puisqu'il permet de mettre les Events tout en haut à droite et pas en bas (quelle aberration...). Vu que c'est une des seules choses qui soit utile sur ce site, autant la mettre en avant. Elle s'appelle Events at top et se trouve par ici !

La 2e permet de nettoyer les URL à rallonge de Facebook, car si vous faites attention, quand vous passez d'une page à une autre, les paramètres s'ajoutent sans raison apparente dans votre barre d'adresse qui prend alors une longueur effarante ce qui peut donc faire bugger d'autres extensions, mais aussi nuire à vos copier/coller... Facebook fixer était sensé s'en occuper, mais apparemment ça n'est pas toujours le cas... Allez donc télécharger Facebook URL cleaner qui se trouve ici !

J'en profite pour refaire un coup de pub pour Facebook fixer qui a été mis à jour et permet pas mal de modifications quant à vos différentes pages ainsi que les éléments à afficher (ou pas). Ca vaut vraiment le coup !

A noter également que si vous utilisez pas mal de scripts Grease Monkey (comme moi, je l'avoue), voici une astuce qui devrait vous plaire. Merci Korben !

Liens utiles: