Débogage des problèmes de mise en page CSS dans Android

Question

Nous avons un site web existant, et j'ai été invité à tester sa compatibilité avec les navigateurs mobiles.

J'ai installé le SDK Android sur mon PC de bureau. Je suis en mesure d'afficher mon site en localhost l'émulateur, et j'ai identifié un certain nombre de problèmes dans la mise en page qui se produisent dans le navigateur Android.

Mais puisqu'aucun de ces problèmes de se produire dans un navigateur de bureau, j'ai eu du mal avec la façon de les déboguer. Par exemple, dans Firefox, il est très facile à utiliser Firebug pour voir ce que les feuilles de style ont été entrées grasses et à les ajuster à la volée pour voir comment il affecte la mise en page. Mais je n'ai pas trouvé un moyen de faire quelque chose de semblable sur l'émulateur Android.

La question est, à court d'essai+erreur, comment puis-je travailler sur ce qu'est la cause de ces problèmes d'implantation? Le navigateur Android (ou le SDK Android) avez n'importe quel type d'outils qui sont utiles pour le débogage CSS? Si oui, comment dois-je les utiliser?

[EDIT] je n'ai pas trouvé une solution à ce problème, donc je vais jeter ouvrir les portes pour les chasseurs de primes...

Answer 1

Weinre est probablement le plus proche de ce que vous recherchez:

Si ce que vous recherchez est quelque chose qui vous permet de modifier la mise en page en temps réel, cela devrait vous rendre heureux.

Answer 2

https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc?hl=en-US

https://chrome.google.com/webstore/detail/cllkoedgiefnomcccogcalmjogjfcpji?hl=en-US

https://chrome.google.com/webstore/detail/cghdkdcepiflkhaddpomjehcmdojgobh?hl=en-US

J'ai trouvé plusieurs options qui apparaissent comme si elles doivent travailler pour vous si un émulateur/simulateur suffira, ou au moins de vous obtenir a commencé. L'avantage à cela est que les Outils de développement Chrome semblent travail avec les add-ons!

Answer 3

Personnellement, je le préfère nettement à faire de ce réel pour Android matériel. Dans l'utilisation d'un appareil à écran tactile est tout à fait différent, même les plus précises de l'émulateur, des choses comme le gamma, densité de pixels, la performance, l'interaction tactile (sont vos liens assez grand?), portrait/paysage, et même le fait que vous tenez dans votre main le rend très différent de l'expérience du bureau. Si vous voulez voir comment votre site fonctionne sur mobile/Android, obtenir un bon marché de seconde main de l'appareil à tester sur!

Comme pour le débogage, j'ai toujours ma propre "journal" la fonction qui crée un div#console si firebug/navigateur de la console n'est pas disponible. Cela fonctionne assez bien pour le débogage sur un combiné avec la mise en garde qu'il couvre une partie du contenu. Vous pouvez ensuite imprimer le style d'un objet avec quelque chose comme

log(window.getComputedStyle(document.getElementById("myobj")); 

Note: ce qui précède ne fonctionne pas dans IE.

Answer 4

Vous l'avez peut-être déjà vu, mais le site de documentation du SDK contient des informations de base sur le développement et le débogage d'applications Web sur Android:

Présentation des applications Web

Débogage d'applications Web

J'espère que cela pourra aider!

Answer 5

Je ne sais pas comment vous détecter un appareil mobile, mais je détecte un client avec l'agent de l'utilisateur. De ce fait, je peux tout simplement envoyer une autre chaîne de l'agent utilisateur pour tester CSS qui fonctionne assez bien.

Pour Firefox j'utilise User Agent Switcher. De plus, j'ai utiliser le Web outil de développement non seulement pour afficher tous les paramètres, mais aussi l'option de Redimensionnement pour simuler la largeur de la fenêtre d'affichage.

Apple Safari a un développeur de l'extension et de la au sein aussi un User Agent Switcher. Vous pouvez ajouter votre propre chaîne de l'Agent Utilisateur.