Outils de développement dans le nouveau Microsoft Edge

Le nouveau navigateur basé sur Chromium de Microsoft a récemment eu sa deuxième version stable publique, dévoilant Edge 80 avec un support ARM64 complet ainsi que des outils améliorés pour vous aider à créer et à utiliser du contenu Web. Comme les versions antérieures de l'ancien Edge, le nouveau navigateur de Microsoft conserve le raccourci F12 familier pour lancer ses outils de développement, soit attaché au navigateur, soit dans un volet séparé.

Cela vaut la peine de vous familiariser avec les nouvelles fonctionnalités, car bien qu'il existe des similitudes avec l'ancien Edge, vous travaillez maintenant dans un monde Chromium, et il y a beaucoup plus en commun avec Chrome et d'autres navigateurs basés sur Chromium. Ce n'est pas une mauvaise chose. Il est plus facile de transférer des compétences entre les navigateurs, et si vous avez utilisé Chrome comme navigateur de développement, il sera facile de commencer à travailler dans le nouvel Edge. Cependant, Microsoft a apporté ses propres modifications et s'efforce d'étendre l'expérience des développeurs Edge dans le code Visual Studio afin que vous puissiez développer et tester des applications JavaScript dans un seul environnement.

Une expérience développeur multiplateforme

Avec le nouvel Edge disponible sur Windows 7 et macOS, et avec une version Linux en cours de développement, il est possible d'accéder aux mêmes outils de développement sur différentes plates-formes. Vous disposez des mêmes inspecteurs, débogueurs et consoles, il est donc facile d'exécuter les mêmes tests partout où vous travaillez et sur le système d'exploitation que vous utilisez. Un développeur familier avec Edge sous Windows devrait pouvoir passer à un Mac pour tester le code sans avoir à attendre qu'un développeur Mac l'aide.

À l'instar de l'ancien Edge, les nouveaux outils de développement Edge basés sur Chromium vous aident à examiner le code HTML, CSS et JavaScript de votre site, avec un débogueur JavaScript et une console pour afficher la sortie de journalisation de la console à partir de l'exécution de JavaScript. Vous pouvez utiliser les outils pour activer rapidement une barre d'outils de navigateur qui ajoute des modes d'affichage des périphériques, vous donnant la possibilité de tester la conception réactive sans quitter un PC de développement.

Utilisation des outils de développement Edge

Les outils de développement Edge se trouvent dans neuf volets différents, chacun vous donnant des informations différentes sur votre application Web. Vous êtes le plus susceptible d'utiliser le premier: la vue Eléments.

Cela explore votre HTML et votre CSS, en montrant quels éléments d'une page sont générés par quelles sections de code. Le fait de pointer vers un élément dans la fenêtre de votre navigateur met en évidence le code pertinent, ce qui aide à isoler le HTML ou le CSS que vous souhaitez déboguer. Un volet affiche HTML; l'autre montre le CSS actuel, avec les styles actuellement appliqués et les écouteurs d'événement utilisés. Vous pouvez voir quelles règles CSS sont actuellement utilisées et celles qui sont ignorées.

Le volet Éléments est également disponible en tant qu'extension Visual Studio Code, apportant l'inspection de la mise en page parallèlement à votre édition HTML. C'est un moyen utile de voir rapidement comment les modifications de votre code affectent vos mises en page. Vous pouvez même joindre du code à une instance de navigateur, vous donnant ainsi un accès direct à tous les documents HTML ouverts.

Se préparer pour les PWA

L'un des outils les plus utiles est le panneau Performances. De là, vous pouvez enregistrer les activités de votre navigateur. Une fois la séquence de test terminée, vous pouvez utiliser la chronologie de l'outil pour profiler les ressources utilisées par votre application. Il est préférable de l'utiliser conjointement avec les outils Réseau et Mémoire, surtout si vous utilisez beaucoup de JavaScript. Comprendre les performances d'une application Web est particulièrement important si vous prévoyez de l'utiliser en tant que PWA (application Web progressive), et ici un panneau Application ajoute des outils pour examiner les composants clés d'une PWA, y compris le stockage local et les techniciens de service.

