Déboguer ipad safari avec un pc
Je veux tester mon site Web sur Safari sur mon iPad. Je n'ai qu'un autre PC. Puis-je effectuer un débogage à distance comme ADB avec Chrome mobile? J'ai cherché sur StackOverflow, il semble y avoir un Adobe Edge Inspect CC, mais je ne sais pas s'il s'agit d'un bon choix.
Merci!
Vous pouvez essayer d’utiliser Telerik AppBuilder (client Windows) en remplacement du débogueur Windows pour Safari sur Mac lors du débogage à distance. Il y a un article de blog Nice sur les étapes à suivre dans le lien ci-dessous. Je préfère ne pas republier l'info car il y a aussi des captures d'écran et c'est beaucoup de texte. Mais essentiellement, vous installez l’application, l’ouvrez, connectez le périphérique via USB, puis vous la retrouvez dans l’application et ouvrez les outils de développement/le débogueur. Pour les sites Web non publics, vous devez ouvrir le port 80 avec certaines configurations de pare-feu décrites dans le message.
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 vous permettra toujours de faire le débogage. Je vais l'essayer moi-même.
Vous pouvez également essayer ces applications iOS, vous pouvez les trouver dans l'iTunes App store. Ils vous offrent une fonctionnalité intégrée d'outils de développement (directement sur iOS, pas de débogage distant) que Safari mobile n'offre pas.
MIH Tool - é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 les ai essayés et elles sont au moins meilleures que le Safari mobile que vous obtenez sur iOS, sauf si vous devez cibler la compatibilité totale de Safari mobile. J'imagine que les éditions pro/payantes de ces applications vous offrent davantage/de meilleures fonctionnalités.
Mise à jour 2018:
Depuis le message original, le blog est mort & Telerik App Builder est abandonné et n'est plus offert. Ajouter cette mise à jour pour informer les lecteurs s’ils ne lisent pas les commentaires des utilisateurs qui suivent cette réponse. Pour ce qui est du blog, pour ceux qui sont toujours intéressés, voici un copie en cache Web . En ce qui concerne le blog, je pense que la société à partir de laquelle le blog a été créé a depuis fermé.
Lorsque j'en aurai l'occasion, je vérifierai si une copie du constructeur de l'application est enregistrée afin de pouvoir la publier en ligne pour ceux qui sont toujours intéressés par son utilisation, ainsi qu'une autre copie en cache de l'article du blog.
Mis à jour et testé le 24/06/2017
Utilisation de Chrome sur Windows 8 et plus récent :
- Téléchargez et installez Node
Téléchargez et installez iTunes et connectez-le à votre appareil. (Un pop-up devrait montrer à votre iPad pour obtenir une autorisation). Veillez à autoriser Web Inspector sur votre iPad.
Téléchargez et installez le adaptateur webkit distant
Utiliser Powershell (en tant qu'administrateur):
npm install remotedebug-ios-webkit-adapter -g
- Exécutez l'adaptateur:
Utiliser Powershell (en tant qu'administrateur):
remotedebug_ios_webkit_adapter --port=9000
Vous devriez obtenir une sortie similaire:
C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000 remotedebug-ios-webkit-adapter is listening on port 9000 iosAdapter.getTargets ...
- Ouvrez Chrome et cliquez sur le lien suivant:
chrome: // inspect/# devices
- Cliquez sur Configurer à côté de "Découvrir les cibles réseau" et ajoutez ce qui suit: localhost: 9000
Assurez-vous que la page Web que vous souhaitez utiliser pour le débogage sur Safari doit être visible sur chrome de l'inspecteur sous Cible distante
Étape supplémentaire pour iOS 11 Merci à @skaurus
Voir réponse de Lemmy4555 pour le moyen le plus simple de déboguer sur une machine Windows 8+ avec iOS 9+. J'ai mis à jour mon billet de blog en utilisant les informations de cette réponse et d'autres sources et aussi enregistré un partage d'écran . La méthode ci-dessous devrait toujours fonctionner pour iOS 8 et versions ultérieures, si nécessaire.
Il existe en fait un moyen très simple de déboguer un site Web dans Safari sur iOS en utilisant Firefox sur une machine Windows.
NOTE: Ryan a écrit dans les commentaires ci-dessous que cela ne fonctionne que sur iOS 8 et versions ultérieures. Je suis incapable de confirmer, mais soyez conscient.
J'ai écrit un article de blog détaillé à ce sujet, mais voici les points saillants:
- Installez iTunes pour obtenir les applications "Apple Mobile Device Support" et "Apple Application Support" fournies. (désinstaller iTunes après, si vous voulez)
- Connectez votre appareil iOS via USB.
- Activer l'inspecteur Web sur iOS (disponible sur iOS 6 et versions ultérieures).
- Ouvrez Safari sur votre appareil iOS et accédez à un site Web.
- Ouvrez Firefox sur votre machine Windows et appuyez sur Maj + F8 pour ouvrir WebIDE, qui devrait inclure le complément Valance nécessaire, si vous utilisez Firefox Developer Edition (toute version ) ou Firefox 37 et versions ultérieures (n’importe quel canal).
- Pour une raison quelconque, je ne pouvais pas le faire se connecter à mon appareil iOS avant d'avoir téléchargé le programme ios-webkit-debug-proxy-win32 et de l'exécuter. Il ouvre une invite de commande vierge, mais après être retourné à WebIDE après l'avoir ouvert, je me suis déconnecté, puis reconnecté, et j'ai vu les informations de débogage du site Web que j'avais ouvert dans Safari. Vous n’avez peut-être pas besoin de le faire, car un autre utilisateur doit simplement ajouter une exception à son pare-feu, puis se déconnecter/se reconnecter, et cela a fonctionné.
Les informations de débogage disponibles ne sont pas aussi exhaustives que Chrome Outils de développement (en particulier, aucun onglet "Réseau")), mais cela me suffisait pour pouvoir visualiser ce qui se passait dans la console.
Cette question remonte à plus de 4 ans, mais j'estime qu'il est utile de mentionner une autre option indépendante de la plate-forme, qui semble ne pas être mentionnée ci-dessus:
VConsole
C’est un code JavaScript que vous pouvez injecter dans vos pages et qui écrasera toutes les sorties de la console native et les affichera en surimpression au-dessus du contenu de votre page, avec un niveau de détail presque aussi bien que les outils de développement de Google Chrome.
Fonctionne bien sur iOS Safari, ainsi que sur d'autres navigateurs mobiles - tant que JavaScript est activé dans le navigateur.
Comment installer: https://www.npmjs.com/package/vconsole
Vous aurez besoin des outils NPM pour l’installer, mais vous n’aurez pas besoin d’utiliser NPM pour construire votre projet. Vous pouvez simplement installer VConsole quelque part dans un dossier séparé et simplement copier-coller de vconsole.min.js.
Une fois que vous l'injectez dans votre page, cela ressemblera à ceci:
<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>
Visuellement est très attrayant, vous verrez un bouton vert dans le coin inférieur droit de votre page sur votre navigateur mobile/de bureau, ce qui ouvrira la superposition de la console.
Très propre!
Bien sûr, cela ne vous donne pas la possibilité de sélectionner un élément, voir css calculé, etc., mais si vous recherchez une sortie de console et un rapport de réseau, celui-ci est vraiment facile à utiliser.
J'utilise PrePros pour le prétraitement CSS et il possède un serveur intégré pour le débogage mobile et un inspecteur Web. Mais cela n’est bon que pour les sites locaux, même quand même ...
D'après mon expérience, ce n'est souvent pas un problème avec Safari mobile, mais plutôt avec Safari en général. Dans ces cas, il peut être utile d'essayer le Safari normal (pour Windows) et de voir si les bogues y apparaissent. Si c'est le cas, il est beaucoup plus facile de déboguer quelque chose de cette façon.
Je n'ai pas essayé cela sur un PC, mais vous devriez pouvoir accéder à http: // [DEVICE_IP_ADDRESS]: 9999 pour déboguer.