DevTools Showdown Edge F12 vs Firefox vs Chrome

Les outils de développement de Microsoft Edge, le nouveau navigateur par défaut de Windows 10, bénéficient d'un design moderne et de quelques nouvelles fonctionnalités par rapport à son prédécesseur, les outils de développement F12 d'Internet Explorer 11..

La question de savoir si les outils de développement de Microsoft Edge sont à la hauteur de leurs concurrents populaires - outils de développement des autres navigateurs modernes tels que Mozilla Firefox et Google Chrome - se pose naturellement dans l'esprit de nombreux développeurs..

Dans cet article, nous essayons de répondre à cette question et de déterminer si les outils de développement F12 d’Edge valent vraiment la peine d’être utilisés. Nous allons comparer ses fonctionnalités à celles des outils de développement de Firefox et de DevTools de Google Chrome..

Ouvrez les outils de développement

En appuyant sur F12, vous ouvrez les outils de développement dans les 3 cas suivants: Outils de développement dans Firefox, Outils de développement dans Chrome et F12 Outils de développement dans Microsoft Edge. C’est le raccourci clavier où le nom officiel des outils de développement Edge F12 vient de.

Lorsque vous ouvrez les outils de développement d’Edge, vous pouvez immédiatement découvrir l’un de ses inconvénients les plus connus: c’est actuellement impossible d'épingler les outils à une fenêtre existante. Bien que vous puissiez suivre ce qui se passe à l'écran dans les outils de développement Firefox et dans Chrome DevTools en épinglant la fenêtre des outils de développement au bas de l'écran, vous (ne pouvez actuellement pas en faire autant avec Edge)..

Les développeurs de Microsoft affirment qu'ils vont résoudre ce problème dans une prochaine mise à jour.

Inspecter le DOM

le DOM Explorer outil (raccourci: CTRL + 1) est le premier onglet des outils de développement F12 de Microsoft Edge. Sa disposition et sa conception générale sont assez semblables à celles du Élément onglet de Chrome et le Inspecteur onglet dans Firefox, cependant les capacités diffèrent.

Dans Edge, vous pouvez consulter le document HTML rendu, les styles CSS associés et les gestionnaires d'événements enregistrés sur chaque élément. Vous pouvez également trouver le petit graphique sur le modèle de boîte CSS avec les valeurs calculées, déjà bien connues des deux navigateurs concurrents..

Vous pouvez expérimenter avec les règles CSS en supprimant les actuels et en en ajoutant de nouveaux, et vous pouvez voir votre changements résumés sur un sous-onglet séparé appelé “Changements” (il est situé sur le côté gauche). Cette dernière est une fonctionnalité qui n’est pas intégrée à Firefox Developer ni à Chrome DevTools. Cela peut donner une récapitulation rapide à l'utilisateur, donc c'est une option vraiment utile.

Certaines fonctionnalités des outils de développement de Firefox ne sont actuellement fournies ni par Edge ni par Google Chrome, mais peuvent contribuer de manière significative à la vie d'un concepteur: les outils analyseur de police et d'animation.

Dans Edge il y a un sélecteur de couleur cool bien que cela puisse en quelque sorte compenser l'utilisateur.

Interagir avec JavaScript

le Console L'onglet (raccourci: CTRL + 2) de Microsoft Edge vous permet d'interagir avec le code JavaScript de votre site, comme dans Firefox et les outils de développement Chrome. Tous les trois vous permettent de suivre les erreurs JavaScript en temps réel et vous pouvez également les analyser en entrant vos propres données..

L’outil Console des outils de développement F12 d’Edge a une fonctionnalité d'auto-complétion qui vous aide avec les commandes, mais il semble être moins bien informé par rapport à celui de Firefox et Chrome Dev Tools.

Bord sépare les erreurs, les avertissements et les messages ce qui est une grande aide, mais pas quelque chose que les deux autres trousses à outils n'ont pas.

La console de Firefox semble être le plus professionnel des trois outils de développement, car elle affiche séparément les autres types de problèmes: réseau, CSS, erreurs de sécurité et messages de journalisation, et vous permet d'interagir avec ceux-ci à travers le Interface console, pas seulement avec les erreurs JavaScript.

Comprendre ce que votre code fait

le Débogueur L'outil (raccourci: CTRL + 3) vous aide à comprendre ce qui se passe dans votre code tout en trouvant des bogues potentiels. Vous pouvez définir des points de contrôle et des points d'arrêt et afficher des piles d'appels.

Le volet Watches affiche les valeurs des variables, le mode Callstack affiche la chaîne d'appels de fonction ayant conduit à l'état actuel et le mode Points d'arrêt affiche la liste des points d'arrêt que vous avez définis..

Les outils de développement F12 d’Edge vous permettent mettre votre code en pause en cours d’exécution et parcourez-le ligne par ligne. Vous avez également la possibilité de améliorer la lisibilité d'un fichier JavaScript compilé ou minifié, et tu peux déboguer différentes ressources (JavaScript, extensions, etc.) un par un.

Firefox et Chrome DevTools fournissent toutes ces fonctionnalités. Ainsi, Edge ne propose pas une expérience de débogage exceptionnelle, mais offre à l'utilisateur un outil solide, fiable et à la hauteur de ses concurrents..

