Microsoft intègre les outils de développement du navigateur dans Visual Studio Code

Bonne nouvelle pour les développeurs front : la nouvelle extension Microsoft Edge Tools for VS Code est disponible.

L'éditeur VS Code comprend désormais les fonctionnalités de DevTools. © Microsoft

Sommaire

Télécharger Microsoft Edge Tools for VS Code

L’extension présentée par Microsoft permet aux développeurs front-end d’utiliser la fonctionnalité DevTools dans VS Code avec les éléments et l’extension réseau du navigateur Edge. Ces outils correspondent à ceux auxquels vous accédez en inspectant un élément sur un navigateur ou en utilisant le raccourci F12.

Il s’agit d’une fusion des deux extensions expérimentales testées depuis l’an dernier par Microsoft. Microsoft Edge Tools for VS Code peut être téléchargé sur le Visual Studio Marketplace ou directement dans VS Code. Grâce à cette extension, il est possible de visualiser le rendu HTML/CSS et modifier sa mise en page en faisant évoluer ses fichiers CSS sans quitter VS Code.

Les DevTools du navigateur dans l’éditeur de code

Cette nouveauté permet aux développeurs front-end de visualiser directement le résultat de leurs développements, sans ouvrir un navigateur. Ils peuvent ainsi voir et valider directement des changements apportés aux fichiers HTML/CSS.

Auparavant, vous aviez le choix entre coder à l’aveugle et inspecter les pages sur un navigateur, tester des évolutions et les reporter sur vos fichiers via VS Code. Vous pourrez désormais appliquer et tester directement vos développements front sur l’IDE.

Visual Studio affiche vos pages via la nouvelle version de Edge, basé sur Chromium, ce qui devrait assurer la compatibilité de vos développements pour Chrome. À noter qu’il est possible de lancer une instance Microsoft Edge complète ou headless.

Intégration complète de Microsoft Edge sur VS Code. © Microsoft

Un onglet Réseau pour suivre les interactions avec les serveurs

Microsoft indique que le volet Réseau (Network) est la deuxième fonctionnalité la plus utilisée dans les outils de développement sur Edge. Une extension spécifique était testée depuis l’an dernier : elle fait désormais partie intégrante de l’extension Microsoft Edge Tools for VS Code proposée en version stable par Microsoft. Elle est désactivée par défaut, il suffit de se rendre dans les paramètres pour l’activer.