Tester et déboguer les Touch Events d’IE10 et votre Responsive Web Design grâce au simulateur de Windows 8 et VS 2012
Je suis en train de travailler sur des projets utilisant les Touch Events d’IE10 ces derniers temps. Aussi, même si j’ai la chance et le privilège d’avoir une tablette Windows 8 à disposition, je cherchais un moyen plus simple d’effectuer des tests au touch. En tout cas, je voulais surtout éviter de passer ma vie à basculer entre mon ordinateur portable classique et ma tablette toutes les 2 secondes pendant les phases de développement. En cherchant à atteindre ce but, j’ai découvert quelques petites astuces qui pourraient peut-être vous aider à déboguer les évènements de touch sous IE10 dans votre code sans pour autant utiliser un périphérique supportant le touch. Par ailleurs, il y eu un effet de bord particulièrement agréable à ces techniques découvertes: la même approche vous aidera également à tester et valider votre “Responsive Web Design”!
Prérequis : pour pouvoir suivre ces tutoriaux, vous devez au préalable :
1 – Avoir téléchargé et installé la version Release Preview de Windows 8 sur votre machine : https://preview.windows.com
2 – Avoir téléchargé et installé les outils Visual Studio 2012 RC Express pour Windows 8 : https://msdn.microsoft.com/fr-fr/windows/apps/br229516
Note : si vous avez un Mac, Windows 8 s’installe très bien via BootCamp ou dans une machine virtuelle gérée par Parallels par exemple
L’implémentation des Touch Events dans Internet Explorer 10
Si vous ne connaissez pas encore comment notre implémentation du support du touch fonctionne, je vous invite à lire ces 3 articles :
- Touch Input for IE10 and Metro style Apps
- Handling Multi-touch and Mouse Input in All Browsers
- Aller au-delà du panoramique, du zoom et de l'appui à l'aide des événements de mouvement
Je vous conseille également cette ressource complémentaire : la librairie Pointer.JS. Elle a pour but de tenter d’imiter le modèle d’IE10 pour les autres navigateurs.
Le simulateur Windows 8 pour émuler le touch
Le simulateur Windows est installé avec les outils de développement Visual Studio et est normalement réservé aux tests et débogage de vos applications de style Metro. Vous pouvez en savoir un peu plus sur cet outil ici: First look at Windows Simulator
Cependant, rien ne nous empêche de l’utiliser pour déboguer nos applications web tournant au sein de l’IE10 contenu dans le simulateur. Laissez moi vous montrer comment faire.
1 – Tout d’abord, lancez le simulateur via l’exécutable suivant : Microsoft.Windows.Simulator.exe situé dans le répertoire : “Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\11.0”
Puis cliquez sur la tuile amenant vers le bureau.
2 – Lancez IE10 puis naviguez dans “Internet Options” et l’onglet “Advanced”. Vérifiez bien que chacune des options “Disable script debugging (Internet Explorer) ” & “Disable script debugging (Other)” sont bien désactivées:
3 – Naviguez vers l’URL que vous souhaitez tester et/ou déboguer. Par exemple, testons cette démo : Finger Painting de notre site : IE Test Drive. Grâce au simulateur, vous pouvez simuler soit la souris classique et/ou le touch. Pour basculer de l’un à l’autre, il suffit d’utiliser ces 2 boutons:
Bon, au début, vous serez tenter de croire que vous obtenez exactement la même chose:
Mais en cliquant sur ce bouton :
Vous verrez que vous pouvez déjà simuler du “dual touch” pour effectuer des opération de zoom ou de rotation :
Bon, bien entendu, ces simulations de zoom et rotation ont bien plus d’intérêts dans une démo telle que celle-ci : Browser Surface
Bref, en utilisant le simulateur, vous serez en mesure d’émuler le zoom et les rotations grâce à ces gestures. Cela vous permet donc d’effectuer un 1er niveau de tests sur vos sites et dans votre code.
Visual Studio 2012 pour déboguer votre code JavaScript
Vous aurez surement besoin d’aller un peu plus loin dans le test et le débogage de l’expérience touch que vous essayez de mettre en place sur votre site. Pour cela, vous aurez naturellement besoin d’analyser votre code JavaScript. La 1ère solution évidente consiste alors à appuyer sur la touche F12 pour utiliser les outils de développement d’IE10. Cependant, la taille réduite de la fenêtre du simulateur n’offre pas des conditions très confortables pour se contenter de la touche F12 je trouve.
Une autre solution bien plus pratique consiste alors à utiliser le débuggeur intégré à Visual Studio 2012. Voici ce que vous devez faire pour cela :
1 – Dans votre session principale (en dehors du simulateur donc), lancez Visual Studio 2012 RC Express et naviguez dans les menus “DEBUG” –> “Attach to Process… ” :
2 – Identifiez le processus “iexplorer.exe” (de type “x86, Script”) sur lequel vous attacher :
3 – Si tout se passe comme prévu, vous devriez alors avoir un résultat similaire à celui-ci avec la démo “Browser Surface” :
Si ce n’est pas le cas, c’est que vous vous êtes probablement attaché au mauvais processus iexplore.exe ou alors vous avez peut-être oublié de décocher la case chargée de désactiver le débogage des scripts.
Une fois le bon processus identifié et attaché, vous devriez voir l’ensemble des fichiers JavaScript intéressants dans le panneau de droite nommé “Solution Explorer” et plus exactement sous le nœud nommé “Script Documents”.
4 – Très bien. Commençons par nous concentrer sur l’expérience de débogage du JavaScript. Pour cela, ouvrez par exemple le fichier “demo.js” et ajoutez un point d’arrêt à la ligne 136 qui devrait être: if (Options.inertiaBounce()) {
5 – Prenez alors une image affichée dans la démo “Browser Surface” et lancez la grâce à la simulation du touch. Cela devrait alors automatiquement arrêter le code dans Visual Studio :
Vous pouvez alors avancer pas-à-pas dans le code, analyser la sortie console de JavaScript, sauter directement à la définition d’une fonction en faisant bouton droit dessus, etc. Bref, vous aurez alors une expérience très riche de débogage de votre JavaScript!
En conclusion, vous pouvez donc entièrement déboguer la logique de touch implémentée dans votre code JavaScript pour supporter IE10 sans aucun périphérique touch sous la main. Bien sûr, vous devrez faire vos tests sur un véritable périphérique touch pour avoir une idée parfaite de la manière dont votre code se comporte dans ces conditions. Malgré tout, cette première approche peut déjà vous aider et vous faire gagner du temps je l’espère.
Tester & valider votre Responsive Web Design
Il s’avère que le simulator et VS 2012 peuvent également être des outils de choix pour vous aider à tester et valider votre responsive design. Commençons par voir ce que le simulateur peut vous offrir de ce côté.
J’ai commencé par aller chercher sur le web les meilleurs sites implémentant les règles et principes d’un bon “responsive design”. J’ai finalement décidé d’utiliser ce site en exemple : https://garretkeizer.com/ pour les prochaines copies d’écran. Mais vous pouvez trouver d’autres exemples bien sympatôches ici : https://mediaqueri.es
Voici le design de ce site web dans Internet Explorer 10 en utilisant la configuration par défaut du simulateur :
Ok, gardez cette image en tête et regardons maintenant les options bien pratiques du simulateur pour aller plus loin.
1 – Vous pouvez tester comment votre design s’adapte au mode portrait et paysage en cliquant sur ces boutons :
Et voici par exemple le résultat du site retenu en mode portrait :
2 – Vous pouvez également simuler différentes résolutions d’écran en cliquent sur ce bouton :
3 – Et voici le résultat, toujours avec le même site, mais cette fois-ci en 2560x1440 (à comparer au résultat par défaut en 1366x768 de la 1ère copie d’écran) :
4 – Pour finir, vous pouvez aller encore plus loin en utilisant un superbe outil nommé le “DOM Explorer” dans Visual Studio 2012. Ce dernier va vous permettre de revoir et d’éditer en live votre CSS. Par exemple, toujours une fois le débuggeur attaché au bon processus, vous devriez voir (par défaut à gauche) une fenêtre appelée “DOM Explorer”. Vous verrez qu’en passant votre souris au-dessus des nœuds HTML que les zones correspondantes s’afficheront dans le navigateur contenu dans le simulateur :
Ensuite, bien sûr, vous serez en mesure de revoir, éditer et tracer vos styles dans Visual Studio pour potentiellement corriger votre design CSS.
C’est tout pour aujourd’hui. J’espère que ces petites asturces pourront en aider certains et vous faire gagner un peu de temps. Bref, gardez un œil ouvert vers ces outils gratuits bien pratiques !
David