débogage à distance iOS

Question

Avec la récente version de Chrome pour iOS, je me demandais comment activer le débogage à distance pour Chrome iOS?

Mise à jour: Avec la version iOS 6, le débogage à distance peut maintenant être effectué avecSafari.

Answer 1

Mise à jour:

Ceci n'est pas la meilleure réponse, veuillez suivre les conseils de gregers '.

Nouvelle réponse:

Utilisez Weinre .

Ancienne réponse:

Vous pouvez maintenant utiliser Safari pour le débogage à distance. Mais cela nécessite iOS 6.

Voici une traduction rapide de http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

1. Connectez votre iDevice via USB à votre Mac
2. Ouvrez Safari sur votre Mac et activez les outils de développement.
3. Sur votre iDevice: accédez à Paramètres> Safari> Avancé et activez l'inspecteur Web.
4. Accédez à n’importe quel site Web avec votre iDevice
5. Sur votre Mac: ouvrez le menu du développeur et choisissez le site à partir de votre iDevice (en haut du menu Safari).

Comme indiqué par réponse de Simons , il faut désactiver la navigation privée pour que le débogage à distance fonctionne.

Paramètres> Safari> Navigation privée> OFF

Answer 2

La réponse sélectionnée est uniquement pour Safari. Pour le moment, il n'est pas possible de faire un débogage à distance réel dans Chrome sur iOS, mais comme avec la plupart des navigateurs mobiles, vous pouvez utiliser WeInRe pour un débogage simple. C'est un peu fastidieux à configurer, mais vous permet d'inspecter le DOM, de voir son style, de le changer et de jouer avec la console.

Installer:

• Installer nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Ouvrez http: // {wifi-ip-address}: 8080/et copiez le code de script cible.
• Collez la balise de script dans votre page (ou utilisez le bookmarklet)
• Cliquez sur le lien vers l'interface utilisateur du client de débogage (http: // {wifi-ip-address}: 8080/client/# anonyme).
• Lorsque vous obtenez une ligne verte sous Clients, le navigateur est connecté.

Le bookmarklet est un peu plus compliqué à installer. C'est plus facile si vous avez activé la synchronisation des favoris pour les ordinateurs de bureau et mobiles Chrome. Copiez l'URL du bookmarklet à partir du serveur Weinre local (comme ci-dessus). Malheureusement, cela ne fonctionne pas car il n'est pas correctement encodé dans les URL. Alors ouvrez la console JavaScript et tapez:

copy(encodeURI('')); // paste bookmarklet inside quotes

Vous devriez maintenant avoir le bookmarklet encodé en URL dans votre presse-papiers. Collez-le dans un nouveau signet sous Signets mobiles. Appelez-le weinre ou quelque chose de simple à taper. Il devrait être synchronisé sur votre mobile assez rapidement, alors chargez la page que vous souhaitez inspecter. Puis tapez le nom du signet dans la barre d'URL, et vous devriez voir le bookmarklet comme une suggestion de complétion automatique. Cliquez dessus pour exécuter le code bookmarklet :)

Answer 3

Vous ne pouvez pas déboguer Chrome à distance directement sur iOS pour le moment. Il utilise un uiWebView qui peut être légèrement différent de Mobile Safari.

Vous avez quelques options.

Option 1: Débogage à distance de Safari mobile à l'aide de l'inspecteur de Safari. Si votre problème se reproduit dans Mobile Safari, c'est définitivement la meilleure solution. En fait, passer par le simulateur iOS est encore plus facile.

Option 2: Utilisez Weinre pour une expérience de débogage allégée . Weinre n'a pas beaucoup de fonctionnalités mais parfois c'est assez bon.

Option 3: Déboguer à distance un bon uiWebView qui fonctionne de la même manière.

Voici le meilleur moyen de le faire. Vous aurez besoin de installer XCode .

1. Allez à github.com/paulirish/iOS-WebView-App et "Download Zip" ou clonez. 
2. Ouvrez XCode, ouvrez un projet existant et choisissez le projet que vous venez de télécharger.
3. Ouvrez WebViewAppDelegate.m et remplacez la variable urlString par l'URL que vous souhaitez tester.
4. Exécutez l'application dans le simulateur iOS.
5. Ouvrez Safari, ouvrez le menu développement, choisissez simulateur iOS et sélectionnez votre vue Web.
6. Safari Inspector va maintenant inspecter votre uiWebView.

Answer 4

A ma connaissance, Google Chrome utilise UIWebView de l'iOS plutôt qu'une implémentation complète de Chrome comme son homologue Android. 

Answer 5

De nombreuses consoles distantes fonctionnent bien. http://farjs.com est mon projet et j'ai pu déboguer avec succès les problèmes spécifiques à Crome iOS et ne se produisant pas dans Safari. (et probablement tous les autres navigateurs mobiles)

