209 votes

Débogage distant

Avec la sortie récente de Chrome pour iOS, je me demandais comment vous activer le débogage distant pour Chrome iOS ?

Mise à jour : Avec la sortie de l’iOS 6, débogage distant peut maintenant être fait avec Safari.

233voto

gregers Points 2997

La réponse sélectionnée est seulement pour Safari. Pour le moment, il n'est pas possible de faire du vrai débogage à distance dans google Chrome sur iOS, mais comme avec la plupart des navigateurs mobiles, vous pouvez utiliser WeInRe pour une simple débogage. C'est un peu de travail à mettre en place, mais vous permet d'inspecter les DOM, voir de style, changement de DOM et de jouer avec la console.

enter image description here

Pour l'installation:

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

Le bookmarklet est un peu plus compliqué à installer. Il est plus facile si vous avez un signet-sync activée pour les mobiles et de bureau Chrome. Copiez le bookmarklet url à partir de la locale weinre serveur (le même que ci-dessus). Malheureusement, cela ne fonctionne pas car il n'est pas d'url-encodé correctement. Donc, ouvrez la console et tapez:

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

Vous devriez maintenant avoir l'url-encodé bookmarklet dans votre presse-papiers. La coller dans un nouveau signet Mobile Signets. Appeler weinre ou quelque chose de simple à taper. Il devrait être synchronisés sur votre mobile assez vite, donc charger la page que vous souhaitez examiner. Ensuite, saisissez le nom du signet dans la barre d'url, et vous devriez voir le bookmarklet comme auto-complete-suggestion. Cliquez dessus pour l'exécuter bookmarklet code :)

enter image description here

116voto

Flek Points 3312

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

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

  1. Connectez votre iDevice via le port USB avec votre Mac
  2. Ouvrez Safari sur votre Mac et d'activer les outils de dev
  3. Sur votre iDevice: accédez à réglages > safari > avancé et activer l'inspecteur web
  4. Aller à n'importe quel site web avec votre iDevice
  5. Sur votre Mac: Ouvrez le menu développeur et a choisi le site à partir de votre iDevice (son au top Menu Safari)

Comme l'a souligné Simons répondre à un besoin de désactiver la navigation privée pour faire le débogage distant de travail.

Réglages > Safari > Navigation Privée >

52voto

Paul Irish Points 17507

Vous ne pouvez pas directement de débogage à distance google Chrome sur iOS actuellement. Il utilise une uiWebView qui peuvent agir subtilement différent de Mobile Safari.

Vous avez quelques options.

Option 1: Distance de débogage Mobile Safari à l'aide de Safari de l'inspecteur. Si le problème se reproduit dans le navigateur Safari Mobile, c'est certainement la meilleure façon d'aller. En fait, en passant par le simulateur iOS est encore plus facile.

Option 2: Utiliser Weinre pour dégraisser l'expérience de débogage. Weinre n'a pas beaucoup de fonctionnalités, mais parfois c'est assez bon.

Option 3: de débogage à Distance un bon uiWebView qui fonctionne de la même manière.

Voici la meilleure façon de le faire. Vous aurez besoin d' installer XCode.

  1. Aller à github.com/paulirish/iOS-WebView-App et "Download Zip" ou clone.
  2. Ouvrez XCode, ouvrir un projet existant, et choisissez le projet que vous venez de télécharger.
  3. Ouvrir WebViewAppDelegate.m et modifier l' urlString à l'URL que vous souhaitez tester.
  4. Exécuter l'application dans le Simulateur iOS.
  5. Ouvrez Safari, Ouvrez le Développer Menu, Choisissez Simulateur iOS et sélectionnez votre webview.
  6. Safari Inspecteur va maintenant être de l'inspection de la uiWebView.

enter image description here

enter image description here

enter image description here

11voto

Stephan Leroux Points 351

De ma compréhension, Google Chrome utilise l’iOS UIWebView plutôt qu’une implémentation complète soufflée de Chrome comme la contrepartie d’Android.

3voto

BlueStory Points 11

De nombreuses consoles à distance, beau travail. http://farjs.com est mon projet, et j'ai pu réussir à déboguer les problèmes spécifiques à Crome iOS et pas qui se passe dans safari de l'utiliser. (et probablement tous les autres navigateurs mobiles)

Le problème est que l'injection du débogage de code est un peu difficile étant donné que Chrome ne permet pas d'installer des favoris.

Au lieu de cela, vous pourriez ouvrir un onglet sur la page de débogage, et un autre sur farjs.com puis cliquez sur "bookmarklet"

Copiez le bookmarklet code JS, revenir à la première page, la page qui doit être débogué et collez le bookmarklet de code dans la barre d'adresse.

La dernière étape est de faire défiler vers le début de la barre de localisation et d'ajouter "javascript:", depuis google Chrome retirer.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X