Debug safari ipad avec un PC

Je veux tester mon site sur Safari sur mon ipad. J'ai seulement un autre PC. Est-il un moyen pour moi de faire le débogage à distance comme la BAD avec mobile de google Chrome? J'ai cherché sur StackOverflow, semble y avoir une Adobe Edge inspect CC, mais je ne sais pas si c'est un bon choix.

Merci!

InformationsquelleAutor darklord | 2013-12-05

18

Vous pouvez essayer l'option de l'aide de Telerik AppBuilder (client Windows) comme un remplacement sur Windows pour Safari débogueur sur Mac lorsque le débogage à distance. Il y a un joli blog sur les démarches à faire dans le lien ci-dessous. Je préfère ne pas rediffuser les informations comme il y a aussi des captures d'écran et c'est beaucoup de texte. Mais essentiellement, vous installez l'application, ouvrez-le, connectez l'appareil via le port USB, vous pouvez le trouver dans l'application et ouvrir les outils de développement/débogueur pour elle. Pour les non-public des sites web, vous devrez ouvrir le port 80 avec certains pare-feu configs documenté dans le post.

http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder

L'outil nécessite une licence ou vous pouvez utiliser la version d'évaluation, qui devient une édition de base par la suite. Je pense que l'édition de base seront toujours vous permettre de faire le débogage. Je vais l'essayer moi-même.

Vous pouvez aussi essayer ces applications iOS trop, vous pouvez les trouver dans l'App store d'iTunes. Ils vous donnent un construit dans la fonctionnalité outils de développement (à droite sur iOS pas de débogage à distance) que le navigateur Safari mobile n'offre pas.

MIH d'Outil d'édition de base
https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8

HTTPWatch Basic
https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8

Je leur ai donné un essai et ils sont au moins mieux que le navigateur Safari mobile, vous obtenez sur iOS, à moins que l'un des besoins de la cible mobile Safari de compatibilité. Je devine que la pro/payé éditions de ces applications vous donner plus/meilleures fonctionnalités.

2018 mise à Jour:

Depuis le premier post, le blog est mort & Telerik App Builder est interrompu et n'est plus offert. L'ajout de cette mise à jour pour informer les lecteurs dans le cas où ils ne lisent pas les commentaires des utilisateurs qui suivent cette réponse post. Comme pour le blog, pour ceux qui sont encore intéressés, voici un web copie mise en cache. Concernant le blog, je pense que la société que du blog de a depuis fermé.

Quand j'ai une chance, je vais voir si j'ai une copie de l'app builder enregistré, de sorte que je peux mettre en ligne pour ceux qui sont toujours intéressés à l'utiliser, avec une autre copie mise en cache du blog peut-être.
- Avec la dernière version de AppBuilder 2016.04.14.2 et iOS 9.1 je ne peux pas obtenir que cela fonctionne selon le blog. AppBuilder ne pas afficher l'Inspecteur Web plus. Toute personne ayant des problèmes similaires?
- Le telerik option semble avoir besoin d'avoir un compte développeur apple et je n'ai jamais été en mesure d'obtenir mon appareil à connecter. Je ne fais pas de développement apple, j'ai juste besoin d'inspecter et de débogage safari html/css défaut.
- Le blog le lien est mort et Telerik Appbuilder ne sont plus accessibles : docs.telerik.com/platform/appbuilder/discontinuation
- C'est dommage, il était bon outil. Je vais voir si j'ai une copie en cache localement quelque part que je pourrais mettre en place. Mais le meilleur à trouver d'autres solutions maintenant.
- Pour ceux qui pourraient avoir copie de l'ancien Appbuilder, voici la copie mise en cache du tutoriel: webcache.googleusercontent.com/search?q=cache:https://...
- Site de Blog est en panne.
- Le telerik app builder a été retiré
InformationsquelleAutor David
84

Mis à jour et testé sur 24/6/2017

À l'aide de Chrome sur Windows 8 et plus récentes:
- Télécharger et installer Nœud
- Télécharger et installer ITunes, puis connectez-le à votre Appareil. (Un pop-up devrait montre à votre iPad pour obtenir une autorisation d')
  . Assurez-vous de permettre à l'inspecteur web, dans votre iPad
- Télécharger et installer le distance webkit adaptateur
À l'aide de Powershell (en tant Qu'administrateur):

npm install remotedebug-ios-webkit-adapter -g
- Exécuter l'adaptateur:
À l'aide de Powershell (en tant qu'administrateur):