Le problème est que l’injection du code de débogage est légèrement délicate car Chrome ne vous permet pas d’installer des bookmarklets. 

Au lieu de cela, vous pouvez ouvrir un onglet de la page que vous souhaitez déboguer et un autre sur farjs.com, puis cliquez sur "le bookmarklet".

Copiez le code JS du bookmarklet, revenez au premier onglet, avec la page à déboguer, puis collez le code du bookmarklet dans la barre d’emplacement.

La dernière étape consiste à faire défiler la barre d’emplacement jusqu’au début et à ajouter «javascript:», car Chrome le supprimera. 

Answer 6

Je recommande Vorlon , fonctionne comme weinre. J'aime l’UI de Vorlon et son support SSL , mon application est en HTTPS, j’ai essayé avec ngrok, ghostlab et vorlon, seul le vorlon fonctionne bien.

Answer 7

Je ne l'ai pas essayé, mais Le proxy de débogage WebKit iOS ((ios_webkit_debug_proxy/iwdp) est censé vous permettre de déboguer à distance UIWebView. À partir du fichier README.md

Le ios_webkit_debug_proxy (alias iwdp) permet aux développeurs d’inspecter MobileSafari et UIWebViews sur réel et des appareils iOS simulés via l'interface utilisateur de Chrome DevTools et le protocole de débogage à distance de Chrome. Outils de développement les demandes sont traduites dans le service Remote Web Inspector d’Apple appels.

Answer 8

La «navigation privée» doit également être désactivée.

Paramètres> Safari> Navigation privée> OFF

Answer 9

Vorlon.JS est idéal pour le débogage à distance d’iOS ou de tout autre client.

1. Il suffit de l'installer globalement en utilisant npm i -g vorlon
2. Démarrer le serveur en utilisant vorlon
3. Avec le serveur en marche, ouvrez http: // localhost: 1337 dans votre navigateur pour voir le tableau de bord Vorlon.JS
4. La dernière étape consiste à activer Vorlon.JS en ajoutant cette balise de script à votre application:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Tous les clients connectés, par exemple iPhone, Android deviendront disponibles dans la liste des clients sur le tableau de bord Vorlon.JS  

Notez que cette approche peut également être utilisée pour déboguer des applications ne s'exécutant pas sur localhost à l'aide de ngrok. Voir https://stackoverflow.com/a/45443203/2073920 pour plus de détails

Références

http://vorlonjs.com

https://ngrok.com

Avertissement

Je ne suis qu'un utilisateur et je ne suis pas affilié à Vorlon.JS et ngrok

Answer 10

Adobe Edge Inspect ( https://creative.Adobe.com/products/inspect ) est un autre moyen de déboguer tous vos périphériques mobiles IOS et Android (pas de Windows Phone cependant). Il utilise weinre pour l'inspection/modification DOM à distance. Ce n'est pas la plus rapide des méthodes, mais cela fonctionne sous Windows. 

Answer 11

Remarque: je n'ai aucune affiliation avec les créateurs de Ghostlab, Vanamco.

Il était important pour moi de pouvoir déboguer des problèmes spécifiques à Chrome. Je me suis donc mis à la recherche de solutions pouvant aider à résoudre ce problème. J'ai fini par jeter mon argent sur Ghostlab 3 . Je peux tester les navigateurs mobiles Chrome et Safari comme si je les visualisais sur mon ordinateur. Cela me donne simplement une adresse LAN à utiliser pour tout périphérique que je souhaite déboguer. Chaque application utilisant cette adresse apparaîtra dans la liste de Ghostlab.

 

 

Hautement recommandé.

Answer 12

Il y a un bogue ouvert sur Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Malheureusement, pour cela, Apple doit ouvrir une API dans WKView, après quoi le débogage peut-être sera disponible à partir de Safari.

Answer 13

J'utilise remotedebug-ios-webkit-adapter, .__ fonctionne bien pour moi avec IOS et le débogueur ouverts dans Chrome sous Windows 10.

Sera heureux si cela aide quelqu'un Lien

Answer 14

Même moi, je recherche la même fonctionnalité et, à ce jour, elle n’a pas encore été mise en œuvre. Je peux penser à deux options cependant, 

1. J'ai remarqué que les comportements de Chrome et de Safari sont assez identiques. Chrome prend même en charge le Gyroscope et d’autres événements connexes pris en charge par Safari. Je suis en train de déboguer mon application Web en activant la console de débogage sur Safari (Via Paramètres-> Safari)

2. Essayez également Adobe Shadow, qui permet le débogage/inspection à distance et la synchronisation.

HTH.