Tutos dev’ & informatique

Tester son site web avec Internet Explorer, de IE8 à IE11

Publié le mercredi 15 septembre 2021
Tester son site internet avec les anciennes versions d'Internet Explorer

Introduction

On a beau être en l’an de grâce 2021, on retrouve tout de même Internet Explorer chez 1% des visiteurs sur le web (selon cette statistique globale prise en septembre 2021). Il s’agit en majorité d’IE11, qui représente 0.75% des visiteurs. Ces chiffres sont pour le grand public ; pour ce qui est des intranets et outils d’entreprises, les pourcentages sont plus élevés.

L’article d’aujourd’hui concerne le support d’Internet Explorer, plus particulièrement le test d’un site internet dans les différentes versions de IE8 à IE11. On parle ici de vérifier le rendu et le fonctionnement chez les visiteurs, pas de tests unitaires ou d’intégration.

Je vais présenter 5 façons de le faire, du plus simple au plus compliqué. C’est parti !

Utiliser IE 11 dans Windows 10

Pour les propriétaires de machines tournant sous Windows 10, il est simple de tester le rendu d’un site web avec Internet Explorer 11. En effet, ce dernier est normalement déjà installé. Il suffit de rechercher « internet explorer » dans le menu Démarrer pour le retrouver.

Si ce n’est pas le cas (il est absent ou a été désinstallé précédemment), il est possible de réinstaller IE11 sur Windows 10.

Internet Explorer 11 dans le menu Démarrer de Windows 10
IE11 est bien caché, mais toujours présent dans le menu Démarrer de Windows 10


Il n’est pas certain que cela fonctionne toujours l’année prochaine.
En effet, il est prévu que le logiciel Internet Explorer 11 soit complètement bloqué à partir de juin 2022.
On verra quels choix techniques seront pris par Microsoft à ce moment là ; pour ma part je pense que nous serons contraints d’utiliser le mode IE de Microsoft Edge, présenté un peu plus bas.


✔︎  Rien de particulier à faire pour la majorité des développeurs sous Windows 10. On trouve Internet Explorer 11 dans le Menu Démarrer et c’est parti.

✔︎  On utilise un véritable IE11. Le rendu sera donc le même sur notre machine que sur celles des visiteurs.

✔︎  IE11 peut émuler les moteurs des anciens Internet Explorer. Voir plus bas

  Disponible uniquement sur Windows 10. Développeurs sous Linux et MacOS s’abstenir.

  Le futur est incertain. On en reparle en juin 2022 !

Microsoft Edge : le mode IE

Les versions récentes de Microsoft Edge incluent un mode Internet Explorer qui permet de recharger une page avec le moteur de rendu d’IE11. Il est par défaut réservé aux sites reconnus comme étant incompatible avec Edge, mais un réglage permet de l’activer à la demande pour n’importe quelle page web.

Pour faire apparaitre l’entrée de menu qui permet de passer en mode IE, il faut d’abord autoriser le rechargement des sites dans ce mode, cela se fait dans la rubrique Navigateur par défaut des paramètres de Microsoft Edge. Il faut passer sur Autoriser le réglage appelé Autoriser le rechargement des sites en mode Internet Explorer, qui par défaut est à la valeur Défaut.

La capture suivante montre l’option :

Autoriser le mode IE dans Microsoft Edge
Activer le mode IE dans les réglages de Microsoft Edge


Une fois le réglage effectué, il faut redémarrer Microsoft Edge, et une nouvelle entrée Recharger en mode Internet Explorer fait son apparition, soit dans le menu du navigateur, soit dans le sous-menu Outils supplémentaires (selon la version).
La capture ci-dessous montre l’entrée de menu :

Entrée de menu de Microsoft Edge pour passer en mode Internet Explorer
Recharger facilement la page web en cours en mode Internet Explorer 11


Si vous utilisez beaucoup cette fonctionnalité, notez qu’il est possible d’ajouter à la barre d’outils un bouton pour activer / désactiver le mode IE, cela permet d’éviter d’avoir à ouvrir le menu et le sous-menu à chaque fois.


✔︎  Disponible pour les développeurs sous Windows 10 avec un simple réglage. C’est l’affaire de 10 secondes dans les paramètres de Microsoft Edge.

✔︎  On utilise le vrai moteur de IE11. Le rendu sera donc le même sur notre machine que sur celles des visiteurs.

✔︎  On peut avoir un onglet en mode IE et un onglet en mode Edge. Pratique pour comparer le rendu.

  Disponible uniquement sur Windows. Edge a beau être basé sur Chromium et multiplateforme, le mode IE utilise les fichiers du logiciel Internet Explorer 11, qui lui n’est pas compatible avec d’autres systèmes. Exit les codeurs sous Linux et MacOS, encore.

  Les outils de développement F12 ne sont pas disponibles en mode IE. Pour déboguer les styles et les scripts on devra repasser en mode Edge.

  Le mode IE ne permet pas d’émuler les moteurs des anciens Internet Explorer. Pas top si vous devez assurer une compatibilité IE10 !

Simuler les anciens moteurs de rendu avec IE 11

Si vous devez assurer une compatibilité avec un Internet Explorer legacy et que vous avez la chance d’avoir un IE11 sous la main, vous pouvez vous en servir pour émuler le rendu et le comportement des versions 5 à 10.

Cela se fait en allant dans les Outils de développement F12, onglet Emulation.
On peut alors changer le mode du document (la version du moteur de rendu Internet Explorer utilisé) et le User-Agent du navigateur.

Emulation des anciens Internet Explorer dans IE11
Internet Explorer 11 peut émuler les moteurs de IE10 à IE5


Il s’agit bien d’une simulation, pas d’un test réel avec le moteur de chaque version d’Internet Explorer. Il y a donc parfois quelques incohérences (par exemple, des fonctions javascript apparues dans IE8 mais disponibles quand même en simulation IE7… ).

Il faut donc toujours tester avec les vrais navigateurs de temps à autre. Malgré cela, l’émulation des anciens moteurs permet d’avancer plus rapidement.


✔︎  Rien de particulier à faire pour la majorité des développeurs sous Windows 10. Si Internet Explorer 11 est installé alors on peut émuler les anciens moteurs de rendu de IE5 à IE10.

✔︎  Emule tous les moteurs Internet Explorer de IE5 à IE10. Imaginez la quantité de machines (virtuelles ou physiques) qu’il faudrait pour faire tout ca.

  Disponible uniquement sur Windows. On commence à avoir l’habitude, désolé pour les utilisateurs de Linux et MacOS.

  Ce n’est qu’une simulation. Les vrais navigateurs chez les visiteurs peuvent avoir des comportements légèrement différents.

  Pas future-proof. Qu’adviendra-t’il de la simulation via IE11 en juin 2022 ?

Tester « en vrai » avec des machines virtuelles

Si on souhaite tester avec les vrais navigateurs Internet Explorer legacy mais que l’on ne veut pas encombrer son bureau avec autant d’ordinateurs que de versions à supporter, on peut utiliser des machines virtuelles, basées sur VirtualBox par exemple.

Virtualbox avec plusieurs machines virtuelles pour Internet Explorer
Huit machines virtuelles pour tester avec Internet Explorer, c’est possible


Microsoft nous propose de télécharger des machines virtuelles permettant de tester les navigateurs Internet Explorer de IE8 à IE11, ainsi que MsEdge. Si vous utilisez VirtualBox, il faut utiliser le menu Fichier > Importer un appareil virtuel pour les ajouter une fois qu’elles ont été téléchargées.

Il est important de prendre un instantané de la machine avant même de la lancer une première fois. Ces machines expirent au bout de 90 jours après le premier lancement, mais on pourra alors restaurer l’instantané, et continuer de s’en servir sans avoir à recréer une nouvelle machine… ou payer une licence Windows XP 😉


✔︎  On utilise les véritables Internet Explorer. Les rendus seront donc les mêmes sur notre machine que sur celles des visiteurs.

✔︎  Compatible avec tous les systèmes d’exploitation. Pour peu qu’ils puissent faire tourner un logiciel de virtualisation, évidemment.

  Télécharger et déployer les machines virtuelles prend du temps. Fibre optique recommandée.

  Les machines virtuelles consomment de l’espace disque. Surtout celles basées sur Windows Vista et plus.

  La machine physique doit être assez puissante. Si elle peine déjà à faire tourner le système hôte, inutile de rajouter une machine virtuelle en plus.

  Les performances d’affichage seront limitées. Les animations et les interactions ne seront pas aussi fluides que sur une machine physique. Mais finalement, les machines dotées de IE legacy ne sont-elles pas elles-mêmes peu performantes ?

  Sécurité inexistante. Une machine virtuelle sous Windows XP connectée à un réseau est un problème de sécurité. Pas sûr que les administrateurs de l’entreprise soient d’accord !

Utiliser un service en ligne

On va finir cet article en indiquant quelques services en ligne qui permettent de tester différents navigateurs à distance. C’est pratique, mais comme tout service, cela a un coût, alors que les méthodes précédentes sont gratuites (sauf pour ce qui est du temps, peut être).

Dans tous les cas, je n’ai pas eu moi même l’occasion d’utiliser ces services, du coup c’est à vous de voir si ce qu’ils proposent vous convient.

Tester différents navigateurs avec BrowserStack

BrowserStack

29$ par mois par utilisateur (< 5)
25$ par mois par utilisateur (>= 5)

Tester des navigateurs avec LambdaTest

LambdaTest

15$ par mois par utilisateur
Mode gratuit (6 sessions de 10min par mois)

 

Conclusion

Pour conclure, on peut dire que les développeurs qui travaillent sous Windows 10 sont plutôt vernis quand il s’agit d’assurer le support des vieilles versions d’Internet Explorer. Avec Internet Explorer 11 installé et sa capacité à émuler les anciens moteurs de rendu, la tâche est quand même bien facilitée.

Pour les autres… ca sera soit la solution des machines virtuelles, soit la solution des outils en ligne !

Attention cependant, le blocage d’IE11 prévu en juin 2022 pourrait changer toute la donne…

Si j’ai oublié une méthode, vous pouvez me l’indiquer depuis le formulaire de contact du site.

Bon code à vous, à la prochaine !

Références

Réparer et réinstaller Internet Explorer – Microsoft
Qu’est ce que le mode Internet Explorer – Microsoft
Téléchargement de machines virtuelles Internet Explorer – Microsoft

Photo de profil de Loïc Burtin Code Colibri développeur web à Dijon

A propos de l'auteur

Loïc Burtin

Développeur web indépendant, avec une tendance à couper les plumes en quatre pour que les sites se chargent plus rapidement.

Partager cet article :

Lire aussi

Filtrage en Javascript des cookies first-party non-autorisés
Javascript
php optimisation images data uri
PHP
coder sans jquery elements parents
Javascript
Inscription à la newsletter Inscription à la newsletter

Ce sujet vous intéresse ?

Inscrivez-vous à la newsletter pour être informé de la publication des nouveaux articles !

Ce formulaire est protégé par hCaptcha, dont la Politique de Confidentialité et les Conditions d'Utilisation s'appliquent.

Chargement en cours
Succès de l'opération