Avec Edge facilitant l'identification et l'installation des PWA, il vaut la peine d'explorer ces outils plus en détail, en particulier le volet Application. Avec une apparence et une sensation de tableau de bord, c'est un moyen rapide d'obtenir un aperçu détaillé de ce qui se passe dans vos applications et de leurs performances en dehors du navigateur. Vous pouvez utiliser l'outil Application pour explorer le fonctionnement des services intégrés d'Edge, tels que le gestionnaire de paiement.

Utilisation de plug-ins dans Edge DevTools

Une autre caractéristique du passage à une expérience de développement basée sur Chromium est la prise en charge des plug-ins tiers. Certains sont déjà disponibles dans le propre magasin de modules complémentaires d'Edge (bien que pour le moment uniquement via des liens profonds privés dans le magasin). Pour une sélection plus large, si vous avez activé la prise en charge des boutiques tierces dans Edge, vous avez accès à toutes les extensions du Chrome Web Store. Il y en a beaucoup ici, y compris des outils qui ajoutent une prise en charge ciblée pour des frameworks JavaScript spécifiques ou une aide au débogage. Ceux-ci incluent React de Facebook, le gRPC open source, des outils pour aider à travailler avec les API GraphQL et la prise en charge des linters tels que Webhint.

La spécification du plug-in de développement de Chromium est publique, et n'importe qui peut créer et publier ses propres outils de développement, que ce soit en interne ou pour le monde entier. Comme les plug-ins d'Edge partagent un format commun avec d'autres navigateurs Chromium, le même plug-in peut être fourni via d'autres magasins de navigateurs, ce qui simplifie le développement d'outils.

Ajouter une extension aux outils de développement revient à en ajouter une au navigateur. Accédez à un magasin, cliquez sur l'outil que vous souhaitez ajouter et laissez-le télécharger et installer. Il s'installera dans le navigateur et vous souhaiterez peut-être masquer l'icône d'extension dans le menu du navigateur avant d'ouvrir les outils de développement pour voir un nouvel onglet. L'exécution de Webhint sur un site affiche un ensemble de mesures clés, vous donnant des conseils pour des fonctionnalités importantes telles que l'accessibilité ou pour la prise en charge des fonctionnalités PWA.

Il est bon de voir que la personnalisation fait enfin partie des outils d'Edge. Nous utilisons tous des chaînes d'outils différentes, et vous donner ce dont vous avez besoin pour prendre en charge les technologies que vous utilisez est une approche très conviviale pour les développeurs. À l'époque où Microsoft a annoncé le passage à Chromium pour son navigateur, il a indiqué que l'une de ses raisons était de donner aux développeurs les fonctionnalités dont ils ont besoin pour créer les applications qu'ils souhaitent. Cela aurait pu signifier uniquement l'amélioration de la prise en charge du navigateur pour HTML5, CSS et JavaScript, donc apporter la gamme complète des outils de développement Chromium à Edge, sur tous ses systèmes d'exploitation pris en charge, est une initiative bienvenue.

Modifications apportées par Microsoft à l'expérience des développeurs de Chromium

Il est important de se rappeler que Microsoft est toujours un partenaire relativement junior de Google dans le développement de Chromium. Malgré cela, il a réussi à apporter un nombre considérable de contributions depuis qu'il a rejoint le projet, notamment en ajoutant la prise en charge des fonctionnalités d'accessibilité pour rendre les outils de développement disponibles à la plus large communauté possible. Avec environ 170 changements ajoutant la prise en charge d'outils tels que les lecteurs d'écran, il y a beaucoup à aimer ici, car les outils de développement accessibles conduiront au développement d'applications et de services Web accessibles.

D'autres nouvelles fonctionnalités sont actuellement cachées derrière des indicateurs expérimentaux dans les paramètres d'Edge, notamment la prise en charge de langues supplémentaires. Si vous activez cette fonctionnalité et que vous utilisez l'une des 10 langues prises en charge, la localisation des outils de développement correspondra à la localisation de votre navigateur.