remotedebug_ios_webkit_adapter --port=9000

Vous devriez obtenir un résultat similaire:

C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000 remotedebug-ios-webkit-adapter is listening on port 9000 iosAdapter.getTargets ...
- Ouvrir Chrome et cliquez sur le lien suivant:
chrome://inspecter/#appareils
- Cliquez sur "configurer" à côté de "Découvrir le réseau des cibles" et d'ajouter les éléments suivants:
  localhost:9000
Assurez-vous que la page web que vous souhaitez déboguer ouvrir dans safari, vous devriez le voir sur chrome inspecteur en vertu de l' Cible à Distance

Étape supplémentaire pour iOS 11 Grâce à @skaurus
- Excellent, c'est de loin la solution la plus simple. Vous pouvez également utiliser le construit en DevTools en allant sur ce lien chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1
- J'ai essayé ci-dessus sur Windows 10, avec le Chrome et les Canaries, mais le Navigateur ne trouve pas de périphérique. J'ai téléchargé la dernière version d'iTunes aujourd'hui, exécuté iTunes avec l'admin priv. et de même pour l'ios...proxy.exe. toutes les pensées?
- Est le webkit-debug-proxy montrant une sortie similaire à celle ci-dessus?
- Oui. Il a trouvés et connecté à mon iPad. Le problème peut être en https. J'ai besoin de déboguer avec https pour mon application web. Aucune idée si https est pris en charge? Merci...
- Ici est une erreur qui s'affiche dans les outils de développement: connexion WebSocket à 'ws://localhost:9222/devtools/page/1" a échoué: Erreur lors de WebSocket poignée de main: réponse Inattendue code: 404 WebInspector.chargé @ DevTools.js:3104
- Une note pour ios_webkit_debug_proxy.exe membres: pour des raisons de sécurité, des Url https ne fonctionnera pas; l'utilisation de http ou de force-avec l'URL de la barre d'icône en forme de bouclier. Pas sûr que cela est la raison de mon erreur ci-dessus, puisque je n'ai pas tout icône de bouclier de sécurité de l'erreur. Merci pour votre réponse.
- Ce que l'URL de la barre d'icône en forme de bouclier? Dans chrome, je vois un je dans un cercle d'un côté, et une étoile à l'autre. Dans Safari, je vois ce qui ressemble à un " aligner à gauche de l'icône représentant d'un côté, et l'icône d'actualisation sur l'autre. Où le bouclier de l'être?
- Le schield icône signifie que la page contient des scripts dangereux, si ce n'est pas l'affichage de ne pas s'en soucier.
- Le Firefox/Valence méthode semble être beaucoup plus stable maintenant. Vous pouvez avoir des problèmes à l'aide de la dernière Inspecteur, que je l'ai déjà suggéré, comme les protocoles pour le débogage Chrome et Safari ont commencé à diverger trop - voir github.com/google/ios-webkit-debug-proxy#devtools-note
- Réussi à le faire fonctionner sous Windows 10 avec iOS10. J'avais besoin de télécharger la version x64 de la debugging proxy comme les autres ont jeté des erreurs (Lien Direct: sourceforge.net/projects/ios-webkit-debug-proxy-win32/files/...) Aussi l'URL de la lame fournie ne fonctionne pas pour moi, seule la deuxième URL n'.
- J'ai eu ce pour travailler sur Windows 7 et iOS 10.3.2. @BenShelton commentaire / solution l'ai eu de travail pour moi. Également eu de mise à jour la plus récente de Chrome au moment de la rédaction de la Version 59.0.3071.115 (compilation Officiel) (64-bit). iTunes 12.5.5.5 - pas sûr que les questions
- Ce n'était pas de travail pour moi sur Win 10 + iOS 11, mais j'ai trouvé une solution ici: github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/79
- Si vous êtes derrière une compagnie de proxy il y a une étape supplémentaire est nécessaire. Dans adapter.js et iosAdapter.js changement "demande(ce._url)" à "la demande ({"url": cette._url, 'proxy': "}"
- Cette Réponse est la solution parfaite pour être mis en œuvre, merci pour cette... Mais sur le web à l'inspection, après un certain temps, le panneau Styles stucks et sa ne marche pas me montrer les classes respectives mis en œuvre sur éléments.. quelqu'un d'autre face de la question?
- Confirmant que c'est une solution de travail pour Gagner 10 + iOS 10.
- C'est aussi de travailler pour moi. La seule chose qui n'était pas mentionné que j'avais à faire avant, il a travaillé, était en train de redémarrer mon PC après l'installation de iTunes.
InformationsquelleAutor monkeythedev
32

Voir Lemmy4555 réponse de la façon la plus simple de débogage sur un Windows 8+ machine avec iOS 9+. J'ai mis à jour mon blog en utilisant les informations de cette réponse et d'autres sources et d' enregistré une screenshare. La méthode ci-dessous doivent encore travailler pour iOS 8 et vers le bas, si nécessaire.

Il est en fait une manière assez facile à déboguer un site web dans Safari sur iOS à l'aide de Firefox sur une machine Windows.

REMARQUE: Ryan a écrit dans les commentaires ci-dessous que cela ne fonctionne que sur iOS 8 et vers le bas. Je ne suis pas en mesure de confirmer, mais il faut être conscient.

J'ai écrit un détaillée post de blog à ce sujet, mais voici les faits saillants:
1. Installer iTunes pour obtenir le "Apple Mobile Device Support" et "Apple Application Support" des applications qui vont avec. (désinstaller iTunes après, si vous le souhaitez)
2. Connectez votre appareil iOS via USB.
3. Permettre à l'inspecteur web sur iOS (disponible sur iOS 6 et versions ultérieures).
4. Ouvrez Safari sur votre appareil iOS et accédez à un site web.
5. Ouvrez Firefox sur votre ordinateur Windows et appuyez sur Maj + F8 pour ouvrir WebIDE, qui devrait inclure le nécessaire Jupe add-on, si vous utilisez Firefox Developer Edition (toute version) ou Firefox 37 et plus tard (un canal).
6. Pour une raison quelconque, je n'arrivais pas à connecter mon appareil iOS jusqu'à ce que j'ai téléchargé le ios-webkit-debug-proxy-win32 programme et il a couru. Il ouvre un vide Invite de Commande, mais après, je suis retourné à WebIDE après son ouverture, j'ai déconnecté, puis reconnecté et j'ai vu les informations de débogage pour le site, j'avais ouvert dans Safari. Vous ne pouvez pas besoin de faire ce que, tant qu'un autre utilisateur a juste eu à ajouter une exception à leur pare-feu, puis de se déconnecter/reconnecter, et cela a fonctionné.
Les informations de débogage disponibles n'est pas aussi exhaustive que Chrome Developer Tools (plus précisément pas d'onglet "Réseau"), mais c'était assez pour moi d'être en mesure de voir ce qui se passait dans la Console.
- Pour info, pour le iTunes (pilote/bibliothèque) dépendances, si l'on ne veut pas installer (alors désinstaller) iTunes, vous pouvez utiliser une MSI/EXE de l'extracteur (ou l'équivalent comme WinRAR) pour afficher/extraction du programme d'installation d'iTunes contenu comme un fichier zip, puis ne garder que le pilote/une bibliothèque de fichiers. Ils sont la MSI fichiers avec les noms mentionnés. J'ai toujours détesté l'installation/à l'aide d'iTunes. Les pilotes sont bons pour conserver et de réutiliser jusqu'à ce que vous avez besoin de nouveaux pilotes (pour les nouveaux appareils Apple, nouvelles fonctionnalités, etc.)
- Je n'ai pas eu à installer le ios-webkit-proxy-win32, mais j'ai eu un avertissement du pare-feu lorsque j'ai cliqué pour ouvrir le safari de l'appareil. J'ai fait une exception, mais il n'a toujours pas fonctionné la première fois, mais après je me suis déconnecté et reconnecté il a travaillé beaucoup. Cette solution est de loin la méthode la plus simple que j'ai trouvé après des heures de recherche, vous sir méritent tous les upvotes.
- Conformément à ce fil (github.com/mozilla/valence/issues/199), il semble y avoir quelques problèmes à l'aide de cette méthode avec iOS 9
- J'ai également eu à télécharger ios-webkit-debug-proxy-win32 (dû prendre le ios-webkit-debug-proxy-mingw32 version). Cependant il n'a pas de travail. Puis j'ai cliqué sur "Chrome Desktop" dans le WebIDE et maintenant ça fonctionne!
- Je ne pense pas que cela fonctionne passé iOS 8, comme indiqué ici: developer.mozilla.org/en-US/docs/Tools/Valence. Il ne fonctionne pas pour moi sur iOS 10.
InformationsquelleAutor John Washam
4

Cette question a été plus que 4 ans, mais je pense que ça vaut la peine de mentionner une autre option qui est indépendant de la plateforme, qui semble n'est pas mentionné ci-dessus:

VConsole

C'est un JavaScript que vous pouvez injecter dans votre page(s) qui va écraser tous les natifs de sortie de la console et de la montrer comme une superposition sur le dessus de votre contenu de la page, dans un niveau de détail qui est presque aussi bon que Google Chrome Developer Tools.

Fonctionne bien sur iOS Safari, ainsi que sur d'autres navigateurs mobiles, tant que JavaScript est activé dans le navigateur.

Comment faire pour installer: https://www.npmjs.com/package/vconsole

Vous aurez besoin de MNP outils pour l'installer, mais pas besoin de les utiliser NPM pour construire votre projet. Vous pouvez simplement installer VConsole quelque part dans un dossier distinct, et il suffit de copier-coller vconsole.min.js à partir d'elle.

Une fois que vous l'injectez dans votre page ressemble à ceci:
```
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); //this will initialize it.</script>
```
Est visuellement très attrayant, vous verrez bouton vert en bas à droite de votre page sur votre navigateur mobile/bureau, qui permettra d'ouvrir la console.

Très soigné!

Bien sûr, il ne vous donnent pas la possibilité de sélectionner un élément, voir calculé css etc., mais si vous êtes à la recherche pour la sortie de la console et certains rapport du réseau, celui-ci est vraiment facile à utiliser.
- Fait ma journée! Depuis jsconsole.com qui était à l'arrêt, je cherchais un outil de ce genre! Débogage pour Iphone me donne toujours un moment difficile, mais cet outil est génial. Par le simple ajout de quelques lignes à la page, je reçois enfin utile messages de débogage. Merci 🙂
- Mon plaisir!
- C'est un bijou! La plus simple solution de loin, si vous voulez juste une simple débogage.
InformationsquelleAutor Sinisa
1

- Je utiliser PrePros pour CSS prétraitement et il a construit dans le serveur pour mobile de débogage et de l'inspecteur web. Mais cela n'est bon que pour les sites locaux encore que...

InformationsquelleAutor Ben Racicot
1

Dans mon expérience, il n'est souvent pas un problème avec le navigateur Safari mobile, mais Safari en général. Dans ces cas, il peut aider à essayer la normale Safari (pour Windows) et de voir si les bugs apparaissent. Si oui, il est beaucoup plus facile à déboguer quelque chose de cette manière.
- Essai sur mac peut aider, mais pas sur windows que safari est obsolète et n'est plus maintenu.
- Sur mon iPad2 (iOS 8.3) dans les paramètres avancés de Safari, il dit: "Pour utiliser la WebInspector, connectez-vous à Safari sur votre ordinateur à l'aide d'un câble et d'accéder à votre iPad dans le menu développement. Vous pouvez activer le menu développement dans Safari Préférences Avancées sur votre ordinateur". J'ai pu activer le menu développement sur mon Safari5.1.7 sur Windows8. Cependant, à partir de là je ne sais pas comment faire pour démarrer le débogueur d'une page html affichée dans le Safari de mon iPad.
- Stonecrusher: je ne pense pas que sa le même mode développeur nécessaires pour déboguer à distance sur un iPad.
- safari 5 est la dernière version disponible pour windows. Cette version est complètement dépassée...
InformationsquelleAutor Manuel Arwed Schmidt
0

Je n'ai pas essayé sur un PC, mais vous devriez être en mesure d'aller à l'adresse http://[ADRESSE__IP_PÉRIPHÉRIQUE]:9999 déboguer.
- Je ne peux pas obtenir que cela fonctionne. Pouvez-vous m'indiquer des instructions et de la documentation sur cette question?
- Je trouve qu'il est très difficile de croire que cela va fonctionner. pourquoi port 9999? n'a même pas de sens
- Vous n'avez pas besoin de plus. Vous pouvez utiliser la mise au point de l'élément de menu. C'était le moyen officiel pour ce faire il y a 5 ans.
- Ce menu développement et où?
- Dans Safari, vous devez ouvrir les préférences de Safari, allez dans Avancé, puis basculer sur "Afficher le menu développement dans la barre de menu".
- Je pense que vous parlez d'OSX Safari et pas iOS Safari. Est "Afficher le menu développement dans la barre de menu" disponible sur iPad les préférences de Safari, quelque part? Je ne le trouve pas.
- Autant que je sache, il n'est pas disponible dans Safari iPad.
InformationsquelleAutor Stephen Johnson

Vous devez vous connecter pour publier un commentaire.