Jetez un coup d'œil à la communication entre le navigateur et le serveur

le Réseau L'outil (raccourci: CTRL + 4) a été entièrement repensé pour Microsoft Edge depuis Internet Explorer 11. À l'aide de cet outil pratique, vous pouvez suivre la communication entre le serveur et le navigateur, et inspecter les demandes individuelles.

Vous pouvez filtrer les résultats par type de contenu tels que les feuilles de style, les images, les supports, les polices, XHR et bien d’autres. Vous pouvez également déboguer AJAX avec l'aide de l'outil réseau.

Les onglets Réseau d'Edge et de Firefox offrent des capacités et une interface utilisateur assez similaires. Les deux ont un volet de barre latérale convivial qui vous permet de jeter un coup d'œil sur l'en-tête HTTP, le corps HTTP, les paramètres, les cookies et les timings associés à la ressource sélectionnée, élément par élément..

L'onglet Réseau de Chrome DevTools ne comporte pas de volet de ce type, mais si vous cliquez sur les demandes une par une, vous pouvez voir les mêmes informations. C'est une solution moins intuitive cependant.

Traquer les pages lentes

le Performance L'onglet (raccourci: CTRL + 5) vous aide à comprendre les raisons d'une page Web lente. Avec l’outil Performance, Microsoft a fait un énorme bond en avant en combinant les précédentes Réactivité de l'UI et profileur des outils pour créer une vue de bout en bout de tous vos scripts et visualiser les performances.

Cet outil pratique vous fournit des rapports sur différents types d'utilisation du processeur, vous donne un aperçu de la peinture de la structure de votre site, et il est également possible de isoler différents scénarios utilisateur en définissant des étiquettes sur la timeline.

Au cours du processus de test, nous avons constaté que l’outil Performance de Edge nous fournissait plus d'informations sur les problèmes de vitesse que ce soit Firefox Developer ou Chrome DevTools. L’interface utilisateur de l’onglet Performance dans Edge est assez bien conçue, elle nous aide avec de nombreux repères visuels et elle est relativement facile à utiliser. Si vous voulez en savoir plus sur son utilisation, lisez la documentation détaillée..

Diagnostiquer les problèmes de mémoire

le Mémoire outil (raccourci: CTRL + 6) permet de trouver des fuites de mémoire qui peut également ralentir votre page Web, peut en outre impact sur la stabilité de votre site.

À l'aide d'un joli graphique, vous pouvez facilement comprendre où votre utilisation de la mémoire augmente et vous pouvez créer des instantanés à des points spécifiques qui permettent d'analyser l'utilisation de la mémoire. Vous pouvez également comparer deux clichés réalisés à des endroits différents du cycle de vie de la page pour comprendre la différence entre eux.

Chrome DevTools propose également un profileur de mémoire agréable sous l'onglet Profils, bien que Firefox Developer ne fournisse pas cette fonctionnalité par défaut, mais vous pouvez télécharger et installer des addons comme celui-ci si vous le souhaitez. Le profileur de mémoire de Chrome DevTools est assez avancé et offre plus de fonctionnalités que Edge, par exemple, il vous permet de: enregistrer les allocations d'objets JavaScript dans le temps cela peut vous aider à isoler les fuites de mémoire.

Testez votre site sur différentes tailles d'écran

le Émulation L'outil (raccourci: CTRL + 7) vous permet de tester votre site dans différentes circonstances. Vous pouvez choisir entre deux profils de navigateur, Desktop et Windows 10 Mobile, et parmi de nombreux agents utilisateurs, y compris toutes les versions Internet Explorer pour ordinateur de bureau et mobile, et revenir à IE6, ainsi que de nombreux concurrents d'Edge, Chrome, Firefox, Safari, etc..

Il est intéressant que vous ayez la possibilité de prendre une regardez votre page en tant que Bing Bot. Vous pouvez également émuler un GPS, Et mettre différentes résolutions et orientations.

Les outils de développement Firefox n'ont pas d'outil d'émulation de périphérique, mais Chrome DevTools possède un émulateur si sophistiqué que Edge ne peut guère rivaliser avec lui..

Par exemple, l'écran d'émulation de Chrome a une grille précise où la vue émulée est insérée dans, et vous pouvez non seulement choisir parmi les profils de navigateur et les agents utilisateurs, mais aussi parmi de nombreux périphériques tels que le différentes versions d'iPhone ou Samsung Galaxy et beaucoup d'autres. L'émulateur de Chrome DevTools dispose également d'un outil pratique. Option de zoom et vous pouvez tester votre site sur différents réseaux tels que 3G, 4G, DSL, WiFi, etc..

Résumé

Dans l’ensemble, les outils de développement F12 de Microsoft Edge semblent étonnamment bons. Il fournit des fonctionnalités assez similaires aux kits d’outils de développement Web populaires d’autres navigateurs modernes. Les outils de développement F12 d’Edge sont assez puissants dans deux domaines: interface utilisateur c'est vraiment intuitif, convivial et bien conçu, et le outils de diagnostic de performance.

Pour ces deux fonctionnalités, il peut être intéressant d’envisager de passer à Edge, ou au moins de le tester. La plus grande lacune est l’absence de possibilité d’ajouter les outils de développement au bas de l’écran, mais espérons que Microsoft corrigera rapidement le problème..