Supposons que vous visitiez un site Web sur lequel vous avez travaillé et que vous rencontriez des problèmes. Vous devez afficher la source de la page sur iPhone ou iPad pour trouver le code bogué et le corriger. Vous ouvrez Safari et devenez fou pour trouver le bouton d’affichage du code source HTML sur Safari en vain. Que faites-vous maintenant? C’est facile, il suffit de lire cet article !
Chaque développeur de site Web, programmeur, concepteur de logiciel, développeur d’application App Store, créateur de contenu et webmaster sait à quel point le code source est crucial. Dans cette partie du travail, vous devez toujours consulter le code source d’une page Web pour corriger les problèmes, déboguer, concevoir et ajouter de la valeur au site Web.
Bien que cette tâche soit assez facile sur les appareils Android et Windows , c’est tout aussi difficile sur les appareils Apple comme l’iPhone, l’iPad, le MacBook et l’iMac. Cependant, sur macOS, la fonctionnalité est disponible mais masquée et vous pouvez la trouver en suivant cet article”Afficher le code source HTML dans Safari”. Cependant, pour les appareils iOS, c’est une autre histoire.
Apple a rendu la visualisation des sources de page absolument difficile sur iPad/iPhone. Il n’y a pas de méthodes natives, ou devrais-je dire, faciles que vous pouvez appuyer ou toucher pour obtenir le code source HTML des pages Web. Mais ne soyez pas encore trop fou. Au lieu de cela, lisez cet article jusqu’à la fin pour trouver les meilleures façons d’apprendre à afficher la source de la page sur Safari sur iPhone ou iPad.
Raisons pour lesquelles vous devez afficher la source de la page sur iPhone/iPad
Vous trouverez ci-dessous quelques situations et raisons pour afficher les sources de page sur Safari sur iPad/iPhone :
Vous devez afficher la source de page d’une page Web pour un appareil spécifique comme l’iPhone ou l’iPad. Si vous accédez au site Web sur Mac et affichez le code source HTML, vous verrez les éléments de la version de bureau, pas les versions iPhone ou iPad. Vous voyagez et souhaitez investir votre temps dans l’examen des codes de pages Web pour obtenir de nouvelles idées ou créer un plan de débogage. Vous préférez faire du développement de site Web sur votre iPad car il est livré avec de nombreuses fonctionnalités multitâches comme Stage Manager, Split View, etc.
Ainsi, suivez les méthodes ci-dessous pour rester prêt si le besoin d’afficher la source de la page sur iPhone ou iPad apparaît à tout moment moment.
Meilleures méthodes pour afficher la source de la page sur iPhone/iPad
Vous trouverez ci-dessous les moyens populaires d’afficher les sources de la page dans les codes HTML sur un iPhone ou un iPad sans tirer parti d’une application tierce. Ces méthodes sont appropriées pour les codeurs et les utilisateurs finaux concernés par la confidentialité et la sécurité :
1. Obtenez le code source HTML à l’aide de l’application Raccourcis
Cette méthode ne fonctionnera que si vous utilisez iOS 12.0 (iPadOS 12.0) et versions ultérieures. Voici comment créer un raccourci de source de page de vue sur iPhone ou iPad :
Ouvrez l’application Raccourcis depuis l’écran d’accueil ou le tiroir d’applications. Appuyez sur l’icône plus (+) pour créer un nouveau raccourci vide. Dans le champ de recherche, saisissez HTML et sélectionnez Créer du HTML à partir de texte enrichi. Encore une fois, recherchez l’application Quick Look dans la zone de recherche et ajoutez-la à l’éditeur de raccourcis. Maintenant, appuyez sur l’icône de raccourci en haut et choisissez Renommer. Raccourci pour afficher le code source sur les pages Web Renommez-le en Afficher le code source et appuyez sur Terminé. Appuyez sur le bouton (i) et activez l’option Afficher dans la feuille de partage. Maintenant, ouvrez le navigateur Safari et visitez une page Web de votre choix. 
Afficher le raccourci du code source sur la feuille de partage sur Safari Appuyez sur le bouton Partager sur l’application Safari et faites défiler vers le bas pour trouver le raccourci Afficher le code source. Appuyez sur le raccourci et vous obtenez le code source HTML dans Quick Look.
2. Afficher la source de la page à l’aide d’un script de signet
Dans cette méthode, vous allez créer un signet et l’URL sera un script de source d’affichage. Lorsque vous naviguez sur une page Web et que vous devez afficher la source de la page sur Safari, appuyez simplement sur le signet. Vous obtiendrez un code source HTML pour la page. Voici comment procéder :
Visitez un site Web au hasard et ajoutez-le à vos favoris sur votre navigateur Safari pour iPad ou iPhone. Appuyez sur le menu Safari dans le coin supérieur gauche et accédez à Signets. Appuyez sur Favoris pour rechercher le signet que vous venez d’ajouter. Appuyez longuement sur le signet, puis sélectionnez Modifier dans le menu contextuel. 
Comment modifier le titre et l’adresse du signet Effacez le titre du signet existant et renommez-le en code source HTML ou autre chose juste pour mémoriser le signet. Appuyez sur le champ Adresse et effacez l’URL existante. Copiez et collez le code suivant comme URL (créateur du code : Rob Flaherty) : javascript:(function(){var a=window.open(‘about:blank’).document;a.write(”);a. close();var b=a.body.appendChild(a.createElement(‘pre’));b.style.overflow=’auto’;b.style.whiteSpace=’pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))})(); Appuyez sur Terminé sur le clavier pour enregistrer les modifications que vous avez apportées jusqu’à présent. Maintenant, accédez à la page Web pour laquelle vous devez inspecter le code source. 
Comment afficher la source de la page sur Safari à l’aide d’un script de signets Allez dans le menu Signets et touchez le signet Code source HTML que vous venez de créé. Vous devriez voir le code HTML de la page que vous visitez dans un nouvel onglet Safari.
Lire également : Comment gérer les signets dans Safari sur iOS et Mac
3. Afficher la source de la page à l’aide de macOS Tethering
L’application Safari sur iPhone et iPad est livrée avec un outil Web Inspector intégré. Malheureusement, la fonctionnalité ne fonctionne pas directement sur les appareils iPhone ou iPad. Vous devez connecter les appareils à un MacBook ou à un iMac. Ensuite, vous pouvez utiliser les contrôles de Mac Safari pour visualiser le code source HTML. Le processus fonctionne en deux phases, comme indiqué ci-dessous :
Activer Web Inspector
Suivez ces étapes pour activer la fonctionnalité Web Inspector sur Safari pour iPad et iPhone :
Sur votre iPhone ou iPad, ouvrez l’application Paramètres. Accédez aux Paramètres Safari. Faites défiler vers le bas de la fenêtre Paramètres de Safari pour trouver le menu Avancé. Appuyez dessus. 
Comment obtenir Web Inspector sur Safari iPad Activez Web Inspector en appuyant sur le bouton bascule.
Afficher la source de la page sur Mac Safari
Allez sur votre Mac et suivez ces étapes :
Branchez l’iPhone ou l’iPad avec un MacBook ou un iMac à l’aide du câble USB. Si l’appareil n’a pas été authentifié auparavant, Mac vous demandera de l’authentifier à l’aide de l’identifiant Apple. Ouvrez maintenant l’application Safari sur Mac et visitez n’importe quel site Web. Dans la barre d’outils Mac, cliquez sur Développer. Recherchez votre iPad ou iPhone dans le menu contextuel qui s’ouvre. Cliquez sur votre iPad ou iPhone pour ouvrir une nouvelle fenêtre sur votre Mac qui affiche l’écran Safari de ces appareils. Maintenant, ouvrez le site Web cible sur votre iPhone ou iPad et affichez le code source sur le navigateur Mac Safari.
Si vous êtes d’accord avec les applications et outils tiers, vous pouvez également consulter ces méthodes supplémentaires pour afficher les codes source HTML des pages Web :
4. Extension Safari-Web Inspector
Vous pouvez installer l’extension Web Inspector pour le navigateur Apple Safari sur iPad et iPhone. Ensuite, appelez l’extension lorsque vous naviguez sur une page Web pour afficher son code source HTML. Voici les étapes que vous devriez essayer :
Ouvrez l’application Paramètres et accédez à la section Paramètres Safari. Faites défiler vers le bas jusqu’à ce que vous trouviez l’option Extensions. Appuyez dessus. 
Accédez à Plus d’extensions dans les paramètres de Safari Dans les extensions, appuyez sur Plus d’extensions. La page App Store pour les extensions Safari apparaîtra. Appuyez sur la zone Rechercher et tapez Inspecteur Web et appuyez sur Rechercher sur le clavier. Recherchez et installez l’application Web Inspector. Allez à nouveau dans Paramètres > Safari > Extensions > et appuyez sur Inspecteur Web. Utilisez le bouton bascule pour activer cette extension pour Safari. Ouvrez Safari et visitez n’importe quel site Web. 
Activer Web Inspector à partir du menu Safari Extensions Appuyez sur l’icône Extensions dans le coin droit de la barre d’adresse. Sélectionnez l’extension Web Inspector. Choisissez l’option Autoriser un jour dans la fenêtre contextuelle qui s’affiche. Encore une fois, appuyez sur l’icône Extensions, puis appuyez sur Web Inspector. Le code source HTML devrait apparaître au bas de la page Web que vous consultez. 
Apprenez à afficher la source de la page sur iPhone ou iPad à l’aide de Web Inspector Vous pouvez basculer entre les onglets tels que DOM, Éléments, Console, Réseau et Ressources. Pour revenir à la vue normale, appuyez simplement sur l’extension Web Inspector dans la section Extensions de Safari.
5. Application iOS-Afficher la source
Vous pouvez l’obtenir gratuitement dans l’App Store. Dans la zone de recherche, saisissez Afficher la source et appuyez sur Rechercher. Vous verrez plusieurs résultats sur l’App Store. Installez celui qui dit Afficher la source. Le fournisseur de l’application est Roman Tomjak.
Ouvrez l’application depuis l’écran d’accueil ou le tiroir d’applications. Ensuite, saisissez l’URL du site Web dans sa barre d’adresse pour afficher le code source HTML.
Comment utiliser l’application View Source
L’outil donne une vue taille iPhone du code source. Cependant, vous pouvez modifier l’orientation ou en utilisant les boutons correspondants dans le coin inférieur droit de l’écran.
6. Afficher le code source gratuitement à l’aide de Google Web Cache
Vous pouvez effectuer l’astuce suivante sur les sites Web visités pour afficher leur code source sous-jacent sur Safari ou Chrome :
Visitez la page Web pour laquelle vous besoin de trouver le code source HTML. Appuyez sur l’adresse dans la barre d’adresse Safari ou Chrome. 
Prendre le curseur avant le code HTTPS Placez le curseur de saisie au début de l’adresse comme indiqué dans l’image ci-dessus. 
Cache de type avant HTTPS code Maintenant, saisissez le code suivant avant le cache https:// : appuyez sur le bouton Go du clavier iOS. 
Comment afficher la source de la page sur Safari à l’aide de Google Web Cache En haut de la page, vous devez voir l’option Afficher la source. Appuyez dessus. Vous obtenez maintenant le code source de la page Web que vous venez de visiter.
Lire également : Comment importer vos signets, mots de passe, etc.
7. Afficher le code source sur les applications Web
Il existe de nombreux sites Web qui vous permettent de révéler les codes sources sous-jacents des sites Web et des pages Web gratuitement ou moyennant une somme modique. Parmi toutes ces applications Web, j’ai choisi la visionneuse de code source de CodeBeautify. Voici comment cela fonctionne :
Comment afficher le code source sur les applications Web Dans la zone Entrer l’URL, saisissez ou copiez et collez l’URL de la page Web pour laquelle vous souhaitez révéler la source HTML code. Appuyez sur le bouton Afficher pour afficher la source de la page sur le navigateur Safari de l’iPhone/iPad.
Conclusion
Donc, vous connaissez maintenant toutes les astuces pour afficher la source de la page sur les appareils iPhone et iPad. Vous avez découvert des méthodes natives et non natives dans cet article. Vous pouvez simplement vous en tenir aux astuces natives sur iPad ou iPhone pour afficher le code source HTML des pages Web ou utiliser des applications qui facilitent grandement la tâche.
Faites-moi savoir quelle méthode vous avez préférée en laissant un commentaire dessous. Partagez également l’article sur les réseaux sociaux et WhatsApp pour aider vos amis qui apprennent le développement de sites Web et le codage d’applications.
Ensuite, comment apprendre Swift sur Mac et iPad.