Débogage à distance iOS

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 sortie d'iOS 6, le débogage à distance peut désormais être effectué avec Safari .

Mettre à jour:

Ce n'est plus la meilleure réponse, veuillez suivre les conseils de Greger .

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 avec votre Mac
2. Ouvrez Safari sur votre Mac et activez les outils de développement
3. Sur votre iDevice: allez dans 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 développeur et choisissez le site dans votre iDevice (son en haut du menu Safari)

Comme l'a souligné Simons, il faut désactiver la navigation privée pour que le débogage à distance fonctionne.

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

La réponse sélectionnée est uniquement pour Safari. Pour le moment, il n'est pas possible de faire un véritable débogage à distance 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 difficile à configurer, mais vous permet d'inspecter le DOM, de voir le style, de changer de DOM 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 simple si la synchronisation des signets est activée pour Chrome pour ordinateur de bureau et pour mobile. Copiez l'url du bookmarklet depuis le serveur weinre local (comme ci-dessus). Malheureusement, cela ne fonctionne pas car il n'est pas correctement encodé en 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é assez rapidement sur votre mobile, alors chargez la page que vous souhaitez inspecter. Tapez ensuite le nom du signet dans la barre d'URL et vous devriez voir le bookmarklet comme une suggestion de saisie semi-automatique. Cliquez dessus pour exécuter le code du bookmarklet :)

Vous ne pouvez pas actuellement déboguer directement à distance Chrome sur iOS. Il utilise un uiWebView qui peut agir subtilement différemment de Mobile Safari.

Vous avez quelques options.

Option 1: Débogage à distance de Mobile Safari à l'aide de l'inspecteur de Safari. Si votre problème se reproduit dans Mobile Safari, c'est certainement la meilleure façon de procéder. 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 une uiWebView appropriée qui fonctionne de la même manière.

Voici la meilleure façon de procéder. Vous devrez installer XCode .

1. Accédez à github.com/paulirish/iOS-WebView-App et "Télécharger 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 modifiez l' urlStringURL que vous souhaitez tester.
4. Exécutez l'application dans le simulateur iOS.
5. Ouvrez Safari, ouvrez le menu Développement , choisissez iOS Simulator et sélectionnez votre vue Web.
6. Safari Inspector va maintenant inspecter votre uiWebView.

D'après ma compréhension, Google Chrome utilise l'UIWebView d'iOS plutôt qu'une implémentation complète de Chrome comme son homologue Android.

De nombreuses consoles distantes fonctionnent bien. http://farjs.com est mon projet, et j'ai réussi à déboguer des problèmes spécifiques à Crome iOS et ne se produisant pas en safari en l'utilisant. (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 sur la page que vous souhaitez déboguer et un autre sur farjs.com, puis cliquer sur "le bookmarklet"

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

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

Je recommande Vorlon , fonctionne comme weinre. J'aime l'interface utilisateur de Vorlon et elle prend en charge SSL , mon application est en HTTPS, j'ai essayé weinre avec ngrok, ghostlab et vorlon, seul le vorlon fonctionne bien.

Je ne l'ai pas essayé, mais le proxy de débogage iOS WebKit (ios_webkit_debug_proxy / iwdp) vous permet soi-disant de déboguer à distance UIWebView. Depuis le README.md

Ios_webkit_debug_proxy (alias iwdp) permet aux développeurs d'inspecter MobileSafari et UIWebViews sur des appareils iOS réels et simulés via l'interface utilisateur Chrome DevTools et le protocole de débogage à distance Chrome. Les demandes DevTools sont traduites en appels de service Remote Web Inspector d'Apple.

Vorlon.JS peut être utilisé 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. Lorsque le serveur est en cours d'exécution, ouvrez http: // localhost: 1337 dans votre navigateur pour afficher 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 qui ne s'exécutent pas sur localhost à l'aide de ngrok . Voir https://stackoverflow.com/a/45443203/2073920 pour plus de détails.

Avertissement

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

