utilisez le mode périphérique pour approximer l’apparence et les performances de votre page sur un appareil mobile.
Device Mode est le nom de la collection lâche de fonctionnalités dans Chrome DevTools qui vous aident à simuler des appareils mobiles., Ces fonctionnalités incluent:
- simulation d’une fenêtre mobile
- limitation du réseau
- limitation du processeur
- simulation de la géolocalisation
- réglage de l’orientation
Limitations
considérez le mode périphérique comme une approximation de premier ordre de l’apparence et de la sensation de votre page sur Avec le mode appareil, vous n’exécutez pas réellement votre codesur un appareil mobile. Vous simulez l’expérience utilisateur mobile à partir de votre ordinateur portable ou de bureau.
Il y a certains aspects des appareils mobiles que DevTools ne pourra jamais simuler., Par exemple, l’architecture des processeurs mobiles est très différente de l’architecture des processeurs de bureau laptopor. En cas de doute, votre meilleur pari est de lancer votre page sur un appareil mobile. Utilisez le débogage à distance pour afficher, modifier, déboguer et profiler le code d’une page à partir de votre ordinateur portable ou de bureau lorsqu’il s’exécute sur un appareil mobile.
simuler une fenêtre mobile
Cliquez sur Toggle Device Toolbar
pour ouvrir l’interface utilisateur qui vous permet de simuler une fenêtre mobile.
par défaut, la barre d’outils du périphérique s’ouvre en mode Fenêtre réactive.
mode Fenêtre réactive
faites glisser les poignées pour redimensionner la fenêtre aux dimensions dont vous avez besoin. Ou, entrez des valeurs spécifiquesdans les zones largeur et hauteur. Dans la Figure 2, la largeur est définie à 628 et la hauteur est définie à662.
Show media queries
pour afficher les points d’arrêt des requêtes multimédias au-dessus de votre fenêtre, cliquez sur plus d’options, puis sélectionnez Show mediaqueries.
Cliquez sur un point d’arrêt pour modifier la largeur de la fenêtre afin que le point d’arrêt soit déclenché.
définir le type de périphérique
utilisez la liste des types de périphérique pour simuler un périphérique mobile ou un périphérique de bureau.
le tableau ci-dessous décrit les différences entre les options. Méthode de rendu indique si Chrome rend la page en tant que fenêtre d’affichage mobile ou de bureau. Icône du cursorréfère au type de curseur que vous voyez lorsque vous survolez la page., Les événements déclenchés indiquent si la page déclenche des événementstouch ouclick lorsque vous interagissez avec la page.,id= »b8e8c2fed7″>
Mobile Device Viewport Mode
To simulate the dimensions of a specific mobile device, select the device from the Device list.,
Rotate the viewport to landscape orientation
Click Rotate 
to rotate the viewport to landscape orientation.
Note that the Rotate button disappears if your Device Toolbar is narrow.
Voir également définir l’orientation.
afficher le cadre de l’appareil
lorsque vous simulez les dimensions d’un appareil mobile spécifique comme un iPhone 6, ouvrez plus d’Optionset sélectionnez ensuite afficher le cadre de l’appareil pour afficher le cadre de l’appareil physique autour de la fenêtre.
Ajouter un périphérique mobile
Pour ajouter un périphérique:
-
Cliquez sur la liste des Périphériques, puis sélectionnez Modifier.
Figure 11. En sélectionnant Modifier -
Cliquez sur Ajouter un périphérique personnalisé.
-
entrez un nom, une largeur et une hauteur pour le périphérique. Les champs ratio de pixels de l’appareil, chaîne de l’agent utilisateur et type de périphérique sont facultatifs. Le champ Type de périphérique est la liste quiest défini sur Mobile par défaut.,
Figure 12. Creating a custom device
Show rulers
Click More options and then select Show rulers to see rulers above and to the leftof your viewport. The sizing unit of the rulers is pixels.
Zoom la fenêtre
utilisez la liste Zoom pour effectuer un zoom avant ou arrière.
étranglez le réseau et le processeur
pour étrangler le réseau et le processeur, sélectionnez mobile de niveau moyen ou mobile bas de gamme dans la liste des gaz.
Mid-tier mobile simule la 3G rapide et étrangle votre CPU de sorte qu’il soit 4 fois inférieur à la normale. Bas de gamme mobile simule lent 3G et étrangle votre CPU 6 fois plus lent que la normale.Gardez à l’esprit que la limitation est par rapport à la capacité normale de votre ordinateur portable ou de bureau.
notez que la liste des gaz sera masquée si la barre D’outils de votre appareil est étroite.
étrangler le processeur uniquement
pour étrangler le processeur uniquement et non le réseau, accédez au panneau Performances, cliquez sur Paramètres de capture
, puis sélectionnez ralentissement 4x ou ralentissement 6X dans la liste CPU.
étrangler le réseau uniquement
pour étrangler le réseau uniquement et non le CPU, allez dans le Panneau réseau et sélectionnez fast 3G ou Slow 3G dans la liste des gaz.,
ou appuyez sur Commande+Maj+P (Mac) ou Contrôle+Maj+P (Windows, Linux, Chrome OS) pour ouvrir le menu de commande, tapez3G, et sélectionnez Activer la limitation rapide 3G ou la limitation lente 3G.
Vous pouvez également définir la limitation du réseau à partir du panneau performances., ClickCapture Settings puis sélectionnez Fast 3G ou Slow 3G dans la liste réseau.
remplacer la géolocalisation
pour ouvrir l’interface utilisateur de remplacement de la géolocalisation, cliquez sur Personnaliser et contrôler DevTools
, puis sélectionnez more tools > capteurs.
sélectionnez l’un des préréglages de la liste de géolocalisation, ou sélectionnez emplacement personnalisé pour entrer vos propres coordonnées, ou sélectionnez Emplacement indisponible pour tester le comportement de votre page lorsque la géolocalisation est dans un État d’erreur.
Set orientation
To open the orientation UI click Customize and control DevTools and then selectMore tools > Sensors.
sélectionnez l’un des préréglages dans la liste Orientation ou sélectionnez orientation Personnellepour définir vos propres valeurs alpha, bêta et gamma.
Commentaires
Voir Rejoindre les DevTools de la communauté pour d’autres façons de laisser des commentaires.