web-dev-qa-db-fra.com

Comment déboguer un navigateur natif Android (pas Chrome) sur un ordinateur de bureau?

Je peux déboguer avec succès l’application d’une application Web exécutée sur un appareil mobile à l’aide des outils de développement Chrome pour Google (chrome: // inspect) lorsque mon appareil mobile utilise le navigateur de Chrome (avec la redirection de port). Je me demandais s'il était possible de faire la même chose en utilisant le navigateur natif d'Android, je veux dire le navigateur pré-installé dans Android dont le lanceur d'applications ressemble à ceci, juste pour être plus clair, :-):

enter image description here

Y-a-t-il un moyen de faire ça? Parce que lorsque j'ouvre un onglet avec ce navigateur dans chrome: // inspect, bien sûr, je ne reçois pas l'onglet ouvert et je ne peux pas inspecter le contenu affiché par mon périphérique à partir du navigateur natif.

J'ai besoin d'une manière de le faire parce que j'ai trouvé quelques problèmes liés à l'interface utilisateur (CSS, JS) spécifiquement liés au navigateur natif, en fait en chrome tout fonctionne à merveille, mais sur le navigateur natif no.

J'ai également essayé d'utiliser weinre et je l'ai trouvé très utile, mais je ne peux l'utiliser que dans le contexte d'un réseau local, ce qui signifie que je dois associer le périphérique à une adresse IP de réseau local et que je dois accéder à l'application Web de http://localhost (comme dans Chrome DevTools avec la redirection de port), car j'utilise un logiciel côté serveur qui ne dépend que de localhost (ce n'est pas le mien, je ne le ferais pas si je le pouvais).

Alors, y a-t-il un moyen d'accomplir cela sur le navigateur natif par défaut d'Android? Vous utilisez weinre et/ou Chrome DevTools?

Merci pour l'attention!

P.S .: Je sais que le navigateur Android n’est plus natif d’Android 4.4, de toute façon, j’aurais besoin de cela pour la compatibilité, bien sûr, c’est possible (cela devrait être, je suppose).

15
tonix

about:debug fonctionne au moins pour la console JavaScript. M'a aidé à voir pourquoi il est cassé sur ces navigateurs natifs, basés sur WebView et limitée.

2
stamster

Vous pouvez utiliser les outils de développement Chrome pour déboguer un site Web mobile s'exécutant dans le navigateur Android standard, de la même manière que vous pouvez effectuer le débogage lorsque le site Web s'exécute sous Chrome pour Android:

Si vous ne l'avez pas déjà fait, suivez toutes les étapes de la réponse acceptée ici, pour activer le débogage à l'aide des outils de développement de Chrome (sur votre ordinateur de bureau):

Chrome DevTools Devices ne détecte pas le périphérique lorsqu'il est branché

  • Maintenant, avec votre appareil connecté à votre ordinateur, ouvrez votre page Web dans le navigateur Android d'origine. Allez dans les outils de développement de Chrome, où vous devriez voir votre appareil connecté, et vous devriez voir quelque chose comme ceci (avec le bouton habituel 'inspecter' sur le côté droit). Cliquez sur le bouton "inspecter" et vous êtes prêt - vous pouvez déboguer le navigateur Android à l'aide des outils de développement de Chrome!

 enter image description here

0
Chris Halcrow

Vous pouvez aussi utiliser chrome: // inspect pour cela. Assurez-vous simplement que votre navigateur natif est en cours d'exécution car vous ne pouvez pas le lancer comme vous pouvez le faire chrome à partir de cette page. 

De plus, si cela n'apparaît pas dans la liste en utilisant adb pour lister, les périphériques résoudront ce problème. 

adb devices

Pour une instruction complète, consultez la documentation Android sur ce sujet https://developer.chrome.com/devtools/docs/remote-debugging

0
Delconis