Share
La création et le débogage de sites Web et d'applications Web pour appareils mobiles peuvent être compliqués. Sur le bureau, nous avons de puissants outils de débogage; la plupart des navigateurs ont un inspecteur Web. Mais nous n’avons pas ces outils pour des appareils comme l’iPhone et l’iPad… jusqu’à maintenant!
Avec les récentes versions de Safari 6 et iOS 6, vous pouvez désormais utiliser Web Inspector pour créer et déboguer des sites Web sur le bureau et sur Safari mobile. Le meilleur de tous? C'est un processus simple à configurer. Suivez ce tutoriel et vous aurez en un rien de temps de puissants outils de débogage pour les iDevices mobiles..
Les outils de développement de navigateur modernes ont été d’une aide précieuse pour la création de sites Web et d’applications Web. Chrome a des outils de développement. Firefox? Pyromane. Safari? Inspecteur Web. Tous les outils extrêmement puissants en développement web.
Quoi qu’il en soit, jusqu’à présent, le débogage de sites Web et d’applications Web sur des appareils mobiles était une tâche ardue. Safari et Chrome étant tous deux exécutés sur le moteur Webkit, le rendu de la présentation Web par le navigateur pour ordinateur de bureau et mobile présente de nombreuses similitudes. Ainsi, la plupart des concepteurs / développeurs construisent et modifient leurs sites Web sur le bureau à l'aide de l'un de ces navigateurs, en supposant que les similitudes résultant du moteur de kit Web rendent la page identique sur un appareil mobile..
Cependant, les plates-formes mobiles et de bureau sont en réalité assez différentes. Ils ont des capacités de mémoire, un potentiel de performance, des périphériques d'entrée et une connectivité réseau différents. Il est donc devenu impératif que les outils de débogage d'un concepteur pour les appareils mobiles deviennent plus performants et correspondent à ceux de leurs homologues de bureau..
Les nouvelles versions logicielles d'Apple pour iOS 6 et Safari 6 apportent bon nombre des fonctionnalités des outils de débogage de navigateur pour ordinateur de bureau que nous connaissons et aimons tous sur les appareils mobiles. Ce didacticiel vous montrera comment configurer facilement le débogage de sites Web mobiles à l'aide de l'inspecteur Web de Safari..
Avant de commencer, une note sur la compatibilité: Il y a un peu de mauvaises nouvelles pour ceux qui utilisent Windows. Vous ne pouvez déboguer qu'à l'aide de l'inspecteur Web distant sur un Mac. Safari 6 pour Windows n'est pas disponible. De plus, Safari 6 n'est disponible que sur les Mac fonctionnant sous OSX Lion ou supérieur..
Il existe deux méthodes pour utiliser Web Inspector dans Safari mobile:
Nous allons couvrir ces deux méthodes et vous laisser choisir celle qui convient le mieux à votre situation..
Le débogage de périphériques mobiles avec Web Inspector étant une nouvelle fonctionnalité, vous devez vous assurer que vous disposez des derniers logiciels..
Méthode de périphérique réel: Pour utiliser Web Inspector en tandem avec un véritable iDevice, vous avez besoin des éléments suivants:
Méthode de périphérique virtuel: Pour utiliser Web Inspector en tandem avec le simulateur iOS, vous devez disposer des éléments suivants:
Vérification des versions du logiciel: Pour vérifier si vous utilisez iOS 6 sur votre iDevice, accédez à "Paramètres> Général> À propos de" sur votre appareil..
Pour vérifier si vous utilisez Safari 6, allez dans la barre de menu de Safari et cliquez sur "Safari> À propos de Safari".
Pour vous assurer que vous utilisez Lion, cliquez sur le logo Apple dans la barre de menu, puis choisissez "À propos de ce Mac".
Pour vous assurer que vous utilisez la bonne version de Xcode, ouvrez Xcode et choisissez "Xcode> À propos de Xcode".
Vous devez activer les outils de développement et l'inspecteur Web dans les versions pour ordinateur de bureau et mobile de Safari..
Méthode de périphérique réel: Si vous utilisez un appareil réel, connectez-le à votre mac via USB.
Méthode de périphérique virtuel: Si vous envisagez d'utiliser le simulateur iOS, ouvrez Xcode, puis cliquez avec le bouton droit de la souris sur l'icône du dock et choisissez "Ouvrir l'outil de développement> Simulateur iOS"..
Safari mobile: Sur votre véritable iDevice ou dans votre simulateur iOS, accédez à "Paramètres> Safari> Avancé" et activez "Inspecteur Web"..
Desktop Safari: Si vous ne le faites pas déjà, assurez-vous que les outils de développement de Safari sont activés. Vous saurez que vous les avez activés si vous pouvez voir "Développer" dans la barre de menus.
Si vous ne voyez pas "Développer" dans la barre de menus, accédez à la barre de menus, cliquez sur "Safari> Préférences> Avancées" et cochez la case "Afficher le menu de développement dans la barre de menus"..
Maintenant que vous avez soit iOS Simulator ouvert ou votre iDevice connecté à votre mac via USB (ou les deux!), Vous êtes prêt à commencer à utiliser Web Inspector sur votre site Web..
Sur votre Mac, ouvrez Safari et allez dans "Développer". Vous devriez maintenant voir tous les iDevices (virtuels ou réels) que vous avez connectés et qui fonctionnent avec votre mac. Dans la capture d'écran ci-dessous, vous verrez que j'ai deux appareils dans le menu: l'un est le simulateur iOS, l'autre est un véritable iPhone connecté à mon mac..
Pour pouvoir commencer à inspecter un site Web, vous devez avoir Safari mobile lancé sur l'appareil et ouvrir l'un des onglets vers le site Web. Si Safari mobile n'est pas ouvert, un message indiquant "Aucune application contrôlable" s'affiche..
Pour commencer l'inspection, entrez simplement l'URL de la page que vous souhaitez inspecter dans Safari mobile, puis choisissez ce site dans le menu "Développement". Vous pouvez commencer à inspecter des sites sur votre véritable iDevice ou à partir d'un simulateur iOS. Lorsque vous sélectionnez la page, vous verrez une superposition bleue sur la page, indiquant lequel vous avez sélectionné.
En choisissant un site, l'inspecteur Web de Safari s'ouvrira et vous permettra de commencer à inspecter votre site Web. C'est tout!
Maintenant que vous avez l'inspecteur Web de Safari à portée de main, vous avez beaucoup plus de contrôle sur la création et le débogage de sites Web et d'applications Web..
Voici un exemple de ce que vous pouvez maintenant faire lors du débogage de sites mobiles:
Vous avez les outils, allez de l'avant et construisez!
Accentsconagua