|
|
|
|
|
|
|
|
|
|
- Présentation
- Options de débogage spécifiques de Chrome, IE 11, Edge, ...
Testez les pages "Responsive Web Design"
 Avertissement
En version 28, le mode d'édition des pages initialement appelé "Responsive Web Design : mise en page par tranche" devient "Tranches (Responsive historique pour compatibilité)". Le mode "Responsive (zoning et agencements)" devient le mode recommandé pour les nouvelles créations. Pour plus de détails, consultez Changement du mode d'édition des sites mobile friendly. Cette page de documentation est adaptée aux nouvelles options de la version 28.
Les pages en mode Responsive Web Design peuvent être testées comme toutes les pages WEBDEV sous le navigateur de votre choix. Il suffit alors de diminuer (en mode "Desktop First") ou d'augmenter (en mode "Mobile First") la largeur du navigateur pour voir les changements dans la page. Afin de gagner du temps lors des tests réels sur les différents appareils cibles, une option de débogage des navigateurs bien pratique est à connaître. Utilisée sur le poste de développement lors du test "Go" des pages, cette option permet de se faire une idée très précise du rendu des pages : - dans leur version "Bureau", pour navigateurs sur PC ou Mac,
- lorsqu'elles sont consultées depuis un iPhone, un iPad, un Samsung S4, un Nexus 5, 6, 7, ...
Options de débogage spécifiques de Chrome, IE 11, Edge, ... Par exemple, avec Chrome, affichez les options de débogage grâce à la touche F12. Le bouton "Toggle Device Mode" (Ctrl + Maj + M) 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 "Bureau" 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. L'option est présentée ici sous Chrome, elle est également disponible dans Internet Explorer 11 et Edge en utilisant la touche F12 puis le volet "Emulation". |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|