Vous devez également désactiver la «navigation privée».

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

Même moi, je recherche la même fonctionnalité, et à ce jour, elle n'a pas encore été implémentée. Je peux penser à deux options cependant,

1. J'ai remarqué que le comportement de Chrome et de Safari est assez identique; Chrome prend même en charge le Gyroscope et d'autres événements connexes pris en charge par Safari. Je débogue actuellement 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.

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) est une autre façon de déboguer tous vos appareils mobiles IOS et Android (pas de Windows Phone cependant). Il utilise weinre pour l'inspection / le changement de DOM à distance. Ce n'est pas la méthode la plus rapide, mais elle fonctionne sous Windows.

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

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

J'utilise l'adaptateur remotedebug-ios-webkit, fonctionne bien pour moi avec IOS et le débogueur ouvert dans Chrome sur Windows 10.

Sera heureux si cela aide quelqu'un Lien

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, alors j'ai décidé de trouver quelque chose qui pourrait m'aider. J'ai fini par jeter mon argent avec joie sur Ghostlab 3 . Je peux tester les navigateurs mobiles Chrome et Safari comme si je les consultais sur mon bureau. Cela me donne juste une adresse LAN à utiliser pour n'importe quel appareil que je voudrais déboguer. Chaque application utilisant cette adresse apparaîtra dans la liste dans Ghostlab.

Hautement recommandé.

Ouvrez Safari Desktop iOS

Développer -> Mode de conception réactif

Cliquez sur "Autre" sous l'appareil

Collez ceci: Mozilla / 5.0 (iPad; CPU OS 10_2_1 comme Mac OS X) AppleWebKit / 602.1.50 (KHTML, comme Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Utilisez les outils d'inspection de Safari.

Avertissement: je travaille chez BrowserStack. ^{[Confirmé] que si je suis autorisé à publier ceci ( Puis-je suggérer un produit de la société sur lequel je travaille? )}

Debug Safari sur iOS (pas pour Chrome à partir de maintenant, lisez à l'avance pour plus de détails.)

Comment ça marche?

• Vous devez démarrer une session sur n'importe quel appareil réel (il y a des émulateurs mais vous devez démarrer une session sur un appareil réel) sur BrowserStack, par exemple iPhone 6S - Safari / Chrome (pas encore de devtools pour Chrome, mais c'est sur notre feuille de route)
• Tapez l'URL
• Vous pouvez déclencher DevTools pour inspecter la page Web ouverte sur le périphérique distant BrowserStacks. J'ai partagé les écrans pour les mêmes ci-dessous.

Utilisation de DevTools avec de vrais téléphones

Passez la souris sur les éléments, modifiez HTML, CSS comme le font les devtools du navigateur de bureau.

Exécuter JavaScript dans un vrai téléphone à l'aide de DevTools

Basculez vers l' Consoleonglet, exécutez le code JavaScript, vérifiez la console.log()sortie, etc.

Onglet Réseau, vérifiez les en-têtes de demande, la réponse, etc.

Prise en charge de DevTools sur BrowserStack?

• Les DevTools sont disponibles sur:

  • Appareils réels - iOS - Safari (DevTools pour iOS Chrome est sur notre feuille de route)
  • Appareils réels - Android - Chrome (seul Chrome est disponible sur les appareils Android pour l'instant)

• Le navigateur client doit être Chrome ou Firefox. Cela signifie que vous devez utiliser le navigateur Chrome ou Firefox sur MacOSX ou Windows pour utiliser BrowserStack Real Device DevTools.

Remarque: vous devez acheter un plan pour tester sur tous les appareils réels, en tant qu'utilisateur gratuit, vous obtiendrez quelques appareils Real Android (comprend les tablettes) et quelques appareils Real iOS (comprend les tablettes). Aussi, en insistant sur le mot Real Devices car ils fournissent également des émulateurs.

Plus de détails à ce sujet, veuillez vous référer à la section DevTools sur la page des fonctionnalités mobiles .