Test site responsive en local avec LT Browser 2.0 de LambdaTest

Test site responsive en local avec LT Browser 2.0 de LambdaTest
12 mn de lecture

Vous recherchez un outil pour effectuer un test de site responsive en local ?

Alors ne cherchez plus, après vous avoir présenté Responsively App, voici le tour de LT Browser 2.0, une autre application de bureau gratuite pour tester la réactivité de votre site directement sur votre PC.

LT Browser 2.0 n’est pas qu’un simple outil de test responsive, il intègre également:

  • Les Chrome DevTools pour tester du code
  • Google Lighthouse pour générer un rapport de performance de votre site
  • Des outils de capture d’écran et de vidéo
  • La possibilité de créer et d’enregistrer vos propres appareils de test
  • Un simulateur de réseau plus lent

Dans cet article, vous découvrirez donc ce que LT Browser 2.0 a de plus par rapport aux autres outils de test responsive, comment l’utiliser pour effectuer un test de site responsive en local et aussi ses fonctionnalités gratuites avec ou sans création de compte.

En quoi LT Browser 2.0 diffère-t-il des autres outils de test responsive ?

LT Browser 2.0 est une application de bureau basée sur Chromium par LambdaTest.

Tout comme Responsively que je vous ai déjà présentée, elle est compatible avec Windows, macOS et Linux et permet de tester le responsive des sites sur une multitude d’écrans :

  • 72 mobiles
  • 7 tablettes
  • 7 ordinateurs portables
  • 10 ordinateurs de bureau
  • Vos tailles personnalisées

Pareillement, elle fournit un environnement pour le débogage de sites avec les Chrome DevTools et l’interaction en miroir des appareils. Mais, elle inclut en plus la possibilité de tester les performances de votre site via Google Lighthouse, l’extension Chrome LT Debug et des fonctionnalités supplémentaires en créant un compte gratuit sur LambdaTest.

Comment utiliser LT Browser 2.0 pour effectuer un test de site responsive en local

Pour commencer, téléchargez le fichier exécutable et installez l’application sur votre ordinateur.

Ensuite, ouvrez l’application LT Browser et saisissez l’URL du site que vous souhaitez tester. Par défaut, la page Web s’affiche alors dans deux mobiles différents côte à côte.

Affichage test responsive local dans l'app de bureau LT Browser 2.0

Choisir ou ajouter un appareil pour effectuer le test responsive du site

LT Browser 2.0 permet de tester le responsive de votre site Web sur six appareils simultanément. Alors, profitez-en et ajoutez d’autres appareils. Pour ce faire, cliquez sur + Add devices. Ensuite, dans la fenêtre qui s’affiche, sélectionnez l’appareil que vous souhaitez ajouter et enfin, cliquez sur ADD DEVICE.

Et puis, afin de ne pas avoir à parcourir tous les appareils disponibles lors d’un prochain test, pensez à ajouter vos appareils préférés dans vos favoris en cliquant sur l’étoile qui apparait au survol en haut à droite de chaque appareil. 😉

Ajouter un appareil pour tester le responsive du site en local avec LT Browser

Et, si par le plus grand des hasards, vous ne trouvez pas l’appareil correspondant aux tailles que vous recherchez, alors ajoutez votre propre appareil.

Pour ajouter un appareil personnalisé, la méthode est la même. Sauf que cette fois-ci, vous sélectionnez l’onglet Custom. Ensuite, cliquez sur + New Device. Puis, dans la boite contextuelle qui surgit, indiquez un nom pour l’appareil, sa taille… Et enfin, cliquez sur ADD DEVICE. Ce nouvel appareil sera enregistré dans le choix des appareils pour une utilisation ultérieure sous CUSTOM.

Ajouter un appareil personnalisé pour tester le responsive d'un site sur PC avec LT Browser

Maintenant que vous avez sélectionné les appareils pour tester la réactivité de votre site en local, commencez les tests !

Utiliser les outils de LT Browser 2.0 pour le test responsive en local

LT Browser 2.0 propose une interaction en miroir pour le test responsive. En d’autres termes, la navigation sur les appareils est synchronisée, c’est-à-dire que lorsque vous naviguez sur un appareil, les autres font exactement la même chose. Néanmoins, si vous souhaitez désactiver la synchronisation, alors accédez à l’icône en forme d’engrenage et cliquez sur Sync Devices.

D’autre part, il est possible de faire passer les appareils du mode Portrait au mode Paysage ou vice versa. Cela se fait en cliquant sur l’icône Rotate au-dessus de l’appareil.

Une autre fonction intéressante est également présente : la possibilité de réduire ou d’agrandir la vue d’un appareil en particulier en jouant avec les pourcentages ou avec la réglette.

Synchronisation de la navigation, mode portrait et paysage et taille de la fenêtre de l'appareil dans LT Browser

Annoter et faire des captures d’écran des problèmes relevés lors du test responsive en local

Avec la fonction de capture d’écran pleine page de LT Browser 2.0, vous pouvez faire des captures d’écran de la page entière du site Web.

Tout d’abord, activez la fonction de capture d’écran pleine page dans les paramètres (Full Page Screenshot).

Puis cliquez sur l’icône en forme d’appareil photo (Screenshot). Un message indiquant que la capture d’écran est en cours s’affiche alors. Lorsque celle-ci est finalisée, téléchargez-la sur votre PC en cliquant sur SAVE.

Faire une capture d'écran du test responsive avec LT Browser

Mais avant de la télécharger, mettez en évidence les problèmes relevés, s’il y en a, en annotant la capture d’écran avec des cercles, des carrés ou encore des textes de différentes couleurs.

Annoter les problèmes de responsive ou autres sur la copie d'écran avant téléchargement

💡Si vous préférez une capture vidéo, alors cliquez sur l’icône dédiée.

Utiliser les Chrome Devtools intégrés pour déboguer le site s’il n’est pas mobile-friendly

Pour déboguer votre site Web, cliquez sur l’icône <>. Les Chrome DevTools apparaissent et vous pouvez alors effectuer des tests en modifiant le code.

Utiliser les chrome DevTools lors du test site responsive en local

💡LT Browser inclut la fonction de rechargement à chaud (Hot reloading). Ainsi, vous verrez instantanément les changements se produire après avoir enregistré votre code.

Outre le test responsive en local, LT browser 2.0 possède également d’autres outils utiles.

Utiliser les autres fonctionnalités gratuites de LT browser 2.0

Générer un rapport de performance de la page Web

LT browser 2.0 intègre Google Lighthouse qui permet de générer un rapport de performance en un clic. Ainsi, sans quitter l’outil, vous pouvez consulter les scores de performances, accessibilité, bonnes pratiques, SEO et application Web progressive (PWA) pour les modes bureau et mobile de la page Web.

Et si vous souhaitez avoir plus de détails concernant les scores, alors cliquez sur More Details et vous atterrirez sur PageSpeed Insights.

Pour générer le rapport, rien de plus simple… Cliquez sur l’onglet Performance Report dans l’en-tête.

Rapport performance LT Browser inclus avec le test responsive sur PC

💡 En bas, vous trouverez aussi la résolution de l’appareil utilisée pour générer le rapport de performances ainsi que le temps de chargement, la durée de traitement du DOM…

Simuler la navigation du site sur des réseaux plus lents

LT Browser 2.0 vous permet de tester l’affichage de votre site Web mobile sur différents types de connexions réseau, notamment la 3G rapide, la 3G lente, en ligne et aussi hors ligne.

Cela est très utile pour identifier et résoudre les problèmes de temps de chargement.

Pour tester les performances de votre site Web sur différents environnements réseau, cliquez sur l’icône Network Throttling 🛜. Ensuite, sélectionnez le réseau dans la liste et faites défiler votre site.

Test responsive avec limitation réseau de LT Browser

Consulter les d’erreurs de chargement de votre page Web

Le rapport d’erreur permet de vérifier les erreurs de chargement de la page Web.

Si votre site Web comporte des erreurs, vous verrez une icône d’erreur rouge sous la fenêtre d’affichage de votre appareil. Cliquez alors sur l’icône et le détail de l’erreur s’affichera.

Rapport d'erreur LT Browser 2.0

Utiliser l’extension LT Debug pour déboger les pages Web

LT Debug extension Chrome

LT Browser inclut son extension Chrome LT Debug. Celle-ci regroupe neuf outils qui s’adressent plutôt à des développeurs :

  • Modify Headers pour ajouter, modifier ou supprimer des en-têtes de requête HTTP sur les URL souhaitées.
  • Block Resquests pour bloquer des requêtes HTTP pour une URL spécifique
  • Throttle Response pour réduire la vitesse du réseau pour toutes les requêtes réseau d’une URL
  • Add/Remove Query Param pour modifier les paramètres de requête d’URL
  • Redirect Requests pour spécifier une page qui doit être automatiquement redirigée vers une autre page
  • Change User Agent pour basculer entre les chaînes d’agent utilisateur et simuler d’autres navigateurs, appareils ou robots de recherche.
  • Insert Scripts (CSS/JS) pour simuler l’expérience d’une page Web en injectant un script JavaScript ou du CSS dans la console.
  • Allow Cors pour ajouter la règle (Access-Control-Allow-Origin: *) à l’en-tête de réponse et effectuer des requêtes Ajax inter-domaines dans les applications Web.
  • Content Security Policy pour générer des en-têtes CSP sur n’importe quel site Web/page Web

Pour accéder à l’extension LT Debug, cliquez sur son icône dans la barre des extensions.

💡 Lorsque vous utiliserez un des neuf outils, cela créera une règle spécifique que vous retrouverez sous Manage Rules. Il vous sera alors possible de la supprimer ou bien de l’éditer afin de la modifier.

Fonctionnalités de LT browser 2.0 nécessitant un compte

LT browser propose d’autres fonctionnalités intéressantes. Mais pour celles-là, il vous faudra créer un compte gratuit sur LambdaTest :

  • Sauvegarde des captures d’écran et vidéos sur le cloud (fonctionnalité Media on Cloud)
  • Activation du marquage de bug (fonctionnalité Enable Mark as Bug)
  • Intégrations avec des outils tiers de gestion de projet ou de messagerie instantanée (JIRA, Asana, Trello, Slack, Microsoft Teams, Google Chat, GitHub, etc.)
  • Partage des rapports de performances et de bugs, des copies d’écran avec une équipe

Responsively App ou LT browser pour faire un test de site responsive en local ?

Vous l’avez compris, entre Responsively App et LT browser 2.0, mon cœur balance. En effet, toutes deux sont des applications de bureau franchement top pour effectuer des tests responsive pour un site Web.

Alors, testez les deux et indiquer celle que vous préférez en commentaire.

Bon après, vous n’êtes pas obligés de faire des tests responsive en local. Il existe aussi des tests en ligne, des extensions de navigateurs ou encore un bookmarklet pour savoir si votre site est mobile friendly super sympas.😉

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires