Microsoft a récemment annoncé de nouveaux outils réseau améliorés dans Outils de développement F12 pour le nouveau Navigateur Microsoft Edge dans Windows 10 après une énorme demande des développeurs. En tant que développeur, vous avez toutes les raisons d’être enthousiaste car vous pouvez désormais travailler sur un ensemble d’outils améliorés.

Examinons quelques-unes des principales améliorations apportées par Microsoft.

Outils de développement Microsoft Edge F12

Même si vous êtes débutant, vous trouverez qu’il est extrêmement facile d’accéder au développeur Microsoft Edge F12 car il y a très peu d’étapes à suivre. Tout ce que vous avez à faire est de cliquer et d’ouvrir le Plus d’actions menu et sélectionnez « Outils de développement F12”. Cela lancera automatiquement les outils non ancrés.

Amélioration des outils réseau dans Edge

La première étape franchie par Microsoft en matière d’amélioration consiste à reconcevoir les outils réseau afin que les développeurs puissent bénéficier d’une expérience plus propre. Ensuite, l’équipe de Microsoft a également ajouté un Démarrer et arrêter bouton de la barre d’outils pour offrir plus de flexibilité aux développeurs lors de la gestion du trafic réseau basé sur HTTP.

Il y a aussi un nouveau bouton appelé « Filtre de type de contenu” qui a été ajouté pour permettre aux développeurs de mettre le filtre et d’obtenir uniquement le type de trafic souhaité. Ainsi, vous pouvez ignorer de nombreux appels réseau non liés et obtenir en même temps des informations pertinentes concernant le type et le nombre d’erreurs réseau, le nombre de requêtes, les tailles de transfert de données de réponse, les temps de téléchargement, etc.

Lis: Comment désactiver le raccourci F12 pour les outils de développement Microsoft Edge.

Vous pouvez également exporter et garder une trace de toutes les informations dans un fichier JSON HAR.

Améliorations notables des outils de développement F12 pour Microsoft Edge

Les listes d’éléments améliorés inclus dans le nouveau Microsoft Edge sont les suivantes :

• Toujours actualiser à partir du serveur: cette fonctionnalité garantit que vous testez la dernière version d’une ressource du serveur au lieu d’une version obsolète.
• Effacer le cache et les cookies: Cela garantit que le cache de votre navigateur est vide avant de charger la page suivante et vous pouvez effacer les cookies avec le raccourci sans même aller dans les paramètres du navigateur
• Effacer la session– Vous pouvez utiliser le bouton Effacer la session pour effacer toutes les informations sur le trafic réseau enregistrées pendant la session.
• Effacer les entrées lors de la navigation– Avec cette fonctionnalité, vous ne pouvez vous concentrer que sur les ressources qui ont été chargées lors de la dernière actualisation ou navigation de la page. Vous pouvez même comparer cela avec la dernière session simplement en désactivant cette fonctionnalité

Inclusion de Summary View dans les outils réseau

• Nom: Cela inclut le nom et l’URL de la ressource demandée
• Protocole: inclure le protocole utilisé pour demander la ressource
• Méthode: Affiche la méthode HTTP utilisée dans la requête
• Résultat: Cela affiche le code d’état de la réponse et le message texte tels que renvoyés par le serveur
• Type de contenu: Affiche le type MIME de la réponse tel que renvoyé par le serveur
• Reçu: La taille totale de la charge utile de réponse telle que fournie par le serveur
• Temps: Affiche le temps mis par ressource pour obtenir le téléchargement
• Horaires: Affiche la représentation graphique de l’activité réseau qui s’est produite au fil du temps

Si vous êtes intéressé par une vue plus détaillée des informations, vous pouvez opter pour la vue détaillée au lieu de la vue récapitulative. Des informations telles que l’en-tête, le corps, les paramètres, etc. sont affichées dans différentes sections de la vue détaillée. Vous devez double-cliquer sur la demande et lire les informations du panneau latéral.

Une chose clé à noter ici, dit Microsoftest que ces nouvelles fonctionnalités améliorées des outils réseau sont également disponibles dans l’environnement IE11 et Edge.

Découvrez maintenant comment modifier l’agent utilisateur, le mode, l’affichage et la géolocalisation dans Edge Developer Tools.

Les outils de développement Edge sont-ils les mêmes que Chrome ?

Oui, ils sont pareils. Les deux navigateurs utilisent le même moteur de navigateur Chromium et offrent donc le même ensemble de fonctionnalités dans les outils de développement. Cependant, vous pouvez utiliser l’extension Microsoft Edge DevTools pour Visual Studio Code, qui vous permet d’utiliser les éléments du navigateur et les outils réseau dans le code VS.

Comment utiliser les outils de développement EDGE ?

Ouvrez le navigateur Web Microsoft Edge pour accéder aux outils de développement. Cliquez sur F12 sur votre clavier. Cliquez sur l’icône Plus d’outils, puis cliquez sur Plus d’outils > Outils de développement si vous appuyez sur Ctrl+Maj+I ou cliquez sur l’icône Paramètres et autres points de suspension en option.