Comment puis-je simuler des appareils mobiles et déboguer dans le navigateur Firefox?
Je recherche un outil qui affiche mon site Web en mode appareil mobile. Aussi, je veux déboguer mon site web avec des outils comme Firebug ou ... encore mieux, je peux utiliser Firebug. Quelle est une solution établie pour le faire?
Vous pouvez utiliser des outils propres navigateur (Firefox, IE, Chrome ...) pour déboguer votre JavaScript.
En ce qui concerne le redimensionnement, Firefox/Chrome a ses propres ressources accessibles via Ctrl + Shift + I OR F12. Allez l'onglet "style editor" et cliquez sur l'icône "adaptive/responsive design".
Anciennes versions de Firefox
Nouveau Firefox/Firebug
Chrome
* Une autre méthode consiste à installer un addon tel que "Développeur Web".
Utilisez l'outil de conception réactif à l'aide de Ctrl + Shift + M.
La plupart des applications Web détectent les appareils mobiles basés sur les en-têtes HTTP.
Si votre site Web utilise également des en-têtes HTTP pour identifier un périphérique mobile, vous pouvez procéder comme suit:
- Ajouter des en-têtes de modification dans votre navigateur Firefox ( https://addons.mozilla.org/en-US/firefox/addon/modify-headers/ )
- Utiliser le plugin modifier les en-têtes:
- sélectionnez l'onglet En-têtes -> sélectionnez l'action 'ADD'
- simuler par exemple iPhone ajoute un en-tête avec le nom
User-Agentet la valeur:Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3 - cliquez sur le bouton 'Ajouter'
- Après cela, vous devriez pouvoir voir la version mobile de votre application Web dans Firefox et utiliser le plugin Firebug.
J'espère que ça aide!
Vous pouvez utiliser l'add-on Firefox ser Agent Overrider . Avec cet add-on, vous pouvez utiliser n'importe quel agent utilisateur que vous voulez, par exemple:
Firefox 28/Android: Mozilla/5.0 (Android; Mobile; rv:28.0) Gecko/24.0 Firefox/28.0
Si votre site Web détecte des appareils mobiles via l'agent utilisateur, vous pouvez tester votre mise en page de cette façon.
Mise à jour de novembre 17:
En raison de la publication de Firefox 57 et de l'introduction de l'extension Web, ce module n'est malheureusement plus disponible. Sinon, vous pouvez modifier la préférence de Firefox general.useragent.override dans votre configuration:
- Dans la barre d'adresse, tapez
about:config - Rechercher
general.useragent.override - Si la préférence n'existe pas, cliquez avec le bouton droit sur la page about: config, cliquez sur Nouveau, puis sélectionnez Chaîne.
- Nommez la nouvelle préférence general.useragent.override
- Définissez la valeur sur l'agent d'utilisateur souhaité
J'utiliserais le "Responsive Design View" disponible sous Outils -> Développeur Web -> Responsive Design View. Cela vous permettra de tester votre CSS avec différentes tailles d'écran.
Vous pouvez utiliser le mode de conception réactif intégré déjà mentionné (via les outils de développement) pour définir des tailles d'écran personnalisées avec le Random Agent Spoofer Plugin pour modifier vos en-têtes afin de simuler votre utilisation de Mobile, Tablet, etc. De nombreux sites Web précisent leur contenu en fonction de ces en-têtes identifiés.
En tant qu’outils de développement, vous pouvez utiliser les outils de développement intégrés (Ctrl + Shift + I ou Cmd + Shift + I pour Mac) qui sont devenus assez similaires à Chrome dev tools maintenant.
Je pense qu'il est préférable d'utiliser la barre d'outils de basculement de périphérique chrome avec l'inspecteur chrome. Il vous fournit un commutateur d'agent utilisateur avec le mode réactif. 