Comment afficher le code source d'une page Web sur iPhone et iPad

Même si les applications iOS ne sont pas tout à fait les machines de développement pourtant, vous trouverez généralement un iPhone ou un iPad dans la boîte à outils d'un concepteur/développeur Web. Bien que si vous êtes un développeur/éditeur ou simplement quelqu'un qui souhaite afficher le code source d'une page ou afficher tous les actifs déployés dessus, vous le faites généralement à partir de l'ordinateur.

Désormais, iOS 8 a rendu beaucoup plus facile l'affichage de la source, des ressources et des ressources DOM d'une page. Et grâce à de superbes applications tierces avec prise en charge des extensions, vous pouvez le faire correctement dans Safari (Chrome n'est pas pris en charge car les extensions peuvent accéder DOM uniquement dans Safari).

Parlons des deux applications qui vous aideront à afficher et à enregistrer le code source de n'importe quel site Web lorsque vous êtes en déplacement.

Afficher l'extension source pour Safari

Voir la source (0,99 $) est une application simple et puissante avec une extension Safari. Il coûte 0,99 $, mais est livré avec de nombreuses fonctionnalités.

Une fois l'application installée, allez dans Safari, appuyez sur le Partager, balayez vers la droite sur la rangée du bas et appuyez sur Suite. A partir d'ici basculer Voir la source. Cela activera l'extension.

En savoir plus sur les extensions iOS 8: Les extensions iOS 8 deviennent rapidement un outil puissant. Jeter un coup d'œil à Comment ils travaillent, les meilleures extensions de partage, et comment une extension peut vous aider à transformer Safari dans un téléchargeur à part entière.

Maintenant, allez à la page, appuyez sur le Partager bouton et choisissez Voir la source. Vous verrez le code source de la page dans toute sa splendeur. Appuyez sur le Partager bouton pour afficher la feuille de partage native. De là, vous pouvez envoyer le code à une application de notes ou l'envoyer par e-mail.

Ci-dessous, vous verrez quatre boutons - Assets, DOM, Script et Info.

Les actifs répertorient toutes les images de la page. Vous pouvez appuyer sur un lien pour voir un aperçu et enregistrer l'image.

Les DOM Le bouton vous montrera un modèle d'arbre avec une structure hiérarchique des documents HTML, XML et SVG. Vous pouvez appuyer sur n'importe quel élément pour le développer.

Les Scénario Le bouton vous permet d'écrire et d'injecter du Javascript dans n'importe quelle page (localement). Les Info panneau affiche des informations sur la page.

Srcfari

Srcfari (0,99 $) est une alternative à View Source. Alors que l'application vous montrera le code source et les ressources telles que les images, les feuilles de style CSS et les scripts exécutés sur la page, vous devrez le faire à partir de l'application elle-même. Il n'y a pas d'extension Safari pour Srcfari.

Cela dit, utiliser Srcfari n'est pas du tout une mauvaise expérience. L'application a une belle typographie et fait un bien meilleur travail pour décomposer les actifs par scripts, CSS et images que l'application View Source. Un reproche que j'ai avec Srcfari est qu'il a permis l'habillage de texte pour les feuilles de style CSS, mais pas lorsque vous affichez la source entière (ce que fait l'application View Source). Cela signifie qu'il y aura une bonne quantité de panoramique et de zoom, du moins sur l'iPhone.

A part ça, Srcfari est l'affaire habituelle. Vous pouvez copier le code source dans votre presse-papiers ou l'envoyer par courrier électronique à quelqu'un. Vous pouvez également enregistrer des images à l'aide de l'application.

Conclusion

Safari est probablement déjà votre navigateur de choix sur iOS (principalement parce qu'iOS ne vous permet pas de sélectionner Chrome par défaut). Si vous avez besoin d'afficher le code source assez souvent, l'application View Source à 0,99 $ avec son extension Safari vaudra le prix.

Utilisez-vous habituellement votre iPhone ou iPad pour dépanner des sites Web? Ou pour voir ce qui ne va pas chez eux? Faites-nous savoir dans les commentaires ci-dessous.