Partagez | 
 

 Les émulateurs we

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 113
MessageSujet: Les émulateurs we   Dim 6 Déc - 17:42

Tutoriels

Rédigé par Miettes

Les émulateurs web






Bonjour !

Quand on code, il est indispensable de vérifier l'affichage de notre réalisation sous différents navigateurs, mais aussi sur différents supports (pc, tablette, mobile).
Évidemment, il est impossible d'avoir tous les modèles possibles dans un placard à la maison. Les concepteurs de navigateurs Internet l'ont bien compris. A présent, on retrouve sur chaque browser ce qu'on appelle un émulateur.

Exclamation Sous Mac, les différents navigateurs n'ont pas d'émulateur. De ce fait, ce tutoriel ne peut s'appliquer que si tu es sous Windows ou Linux.

Un émulateur ? Qu'est-ce que c'est ?

Pour faire simple, un émulateur va faire "comme si" tu étais sur le support ou avec la résolution que tu choisis.

Par exemple, ici, j'ai un écran avec une résolution de 1600*900. Voilà comment je vois le forum actuel en plein écran :
Spoiler:
 
Eh bien, grâce à l'émulateur de Chrome (oui, je navigue sous Chrome), je peux voir en un clic le rendu du forum pour un écran de résolution 900*600 et surtout sans changer la configuration de mon ordinateur :
Spoiler:
 

Comment utiliser les émulateurs ?

Tout d'abord, si tu as l'habitude de coder, il est nécessaire d'avoir les 3 navigateurs les plus courants (au 6 juillet 2015 - source : zdnet.fr) :
- Chrome (~ 53% des utilisateurs)
- Internet Exploreur (~ 20% des utilisateurs)
- Firefox (~ 18 % des utilisateurs)

Parce que oui, la première chose à faire quand tu codes, c'est de vérifier l'affichage de ta "création" sur ces navigateurs.
Ensuite, chacun d'eux a son émulateur et nous allons voir ici comment l'utiliser Smile

En règle générale, la manipulation va toujours être la même : on affiche la console de développement en cliquant sur F12 et on va dans le menu adéquate de la console.

Voyons ça en détail :

Sur chrome

1) On affiche la console de developpement en cliquant sur F12 :
Spoiler:
 
(c'est ce que tu vois en bas)

2) On va dans le menu "émulateur" en cliquant sur le petit téléphone :
Spoiler:
 

3) Il te suffit ensuite de choisir ce que tu veux vérifier :
Spoiler:
 
en changeant le support (device), la "rapidité" de la connexion (network) ou directement en changeant la résolution de l'écran.

Sur Firefox

1) On affiche la console de developpement en faisant "clic droit > examiner l'élement" (ou F12 si tu n'as pas installé Firebug) :
Spoiler:
 

2) On va dans le menu "émulateur" en cliquant sur "vue adaptative" :
Spoiler:
 

3) Il te suffit ensuite de choisir ce que tu veux vérifier :
Spoiler:
 
(comme tu le remarqueras, l'émulateur de firefox est beaucoup moins fournis que l'émulateur de chrome ou IE)

Sur IE

1) On affiche la console de developpement en faisant "clic droit > examiner l'élement" :
Spoiler:
 

2) Par défaut, on est directement sur le bon menu. Si ce n'est pas le cas, tu accéderas au menu d'émulation en cliquant sur :
Spoiler:
 

3) Il te suffit ensuite de choisir ce que tu veux vérifier :
Spoiler:
 
en changeant le support (device), la "rapidité" de la connexion (network) ou directement en changeant la résolution de l'écran.

Idea Au passage ici, tu l'as peut-être remarqué : tu peux également demander à ton navigateur de se comporter en IE7, IE8 ou IE9 :
Spoiler:
 
Pour cela, il te suffit de changer la sélection dans la liste déroulante "Mode document".




A présent, tu n'as plus aucune excuse pour ne pas afficher correctement tes codes sur tous les navigateurs Wink




Un souci avec ce tutoriel ? N'hésite pas à venir poser ta question [ici]

Idea n'oublie pas de lire et de suivre les règles de la section



Je soussignée, Miettes, accepte qu'un directeur reposte le tutoriel "Les émulateur web" tel que je l'ai rédigé.


 

Les émulateurs we

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants