Fiddler pour les développeurs Xamarin

Fiddler est le proxy réseau bien-aimé de nombreux développeurs. Nous regardons sous les couvertures pour explorer comment Fiddler peut bénéficier aux développeurs mobiles.

Les développeurs ne devraient jamais avoir de doute sur ce qui se passe dans la pile réseau. Cependant, cela est plus facile à dire qu'à faire aujourd'hui, avec la pléthore de plates-formes pour lesquelles les développeurs doivent construire. La création de facteurs de forme mobiles continue de présenter des défis avec la couche réseau, en particulier avec les variantes de système d'exploitation et d'appareils de la plate-forme. Les développeurs ont besoin d'une interface visuelle cohérente pour la productivité et doivent exiger la visibilité du trafic réseau lors de la construction pour mobile. Il n'y a qu'une seule façon d'y parvenir – regardez sous les couvertures.

Entrez Fiddler – le proxy de débogage Web gratuit pour tout navigateur, système ou plate-forme. Fiddler a été extrêmement populaire dans la communauté des développeurs et a beaucoup évolué au fil des ans. Voyons comment Fiddler peut atténuer la douleur de la pile réseau pour les développeurs mobiles, en particulier les Xamarin multiplateformes.

Pourquoi Fiddler

La nécessité d'inspecter le trafic réseau n'est pas nouvelle et au fil des ans, de nombreux outils ont été construit pour les développeurs. La beauté de Chrome DevTools est disponible pour tout développeur utilisant les navigateurs Google Chrome ou Microsoft Edge sur n'importe quel système d'exploitation. Si vous travaillez avec des API Web, Postman fournit un excellent moyen de créer, tester, authentifier, simuler et valider des points de terminaison d'API. Cependant, tous ces outils sont destinés au Web – qu'en est-il du développement mobile ou de bureau? Comment les développeurs regardent-ils le trafic réseau lorsque le système d'exploitation de la plate-forme exécutant les applications est une boîte noire?

C'est l'un des plus grands avantages que Fiddler et le nouveau Fiddler Everywhere apportent à la table – visibilité de la pile réseau pour tous les types de développement d'applications, en particulier pour les développeurs mobiles. Plongeons dedans.

Thy Shall Not Pass

Il s'avère que rien ne vaut la flexibilité d'une visibilité complète du réseau, quel que soit le type de développeurs d'applications qui construisent. Et pour cela, il faut passer sous les couvertures et utiliser un proxy réseau. Toutes les communications réseau passent par un seul proxy, permettant ainsi aux développeurs une visibilité complète. C'est exactement là où Fiddler brille et il existe plusieurs façons d'activer les flux de travail Fiddler, quelle que soit la plate-forme. Les développeurs sur Windows apprécient depuis longtemps le Fiddler original, une solution réseau mature riche en fonctionnalités. Et maintenant, grâce à Fiddler Everywhere, les développeurs sur Mac OS ou Linux peuvent profiter du même amour.

Présentons donc l'expérience d'un développeur mobile sur Mac OS utilisant le moderne Fiddler Everywhere . Comme mentionné, Fiddler est un véritable proxy réseau pour une flexibilité maximale et exige que tout le trafic réseau passe par Fiddler, bien que temporairement. Lors du premier lancement, votre système d'exploitation est susceptible de vous avertir que vos paramètres réseau sont en cours de modification – c'est correct, et les choses reviennent aux paramètres normaux une fois que Fiddler est fermé. L'une des choses révélatrices pour les nouveaux utilisateurs de Fiddler en tant que proxy réseau est la quantité de trafic réseau – la plupart des applications de tous les jours deviennent très bavardes et appellent souvent à la maison. Et les sites Web populaires d'aujourd'hui nécessitent un bon nombre d'appels réseau pour afficher la première vue, ce qui explique pourquoi les développeurs mobiles ont pris conscience des restrictions de bande passante et du temps avant le premier chargement des applications Web.

Après une installation réussie de Fiddler Everywhere et l'acceptation du proxy réseau, les développeurs sont accueillis avec un nouveau look et une application performante qui se sent à l'aise sur Windows / Mac / Linux. On peut aller dans les paramètres Fiddler et inspecter le protocole / les ports utilisés – pas de secrets. Et si vous êtes un développeur mobile, vous voudrez activer le paramètre qui permet aux appareils distants de se connecter via Fiddler. Cela vous évitera une case à cocher sur la route.

Je vous vois

Un gros avantage que Fiddler apporte à la table est la possibilité d'inspecter toute activité réseau – et cela inclut également la plupart du trafic HTTPS. Tout ce que vous avez à faire est d'aller dans Paramètres et de cocher la case pour décrypter le trafic HTTPS, comme ci-dessous. Désormais, les capacités d'interception HTTPS de Fiddler font (à juste titre) monter les sourcils parmi les utilisateurs soucieux de la sécurité. Essentiellement, le proxy Fiddler exécute une attaque d'homme au milieu pour usurper le trafic sécurisé – c'est très technique et fait avec une responsabilité extrême.

