Tag : Opéra ‒ Simounet.net

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 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

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: