13 novembre 2015
publié par 

====== Mise à jour 4/11/2022 ======

A partir de la version 28 l'éditeur de pages propose une option "GO" directement sur un téléphone, ou une tablette, connecté au réseau du poste de développement. Un billet détaille le sujet :

Tester le rendu d'un site en cours de développement directement sur un mobile, sans passer par les DevTools...

==============================

 

Les sites sont maintenant utilisés sur différents types de périphériques, avec des résolutions pouvant être très variées.
Afin de gagner du temps lors des tests réels sur les différents appareils cibles, une option de débogage (DevTools) des navigateurs bien pratique est à connaître. Elle permet en effet sur le poste de développement, lors du test "Go" des pages, de se faire une idée très précise du rendu des pages :
  • dans leur version "desktop", pour navigateurs sur PC ou Mac,
  • lorsqu'elles sont consultées depuis un iPhone, un iPad, un Samsung S4, un Nexus 5, 6, 7 ...

 

Par exemple avec Chrome, une fois dans les options de débogage accessibles par la touche F12, il faut utiliser le bouton "Toggle Device Mode" (Ctrl+Shift+M) qui permet de passer en émulation "device mode" :

 

 

Une combo "Device" permet alors de sélectionner un périphérique, afin de visualiser le site comme s'il s'agissait d'un appareil mobile et non pas de la station de développement.

 

Par exemple ici le site est lancé depuis le test sur une station de développement sous Windows, mais son rendu est identique à celui obtenu sur un Apple iPhone 6 :

 

 

Le rendu standard du même site est le suivant :

 

 

Bien pratique pour tester la version desktop et la version mobile d'une page dans le cas d'un site avec rebond ou dynamic serving, ou l'adaptation d'un site responsive web design / bootstrap.

 

L'option est présentée ici sous Chrome, elle est également disponible dans Internet Explorer 11 et Edge avec F12 puis le volet "Emulation".

 

====== Mise à jour 4/11/2022 ======

A partir de la version 28 l'éditeur de pages propose une option "GO" directement sur un téléphone, ou une tablette, connecté au réseau du poste de développement. Un billet détaille le sujet :

Tester le rendu d'un site en cours de développement directement sur un mobile, sans passer par les DevTools...

< Retour

Publier un commentaire : 
Votre adresse email ne sera pas publiée