Je suis actuellement au SMX München, qui reste l’une de mes conférences préférées en Europe. La qualité des conférences est superbe et l’organisation est tout simplement parfaite. Alors aujourd’hui, après ma conférence (session conjointe avec le génial Dave Sottimano), j’écoutais l’inimitable Mike King faire une excellente présentation avec Ari Nahmani sur les compétences techniques requises pour tous les spécialistes du marketing numérique aujourd’hui. Inutile de dire que je suis tout à fait d’accord avec leur point de vue selon lequel le marketing numérique a toujours été une discipline technique et que le Web devient de plus en plus complexe chaque jour qui passe. La seule façon de faire face à ce flux est de perfectionner vos compétences techniques autant que vous le pouvez.
Une chose que Mike a rapidement visitée était le débogage à distance pour les appareils mobiles. Désormais, le débogage de l’expérience mobile de votre site Web est pénible, car les navigateurs mobiles eux-mêmes ne vous offrent que peu d’outils pour travailler. Pour Google Analytics, par exemple, il serait vraiment intéressant de savoir quelles requêtes votre navigateur mobile envoie à GA, surtout si vous suivez des éléments idiosyncrasiques pour l’expérience mobile. Mais vous ne pouvez pas simplement ouvrir un navigateur mobile et vous attendre à ce qu’il dispose des mêmes outils de développement impressionnants que votre navigateur de bureau.
Entrez dans le débogage à distance ! Vous pouvez simplement brancher votre appareil iOS ou Android, puis ouvrir le navigateur Web (Safari ou Chrome, respectivement) sur votre bureau, et en quelques étapes simples et faciles à suivre, vous serez là pour inspecter le DOM et analyser les requêtes réseau ! À quel point est-ce génial ?
Ce n’est pas un guide, juste un moment “EUREKA” pour moi, car cela simplifie vraiment le débogage de votre navigateur mobile. Les étapes que je décris ci-dessous concernent l’iPhone (puisque c’est ce que j’utilise), mais vous pouvez suivre les étapes de ce guide pour le faire fonctionner également sur votre combinaison appareil Android / Chrome.
Mode d’emploi de l’iPhone
Alors, tout d’abord, branchez votre iPhone sur le port USB de votre ordinateur.
Ensuite, toujours dans l’iPhone, allez à Paramètres -> Safari -> Avancéet dans l’écran qui s’ouvre, assurez-vous Inspecteur Web est sur.
Ouvrez le navigateur Safari sur l’iPhone et accédez au site Web sur lequel vous souhaitez déboguer votre appareil mobile.
La prochaine chose à faire est d’ouvrir votre bureau Navigateur Safari. Dans le Développer menu, vous devriez maintenant voir votre appareil, et lorsque vous ouvrez le menu de l’appareil, vous devriez voir une entrée pour Safari, ainsi que l’URL du site que vous consultez sur le téléphone. Cliquez sur cet élément de menu.
TA-DA ! Vous déboguez à distance votre iPhone pendant qu’il navigue sur le site ! Vous pouvez déplacer le bouton de votre souris sur les éléments DOM dans le Éléments vue pour voir comment le modèle d’objet de document est construit sur le téléphone.
Vous pouvez ouvrir le Réseau Tab, trouver une demande à collecter (le point de terminaison Google Analytics), puis développez le Ressource panneau pour afficher les paramètres de la requête et les en-têtes HTTP et tout ça !
Enfer, vous pouvez même exécuter JavaScript dans le contexte mobile ! Vous souhaitez vérifier l’état de dataLayer sur votre navigateur mobile ? Facile! Qu’en est-il de la chaîne de l’agent utilisateur ? Un jeu d’enfant!
Franchement. Débogage à distance. Où étais-tu, durant toute ma vie?