La façon dont Fiddler regarde sous les couvertures du trafic HTTPS consiste à utiliser un certificat racine local généré de manière unique pour les communications. Oui, vous serez invité à exporter et à approuver ce certificat localement. Chaque certificat racine Fiddler est généré de manière unique – par utilisateur, par machine. Aucune installation Fiddler n'a le même certificat racine.

Fake It Till You Make It Work

Presque tout type d'application moderne qui communique avec Internet le fait en grande partie en utilisant des API – des wrappers sur des points de terminaison qui donnent accès à quelque chose de précieux. Et une grande majorité des API Web honorent les verbes HTTP pour fournir des actions uniques sur les données. Quel que soit le type d'application que vous construisez, Fiddler Everywhere est vraiment bon pour tester les API avec son compositeur. Vous pouvez pointer vers n'importe quelle URL – locale ou Internet, et pouvoir déclencher des demandes personnalisées pour n'importe quel verbe HTTP.

Et comme vous pouvez vous y attendre, Fiddler Composer vous permet de vous mêler de la plupart des aspects des requêtes API / Web via HTTP, comme les en-têtes, l'authentification et le contenu du corps.

L'une des fonctionnalités les plus utiles de Fiddler Classic sur Windows est le répondeur automatique. À l'aide du répondeur automatique, vous pouvez configurer des règles pour modifier des demandes spécifiques et tester une myriade de scénarios de débogage. Vous pouvez utiliser des actifs de fichiers locaux au lieu de transmettre des demandes au serveur – et vous pouvez simuler des réponses. Le répondeur automatique est maintenant de retour dans Fiddler Everywhere et est très utile pour tester les conditions de bord lors de la construction pour mobile.

Apple a Day

Très bien, entrons dans les détails de l'utilisation de Fiddler Everywhere lorsque vous créez des applications mobiles – en commençant par les appareils Apple. MacOS dispose de merveilleux simulateurs pour les appareils iOS – iPhones, iPads, OS de télévision et OS de montre. Avec Fiddler Everywhere exécuté en tant que proxy réseau, ouvrez simplement un simulateur iOS et ouvrez le navigateur Safari intégré. Lorsque vous accédez à une URL, Fiddler capture fidèlement le trafic, comme ci-dessous.

Voir vos applications mobiles ou PWA fonctionner sur le simulateur iOS est la première étape évidente. Cependant, il y a tellement de joie à voir votre création s'exécuter sur le métal sur un appareil iOS réel. Le déploiement de votre application sur un appareil iOS est un processus en soi – c'est un combat que vous devrez combattre vous-même, bien que l'outillage et la documentation se soient beaucoup améliorés. Cependant, une fois que vous déployez votre application sur l'appareil, auriez-vous affaire à une boîte noire en ce qui concerne le trafic réseau? Heureusement non – vous pouvez réellement faire passer votre appareil iOS via le même proxy réseau Fiddler.

Si votre ordinateur exécutant Fiddler et votre appareil iOS sont sur le même réseau, vous pouvez forcer le trafic réseau iOS à passer par le proxy Fiddler. Dans le cas d'un iPhone, accédez aux paramètres du réseau choisi et choisissez de configurer un proxy manuellement. Les numéros de serveur et de port correspondants doivent correspondre à ce que Fiddler utilise dans ses paramètres de connexion.

L'écran du téléphone que vous voyez ici est le miroir d'un véritable iPhone, diffusé sans fil à l'aide d'un logiciel astucieux appelé Reflector. Le proxy réseau de l'appareil iOS pointant désormais vers Fiddler, nous pouvons désormais capturer toute l'utilisation du réseau à partir de l'appareil, y compris le trafic du navigateur et des applications. Une solution simple mais puissante.

Works Under My Shell

Donc, une fois que vous commencez à créer des applications natives pour iOS, il est impératif de voir comment votre code dans l'application gère les appels réseau. Grâce à Fiddler agissant en tant que proxy réseau, cela est trivial – iOS Simulator finit par utiliser le même réseau que votre ordinateur. Imaginons que vous ayez choisi Xamarin.Forms pour créer des applications mobiles multiplateformes véritablement natives – tout d'abord, bravo pour une grande sélection de piles technologiques. Avant de commencer à créer quelque chose de complexe, la première chose à faire est de vérifier si Fiddler capture du trafic depuis l'application. Le moyen le plus rapide de vérifier consiste à lancer le composant de navigateur Web et à naviguer vers une URL dans l'application. Xamarin.Forms propose l'abstraction WebView – nous en faisons simplement l'intégralité de l'interface utilisateur dans notre application et relevons Fiddler lors du chargement de tout site Web public. Voila, trafic capturé.

 public partial class MainPage: ContentPage
{
    public MainPage ()
    {
        InitializeComponent ();

        WebView webView = nouveau WebView
        {
            Source = "https://www.telerik.com/fiddler",
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand
        };

        this.Content = new StackLayout
        {
            Enfants = {webView}
        };
    }
} 

Je sais ce que vous avez fait dans l'application

Maintenant que nous avons prouvé que le proxy Fiddler capture en fait tout le trafic généré par le code personnalisé dans une application native, nous pouvons avoir beaucoup plus de confiance dans le code qui déclenche les appels réseau. Essayons un scénario simple – une application Xamarin.Forms effectuant un appel d'API réseau et recevant des données d'un point de terminaison de service. Imaginons également que nous sommes riches et célèbres – et volons dans des jets personnels. Qui se soucie de l'environnement de toute façon? Votre compagnie de jet privé fournit une application iOS native où vous pouvez rechercher les jets les plus proches en fonction de votre emplacement physique. Voici quelques exemples de XAML pour rendre une interface utilisateur trop simplifiée:

Une fois que l'utilisateur déclenche une demande pour trouver les endroits les plus proches, nous invoquons un point de terminaison Azure Functions en passant un code d'aéroport et en attendant des données. Voici le code:

 classe partielle publique AnotherPage: ContentPage
{
    chaîne de const privée AzureFunctionURL = "https: //  .azurewebsites.net / api / findplanes / airport / {airport}";
    Client HttpClient privé = nouveau HttpClient ();

    public AnotherPage ()
    {
        InitializeComponent ();
    }

    GetPlanes async void privé ()
    {
        essayer
        {
            var Endpoint = AzureFunctionURL.Replace ("{airport}", this.Airport.Text);
            var FunctionResponse = attendent Client.GetStringAsync (Endpoint);
            this.AvailablePlanes.Text = FunctionResponse.ToString ();
        }
        catch (Exception)
        {
            // Échoue bien.
        }
    }

    void Button_Clicked (expéditeur System.Object, System.EventArgs e)
    {
        GetPlanes ();
    }
} 

Les calculs magiques dans la fonction cloud pour trouver les avions les plus proches ne sont pas importants. L'important est de savoir si nous pouvons capturer ce trafic dans Fiddler – bien sûr!

Besoin d'une preuve supplémentaire que Fiddler fonctionne pour les applications iOS natives ou si vous avez envie de quelque chose de plus complexe? dans une application réelle – l'exemple d'application pour Interface utilisateur Telerik pour Xamarin . Vous pouvez la récupérer sur l'App Store et le code source complet est ouvert / téléchargeable. Vous pouvez jouer avec avec une véritable application qui se trouve dans les magasins et une interface utilisateur polie. Lorsque vous l'exécutez localement, vous pouvez voir différentes parties de l'application passer des appels réseau que Fiddler capture fidèlement. . Le Travel Assistance Bot, par exemple, fonctionne avec un service de Bot hébergé dans Azure et l'application utilise l'API DirectLine pour communiquer avec le Bot – sans se cacher de Fiddler de toute façon.

Partenariat avec Droids

Cibler Android comme plate-forme mobile? Fiddler est heureux d'être un fidèle compagnon de vos besoins de débogage en regardant la pile réseau. Besoin de voir le trafic depuis un appareil Android dans Fiddler? Mettez simplement l'ordinateur et l'appareil mobile sur le même réseau WiFi avec Fiddler comme proxy réseau. Une façon sûre de résoudre les problèmes potentiels est l'inversion du contrôle – allumez le point d'accès de l'appareil Android et attachez l'ordinateur à l'appareil. Si vous exécutez des simulateurs / émulateurs Android sur un ordinateur, la configuration est très similaire à celle d'iOS – ajustez les paramètres de proxy pour qu'ils correspondent aux IP / ports utilisés par Fiddler, comme ceci:

Voilà. Lancez le simulateur Android et vous verrez Fiddler capturer tout le trafic, comme indiqué par le processus d'origine. Les développeurs peuvent désormais avoir une visibilité claire sur le trafic réseau tout en ciblant Android – toute variante Android pour téléphones, tablettes, appareils portables, TV et plus encore.

Conclusion

Fiddler est depuis longtemps le proxy réseau bien-aimé de nombreux développeurs. Et aucun autre type de développement ne bénéficie plus avec Fiddler que la construction pour des facteurs de forme mobiles. Avec une pléthore de plates-formes mobiles et de variantes d'appareils, les développeurs ont besoin d'un véritable proxy réseau pour avoir une visibilité complète – Fiddler est heureux d'obliger.

Fiddler Classic a toujours été et continuera d'être un client Windows riche en fonctionnalités pour faciliter tout type de développement mobile. Fiddler Everywhere est la nouvelle solution multiplateforme qui fonctionne de manière transparente sur Windows / Mac / Linux et promet la prise en charge de presque toutes les plates-formes mobiles que les développeurs peuvent cibler. Qu'est-ce qui vous retient de la prochaine solution mobile étonnante?