Déboguer facilement les dispositifs mobiles avec BrowserStack

25/09/2017    Viadeo Partager  - Partager sur LinkedIn

Si vous êtes webdesigner ou développeur front-office, vous voulez que votre site soit parfait sur tous les navigateurs et sur chaque dispositif, sans aucun bug d’affichage.


Sans faire de tests de compatibilité, votre site sera optimisé sur certains navigateurs, tandis que sur les autres il pourra y avoir des problèmes d'affichage. Ces problèmes de compatibilité surviennent principalement parce que les navigateurs interprètent le code standard différemment. Il se peut qu'en travaillant, vous vous concentriez sur un seul navigateur, en oubliant les autres.

Cependant, vous ne devez pas compter sur vos préférences, car il faut toujours penser aux visiteurs potentiels de votre site. En effet, tous les efforts déployés lors de la création du site ne seront pas récompensés si le contenu est affiché de manière incorrecte sur les navigateurs utilisés par les visiteurs.

L'optimisation du site pour plusieurs navigateurs est également très importante dans la création de sites responsives. Même les navigateurs communs, sur les systèmes d'exploitation mobiles, tel qu’Android, devraient également être considérés.

Cette optimisation est souvent un processus fastidieux, car la fonctionnalité des éléments ne peut être vécue qu'en essayant plusieurs fois sur différents navigateurs.

Les problèmes apparaissent le plus souvent avec :

  • Les anciennes versions d'Internet Explorer, qui peuvent difficilement être installées sur votre ordinateur ;
  • Safari, impossible à tester pour les utilisateurs Windows et Linux ;
  • Les innombrables versions des navigateurs et des dispositifs mobiles.


Étant donné que les différentes versions des navigateurs ne sont généralement pas installables et pratiques, il existe un outil pour effectuer des tests de compatibilité.
Ce service fourni un package de navigateurs avec les ressources matérielles nécessaires pour effectuer des tests en profondeur.

Cet outil s’appelle BrowserStack !

browserstack.jpg

Pour la plupart des tests, BrowserStack met à disposition des appareils physiques.
Vous pouvez faire de vrais tests sur des dispositifs comme Iphone 6S, Ipad Air, Samsung Galaxy 8, Google Nexus 9 et beaucoup autres ! De plus sur chaque dispositif, sont installés les navigateurs de système, Chrome et Firefox.

BrowserStack permet de virtualiser un vrai système d'exploitation et d’utiliser les navigateurs natifs et les autres.
Ceci nous permet de voir et de ne pas simuler, ce qui se passe lors de l'affichage d'un site web.

 dispositifs.jpg

Vous êtes sur un ordinateur avec Windows et vous avez un bug sur Mac ? Pas de soucis !
Avec BrowserStack, vous avez la possibilité de tester Safari sur Mac Sierra, El Capitan et les anciennes versions.

Finis les cauchemars avec la compatibilité de IE !
Vous pouvez adapter votre site pour le faire fonctionner parfaitement avec toutes les versions d’Internet Explorer.

Avec le plugin de BrowserStack à installer sur votre navigateur, vous avez même la possibilité de tester votre site lorsqu'il est encore en développement sur votre ordinateur.

Une fois installé sur votre navigateur vous avez accès à toutes les informations du dispositif sélectionné avec toutes les gestures disponibles.

De plus, vous avez la possibilité de déboguer le site, grâce au devtools. Voir le code, le style css, voir la console, pour corriger les bugs js…

informations.jpg

debug.jpg

 screen.jpg


Vous devez montrer une information à votre équipe ? Vous pouvez faire une capture d’écran de la page et écrire toutes les informations à communiquer.

Avec cet incroyable outil, les bugs d’incompatibilité ne seront plus un souci pour vous !