Tag Archives

3 Articles
BrowserStack
Rien à redire niveau Navigateurs

BrowserStack

Il y a un bon moment de cela, je vous avais parlé de Spoon pour pouvoir debugger sur tous les navigateurs existants votre projet Web. Malheureusement, depuis quelques mois, ce projet ne propose plus Internet Explorer suite à une injonction de Microsoft.

Mais ceci est révolu car une autre solution, assez bien faite, m’a été montrée et je dois dire qu’elle dépanne grandement. Seul bémol, elle est payante alors que Spoon était gratuit.

Qu’à cela ne tienne, j’ai testé cette solution pendant une bonne heure et je vais vous montrer la plupart de ses fonctionnalités.

I. Fonctionnement

BrowserStack fonctionne grâce à java en ouvrant une connexion avec les serveurs virtuels contenant chacun des navigateurs.

Vraiment intuitive cette interface.

Comment ça marche ? Vous demandez tel navigateur, la résolution que vous voulez et ça vous lance un serveur virtuel contenant le navigateur avec toutes les extensions utiles pour le développement. Comme si vous aviez une vue bureau à distance Windows.

C’est intuitif, simple et ça ne nécessite aucune installation sur votre poste (sauf java pour le bon fonctionnement).

II. Navigateurs et résolutions

BrowserStack comprend la plupart des grands navigateurs avec toutes les versions disponibles en ligne. Voici la liste complète :

  • Internet Explorer depuis la version 6
  • Firefox depuis la version 1
  • Chrome depuis la version 12
  • Safari depuis la version 4
  • Opera depuis la version 10
Navigateurs

Rien à redire niveau Navigateurs

Pour les résolutions, Browserstack indique qu’il propose toutes les résolutions, pourtant je n’en ai accès qu’à 3. Je pense que cette différence est due au fait que j’avais accès à un compte de démo et non un compte premium.

On peut choisir la résolution

III. Utilisation

Dans l’utilisation, comme je vous ai dit, vous sélectionnez votre navigateur, vous sélectionnez votre résolution et BrowserStack vous lance le navigateur (comptez 2s au maximum). Vous pouvez switcher entre le mode dans votre navigateur ou plein écran.

lancement du navigateur

On peut aussi noter le fait de switcher facilement d’un navigateur à un autre et là, chose assez remarquable, il vous garde le lien di site où vous étiez. Par contre je pense que la partie session navigateur sotte (normal me diriez-vous).

En plus du fait de pouvoir lancer le navigateur directement avec une adresse saisie, on peut aussi lui envoyer un fichier html, php, … pour qu’il puisse vous afficher un aperçu de cette même page dans le navigateur souhaité.

exemple des extensions avec Chrome

Vous pouvez aussi créer un tunnel avec votre serveur de développement s’il est accessible qu’en local afin de tester votre projet stocké dessus sur l’un des navigateurs.

Et, comme je vous l’ai dit plus haut, chaque navigateur est équipé des extensions de développement qui vont bien (firebug, ms script debugger, measureit, …) ce qui peut vous faciliter le débuggage de vos projets.

Conclusion

Malgré quelques ralentissements dues à la virtualisation de tout ceci et l’utilisation d’un compte démo (bridé au niveau de la bande passante), Browserstack semble être la solution idéale pour avoir un projet compatible tout navigateur.

Les extensions vous permettront de comprendre pourquoi votre projet ne marche pas sur tel ou tel navigateur.

Les prix peuvent être élevés (jusqu’à 349€/mois) mais dans une entreprise, cet outil tend à être un incontournable.

Pour plus de renseignements, je vous invite à vous rendre sur leur site.

Google Chrome Frame

Google Chrome Frame

Bonjours,

Aujourd’hui je vais vous parler d’une extension d’Internet Explorer 6, 7 et 8 qui fait grand bruit sur la toile. Il s’agit de Google Chrome Frame ou encore, de comment intégrer le rendu de Google Chrome dans Internet Explorer.

Si certains ont pu le voir, je viens de le mettre en place sur mon site pour que les utilisateurs d’Internet Explorer puissent profiter des nouveautés de CSS3 ainsi que la suppression des bugs d’affichages des différentes versions.

En continuant là-dessus, on a la possibilité d’automatiser l’installation du composant pour les utilisateurs lambda. On a le choix entre une fenêtre sur notre page, ou d’un pop-up.

Personnellement, après avoir essayé la frame, j’ai eu quelques bugs de mise en page donc je me suis tourné vers le pop-up mais, là encore, la dernière version d’Internet Explorer les bloque. Espérons que l’équipe de Google pensera à un autre système par la suite.

Ensuite, pour l’utilisateur, la mise en marche de Google Chrome Frame est transparente. Il faut juste que le développeur rajoute une simple balise Meta sur son site et le tour est joué:

Pour tous renseignements supplémentaires, je vous invite à aller voir la page de Google traitant de cette extension (en anglais par contre).

Xenocode

Il y a quelques jours, un ami m’a parlé d’un addon pour Firefox qui permettait de virtualiser la plupart des navigateurs internet.

L’extension s’appelle Xenocode et vous pouvez la télécharger chez l’éditeur du même nom. Comme je vous l’ai dit, cette extension sert à virtualiser la plupart des navigateurs internet mais aussi des jeux, lecteurs multimédias, programmes, …

Ce module est très utile pour les développeurs web qui veulent voir comment se comportent les navigateurs avec votre projet. Par contre, et c’est fort dommage, ce module est compatible qu’avec Windows donc messieurs les appleiste et linuxiens vous ne pouvez pas en profiter.

Si vous voulez tester cette extension, allez sur cette page.