web-dev-qa-db-fra.com

Comment déboguer CSS dans Android navigateur natif?

Je crée une application hybride avec Cordova pour Android. Le HTML5/CSS3 est rendu correctement avec Chrome pour le bureau et Chrome pour Android.

Cependant, via Cordova, le HTML5/CSS3 est rendu avec le navigateur natif (l'application nommée "Internet"). Et il semble qu'il y ait quelques problèmes avec l'interprétation CSS.

Firefox a Firebug et Chrome a un panneau de développeur, disponible sur le bureau pour le débogage à distance. Connaissez-vous un outil similaire que je pourrais utiliser pour déboguer efficacement le CSS du navigateur natif mobile?

androidcssremote-debugginghybrid-mobile-app
25
Yako

J'ai finalement trouvé Weinre . Cette solution appartient au projet Cordova. http://people.Apache.org/~pmuellr/weinre/docs/latest/

19
Yako

J'ai essayé weinre sur Android 2.2 navigateur de stock et cela fonctionne bien

Pour le configurer,

Sudo npm install -g weinre

// make it available to external (than just localhost)
weinre --boundHost -all-

// include this line (change to your IP address) to every page to be tested
<script src="http://xxx.xxx.x.xxx:8080/target/target-script-min.js#anonymous"></script>

Plus de détails sur ce site Débogage à distance avec weinre

13
ken

Juste pour donner une option plus récente.

Vous pouvez également utiliser BrowserSync. Actuellement, Weinre y est déjà intégré.

# Using a local.dev vhost
$ browser-sync start --proxy

# Using a local.dev vhost with PORT
$ browser-sync start --proxy local.dev:8001

# Using a localhost address
$ browser-sync start --proxy localhost:8001

# Using a localhost address in a sub-dir
$ browser-sync start --proxy localhost:8080/site1

http://www.browsersync.io/docs/command-line/

3
Thiago C. S Ventura

Tout d'abord, je lance ma Android console de périphérique virtuel avec $ Android avd et démarrer mon Android v4.4.2 émulation configurée uniquement avec navigateur natif installé).

Ensuite, j'exécute mon Chrome v54.0 for Desktop dans mon ordinateur portable, ouvrez Google-Developer-Tools/ Menu contextuel en haut à droite /More-Tools/Remote-Devices ...

Là, je vois mon appareil virtuel dans l'état connecté , donc je peux cliquer sur le bouton Inspect de n'importe quelle page de mon application Ionic2 .

Cette action ouvre une nouvelle fenêtre flottante des outils de développement de Chrome où je peux inspecter CSS, HTML et Javascript de la même manière que je fais dans mes applications Web.

J'espère que cela peut aider quelqu'un.

1
JavierFuentes