Comment puis-je effectuer un élément d’inspection dans Chrome sur mon appareil Galaxy S3 Android?
Comment puis-je effectuer un élément d’inspection dans Chrome sur mon appareil Galaxy S3 Android?
J'ai essayé plusieurs guides en ligne, l'un d'eux indiquant que Android Une chose SDK permettant d'exécuter adb forward tcp: 9222 localabstract: chrome_devtools_remote, mais tout ce qui est dit est "erreur: périphérique introuvable" .
Quelqu'un a une idée sur la façon de faire cela?
pour le débogage à distance sur Android avec Chrome: essayez ceci https://developer.chrome.com/devtools/docs/remote-debugging
Vous pouvez maintenant le faire sans utiliser Android SDK.
Dans la dernière version de chrome (je travaille sur 34.0.x):
- Aller vers
chrome://inspect/ - Vérifier
Discover USB Devices - Branchez votre téléphone via USB. Une fenêtre contextuelle devrait apparaître vous demandant la permission de vous connecter à votre ordinateur. Accepte-le.
Il y aura maintenant un article sur le chrome://inspect/ _ pages pour votre téléphone et vous pouvez cliquer sur inspect. Les outils de développement vont apparaître et le tour est joué!
Mise à jour: 20/08/2015
Veuillez noter que les instructions ont changé depuis que cette question a été posée il y a 2 ans .
Ainsi, les versions les plus récentes de Android et Chrome pour Android. Vous devez utiliser ceci.
https://developers.google.com/web/tools/setup/remote-debugging/remote-debugging?hl=fr
Réponse originale:
J'ai le S3 et ça marche bien. J'ai constaté qu'une erreur courante consiste à ne pas activer le débogage USB dans Chrome mobile. Vous devez non seulement activer le débogage USB sur l'appareil lui-même sous les options du développeur, mais vous devez également vous rendre dans le navigateur Chrome de votre téléphone et l'activer également dans les paramètres.
Essayez ceci avec le SDK
- Chrome pour Mobile - Paramètres> Outils de développement> [x] Activer le débogage Web USB
- Périphérique - Paramètres> Options pour les développeurs> Débogage USB [x]
- Connecter le périphérique à l'ordinateur
Activez le transfert de port sur votre ordinateur en exécutant la commande suivante ci-dessous
C:\adb avant tcp: 9222 localabstract: chrome_devtools_remote
Accédez à http://localhost:9222 Dans Chrome sur votre ordinateur.
Dépannage:
Si vous obtenez command not found Lorsque vous essayez d'exécuter ADB, assurez-vous que Platform-Tools est dans votre chemin ou utilisez simplement le chemin d'accès complet à votre SDK et exécutez-le.
C:\path-to-SDK\platform-tools\adb forward tcp:9222 localabstract:chrome_devtools_remote
Si vous obtenez "device not found", Exécutez adb kill-server, Puis réessayez.
Pour commencer, vous aurez besoin du Android SDK pour commencer: http://developer.Android.com/sdk/index.html MAIS sélectionner pour existant = IDE afin que vous obteniez les outils plutôt que tous Android Studio.
Dans Chrome Beta sur votre appareil Android, procédez comme suit:
Menu> Paramètres> Outils de développement> Activer le débogage USB
Appuyez sur la touche d'accueil de l'appareil et accédez à Paramètres> Options pour les développeurs> Activer le débogage USB.
[Remarque: si vous ne pouvez pas voir les options pour les développeurs, allez à Paramètres> À propos du périphérique> Puis tapez plusieurs fois le numéro de build et vous verrez éventuellement un message disant que vous êtes maintenant développeur ou quelque chose de similaire.]
Connectez votre téléphone à votre ordinateur via USB
Sur votre bureau, ouvrez Chrome Canary (je pense que les versions stable et bêta ont actuellement des problèmes):
Dans la barre d’adresse, tapez: chrome: // flags and enable - "Activer les expériences des outils de développement" et cliquez sur le bouton Relancer qui apparaît.
Une fois qu'il est relancé, ouvrez un terminal et lancez les périphériques adb, vous devriez maintenant voir votre périphérique apparaître dans la liste. Lorsque cela est arrivé, dans Canary, accédez à chrome: // inspecter, vous verrez votre périphérique. Cliquez donc maintenant sur inspecter.
Cela ouvrira devtools pour votre Chrome sur Android.
Maintenant, cliquez sur le rouage dans le coin, puis allez dans Expériences> Activer la redirection de port (si vous ne voyez pas la redirection de port, il est possible que vous ne soyez pas dans Chrome Beta)
Une fois le transfert de port activé, fermez et ouvrez les outils de développement.
Retournez au rouage et sélectionnez Port Forwarding, puis entrez le port que vous souhaitez transférer (par exemple, pour locahost: 9000 sur ma machine locale, je taperais 9000 [Device port] et 127.0.0.1:9000 [Target]
Il y a un bogue ouvert où le premier port est ignoré. Il peut donc être intéressant d'appuyer sur Entrée sur la première ligne et de ressaisir les mêmes détails sur la deuxième ligne.
Vous pouvez maintenant entrer localhost: 9000 (ou votre numéro de port) dans Chrome pour Android et afficher le site et utiliser DevTools pour inspecter la page.
Plus de détails sous la section Reverse Port Forwarding de ce site: https://developers.google.com/chrome-developer-tools/docs/remote-debugging
J'ai un S3 et utilise ce guide de Google:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
Vraiment facile, fonctionne parfaitement.
Suivez principalement le guide ici https://developers.google.com/chrome-developer-tools/docs/remote-debugging . Mais ...
- Pour les appareils Samsung, n'oubliez pas d'installer Samsung Kies.
- Pour moi, cela ne fonctionnait qu'avec Chrome Canary , pas avec Chrome.
- Vous devrez peut-être également installer Android SDK.
Je n'ai pas pu accomplir cela, mais j'ai plutôt utilisé les applications sources HTML disponibles sur le Play Store pour rechercher l'élément.
N'oubliez pas que si vous souhaitez utiliser le chrome inspect sous Windows, outre l'activation du débogage USB sur votre mobile, vous devez également installer le pilote USB pour Windows.
Vous pouvez trouver les pilotes dont vous avez besoin dans la liste ici:
http://androidxda.com/download-samsung-usb-drivers
En outre, vous devez utiliser une version plus récente de Chrome mobile que celle de votre bureau.