Comment afficher le code html d’un site sur un mobile Android

9

Comme tout bon développeur qui se respecte, vous avez essayé un jour ou l’autre de récupérer le code html d’un site depuis votre smartphone Android. Problème, les navigateurs pour mobile contrairement à leurs homologues desktop ne proposent pas ce type de fonction. Dans ce tutoriel, nous vous expliquons comment remédier à cette lacune.

Code source d’un site web compatible mobile

Si vous êtes sur cette page, c’est probablement parce que vous avez déjà tenté sans succès d’afficher le code source (html et javascript) d’une page web sur votre téléphone. Il faut dire que les navigateurs mobiles ne nous facilitent pas vraiment la tâche. Inutile de perdre votre temps à farfouiller dans les menus, vous ne trouverez aucune option pour vous aider à découvrir les secrets de fabrication d’un site.

Bien évidemment rien ne vous empêche d’effectuer cette opération depuis votre ordinateur. Sauf qu’avec le développement de l’usage des smartphones, la plupart des sites internet proposent une version mobile. En clair cela veut dire que l’affichage de la page web s’adapte automatiquement à la taille de votre appareil (smartphone, tablette, ordinateur).

Forcément si vous surfez depuis un ordinateur, votre navigateur internet n’affichera pas la même page que sur votre téléphone. Vous l’aurez compris, cette solution ne permet pas d’accéder au code source des sites développés spécifiquement pour les mobiles.

Application dédiée à l’affichage du code HTML

La concurrence dans le web est de plus en plus dur. Pour toujours rester à la page, les webdesigners comme les développeurs web se doivent d’étoffer leur savoir faire et leur connaissance en s’inspirant des solutions techniques adoptées par les sites mobiles à fort trafic.

Fort heureusement, des applications permettent aujourd’hui d’afficher le code HTML d’une page web mobile. C’est le cas notamment de HTML Viewer. Très simple à utiliser, cette application devrait contenter les professionnels du web. Et cerise sur le gâteau, elle est totalement gratuite

  • Lancez le Play Store sur votre smartphone ou votre tablette Android
  • Dans la barre de recherche placée tout en haut de la fenêtre, tapez HTML Viewer
  • Cliquez sur le bouton Installer
  • Lancez ensuite l’application que vous venez d’installer
  • Sélectionnez le type de protocole de transfert (http ou https) du site dont vous souhaitez afficher le code sourceSélectionner le protocole correspondant à votre site
  • Tapez l’adresse de la page web et validez en appuyant sur le bouton view sourceCliquer sur le bouton HTML View pour afficher le code d'un site web
  • Cliquez ensuite sur le bouton web view pour afficher la page dans un navigateur

Afficher le code source dans un éditeur de code HTML

Voilà vous savez maintenant comment récupérer le code HTML d’une page web mobile. Malheureusement l’aperçu proposé par HTML Viewer ne permet pas de travailler efficacement. L’interface de l’éditeur de texte se révèle bien trop rudimentaire. Vous n’aurez pas d’autres choix que d’exporter le code HTML vers un outil spécialement destiné aux développeurs.

  • Lancez Chrome pour mobile
  • Tapez l’URL du site de votre choix
  • Cliquez sur le bouton Menu (3 petits points superposés) puis sur Partager
  • Dans la liste sélectionnez l’application HTML Viewer
  • Patientez quelques secondes le temps que le code source de votre site se charge
  • Appuyez ensuite sur l’icône en forme d’enveloppePartager le code source récupérer depuis l'application HTML Viewer
  • Choisissez l’option GmailEnvoyer par mail le code HTML d'une page web adaptée aux mobiles Android
  • Entrez votre adresse e-mail et l’objet de votre courrier électronique
  • Cliquez sur le bouton Envoyer

Il ne vous reste plus maintenant qu’à vous connecter à votre messagerie et de copier-coller le code source dans votre éditeur de texte préféré.

9 commentaires

  1. Bonjour Patrick,
    Il faut que tu copies le code puis que tu les colles dans un éditeur de texte offrant un système automatique d’indentation: Il en existe plusieurs sous Android. Je te conseille DroidEdit. Voici le lien pour télécharger l’application
    https://play.google.com/store/apps/details?id=com.aor.droidedit&hl=fr
    Je te conseille d’envoyer le code sur un ordinateur. C’est tout de même plus confortable de travailler avec une souris et un clavier.

  2. Salut Sasuka,
    J’ai une petit question pour afficher Play Store sur PC, le navigateur est là pour nous aider donc afficher de cette page écrite en html. Pourtant j’ai une question dans l’application Play Store comment l’outil recherche fonctionne et lorsqu’on cherche une application dans la barre de recherche comment google récupère ces données et nous affiche WhatsApp par exemple

  3. Bonjour Tarik,

    Les applications Android sont développées en Java en non HTML. Le Play Store doit certainement interroger une base de données dans laquelle est stockée l’ensemble des applis disponibles sur la boutique de Google.

  4. oui Sasuka ce principe je le connais déjà. Il faut une base de données pour récupérer les données j’ai aucun souci a ce sujet, mais je crois que t’a bien expliqué comment fonctionne le bouton de recherche de google Play Store il est écris avec quel langage. Si je veux développer une application comme le Play Store j’ai besoin de faire un champ de recherche sur une obligation je veux savoir comment il est écrit ce code est avec quel langage merci de ta premier réponse

  5. Bonjour Tarik,
    Les applications sont développés en Java. Par contre pour interroger une base de données, il te faudra maitriser le langage SQL. On trouve plein de tutoriel sur le net sur ce sujet.

  6. Problème de fonctionnement pour récupérer la source par email.
    Sous chrome, le partager via html viewer ne donne pas du tout accès aux mêmes fonctionnalités (en gros, l’envoi par Gmail ou n’importe quel autre gestionnaire est inaccessible) et j’ai beau attendre plusieurs minutes, rien n’y fait.
    Evidemment, si j’exécute de nouveau html viewer comme j’y suis invité, j’ai une seconde version de la source, dans le répertoire html viewer, mais bon, cela ne m’intéresse pas.

  7. Bonjour Luc,

    Réinstalle l’application Html Viewer. Il s’agit certainement d’un bug. Pense également à redémarrer ton téléphone avant de relancer l’application. J’espère que ton problème va vite se régler.

  8. Bonjour la communauté.
    Je suis devant mon navigateur Chrome ou Edge sur un PC. Je regarde une page web puis je fais ctrl plus S, le navigateur va télécharger un dossier automatiquement qui contiendra des fichiers html, css etc du site. Je vais savoir faire la même manoeuvre sur Android

Ajouter un commentaire