Le Deal du moment :
Manette Xbox Séries X avec adaptateur sans-fil ...
Voir le deal
52.99 €

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Les émulateurs web Empty Les émulateurs web

Mar 11 Juin 2019 - 12:01

Outils

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.

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 une page web précise en plein écran :
Spoiler:

Les émulateurs web Visu-zp-1600x900

Idea Clique sur l'image pour la voir en taille réelle
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 d'iPhone X et surtout sans changer la configuration de mon ordinateur :
Spoiler:

Les émulateurs web Visu-zp-iphonex

Idea Clique sur l'image pour la voir en taille réelle

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 sur desktop :
- Chrome
- Firefox
- Edge
     
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:

Les émulateurs web Chrome-f12
(c'est ce que tu vois en bas)

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

Les émulateurs web Responsive-chrome

3) Il te suffit ensuite de choisir ce que tu veux vérifier :
Spoiler:

Les émulateurs web Responsive-chrome1

Sur Firefox

1) On affiche la console de developpement en faisant F12 :
Spoiler:

Les émulateurs web Console-ff

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

Les émulateurs web Responsive-ff

3) Il te suffit ensuite de choisir ce que tu veux vérifier :
Spoiler:

Les émulateurs web Responsive-ff1

Sur IE

1) On affiche la console de developpement en faisant F12 :
Spoiler:

Les émulateurs web Console-ie

2) Pour accéder au menu d'émuluation, il faut cliquer sur :
Spoiler:

Les émulateurs web Responsive-ie

3) Il te suffit ensuite de choisir ce que tu veux vérifier :
Spoiler:

Les émulateurs web Responsive-ie1

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:

Les émulateurs web Responsive-ie2
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

 

Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses