Extension de Microsoft Edge DevTools pour Visual Studio Code

L’extension Microsoft Edge DevTools pour Visual Studio Code vous permet d’utiliser Microsoft Edge DevTools et une version incorporée du navigateur Microsoft Edge, y compris l’émulation d’appareil, directement à partir de Visual Studio Code. L’extension DevTools fournit bon nombre des outils qui se trouvent dans DevTools qui se trouve dans le navigateur Microsoft Edge, à partir de Visual Studio Code.

Outils de développement Microsoft Edge et aperçu du navigateur dans Visual Studio Code

Visual Studio Code est un éditeur de code source léger mais puissant pour Windows, Linux et macOS. Visual Studio Code est un IDE (environnement de développement intégré) complet qui possède de puissantes fonctionnalités pour le développement web. Visual Studio Code inclut une prise en charge intégrée de JavaScript, TypeScript et Node.js, ce qui en fait un excellent outil pour les développeurs web, en particulier avec cette extension DevTools.

L’extension DevTools pour Visual Studio Code vous permet de :

  • Développez des pages web et utilisez DevTools sans quitter Visual Studio Code. Cette extension vous offre une alternative à l’utilisation de DevTools pour le développement de pages web dans la fenêtre du navigateur.

  • Émulez des appareils, tels que l’affichage de votre page web dans différentes tailles de fenêtre d’affichage pendant le développement.

  • Testez l’accessibilité de vos pages web à partir de Visual Studio Code.

  • Modifiez en direct CSS et SASS et voyez vos modifications immédiatement répercutées dans une instance de navigateur lors de la modification de vos fichiers sources réels. L’édition du miroir CSS vous permet de contrôler si vous souhaitez enregistrer des modifications dans votre .css fichier. DevTools ouvre et modifie vos .css fichiers, mais sans enregistrer automatiquement les fichiers, afin que vous puissiez décider et contrôler si vous souhaitez enregistrer les modifications que vous avez apportées dans l’onglet Styles de l’outil Éléments .

Approches comparées

L’extension DevTools pour Visual Studio Code est l’une des différentes façons d’utiliser DevTools pour modifier vos fichiers locaux.

Approche Avantages et inconvénients Article
Outil DevTools >Éléments du navigateur > Vous devez copier manuellement les modifications de DevTools dans vos fichiers sources. Inspecter, modifier et déboguer du code HTML et CSS à l’aide de l’outil Elements
Outil DevTools >Sources>du navigateur> Onglet Espace de travail pour définir un espace de travail Enregistre toujours les modifications, ce qui pourrait décourager l’expérimentation Sélectionner un espace de travail local pour utiliser DevTools afin de modifier des fichiers et d’enregistrer les modifications sur le disque dans la vue d’ensemble de l’outil Sources
Navigateur >DevTools> Paramètres >Expériences>Fichiers open source dans Visual Studio Code Enregistre toujours les modifications, ce qui pourrait décourager l’expérimentation Ouverture de fichiers sources dans Visual Studio Code
Extension de Microsoft Edge DevTools pour Visual Studio Code Ouvre et modifie automatiquement le fichier source CSS, mais n’enregistre pas automatiquement le fichier, de sorte que vous pouvez choisir d’enregistrer ou non les modifications. Le présent article.

Édition à 2 voies

Les modifications sont répercutées parmi les fichiers sources du dossier ouvert, de l’onglet Edge DevTools et de l’onglet Edge DevTools : navigateur , comme suit.

CSS

Grâce à l’édition de miroir CSS, vous pouvez modifier CSS dans l’onglet Edge DevTools, et il change automatiquement dans le ou le .html.css fichier source, ainsi que d’être reflété dans Edge DevTools : onglet Navigateur. DevTools vous permet de décider d’enregistrer ou non la modification, ce qui vous permet d’expérimenter.

Vous pouvez modifier CSS dans le .css fichier source ou .html , enregistrer la modification, puis recharger la page web dans Edge DevTools : onglet Navigateur , qui met également à jour l’onglet Edge DevTools .

HTML

Vous pouvez modifier l’arborescence DOM dans l’onglet Edge DevTools (par exemple, passer <h2>Success!</h2> à <h2>CSS Success!</h2>), puis appuyer sur Entrée, puis actualiser l’onglet Edge DevTools : navigateur pour voir la modification. (Cette opération ne modifie pas automatiquement le .html fichier source.)

Vous pouvez modifier le code HTML dans le .html fichier source, enregistrer la modification, puis recharger la page web dans Edge DevTools : onglet Navigateur , qui met également à jour l’onglet Edge DevTools .

Tâches prises en charge par les outils de développement

L’extension DevTools pour Visual Studio Code vous permet de :

Tâche Article
Démarrez une nouvelle instance de navigateur avec DevTools pour votre projet. Ouverture de DevTools et du navigateur DevTools
Émulez différents appareils et voyez votre projet dans différents modes d’affichage. Émulation d’appareil
Affichez la structure et la disposition DOM d’exécution de votre page à l’aide de l’outil Elements . Ouverture de fichiers sources à partir de l’outil Éléments
Analysez et modifiez les styles CSS de votre projet avec un aperçu en direct et des modifications en direct des fichiers sources de votre projet. Mettre à jour les fichiers .css à partir de l’outil Styles (CSS miroir modification)
Analyser le trafic du site à l’aide de l’outil Réseau . Intégration de l’outil réseau
Informations de journal, essayez JavaScript et accédez à la fenêtre/DOM à l’aide de l’outil Console . Intégration de la console
Inspectez les workers du stockage et du service à l’aide de l’outil Application . Intégration de l’outil d’application
Utilisez l’extension dans le workflow de débogage de Visual Studio Code. Intégration avec le débogage de Visual Studio Code

Vue d’ensemble des outils de l’extension DevTools

Les outils suivants sont inclus dans l’extension DevTools pour Visual Studio Code. Les articles suivants ne sont pas spécifiquement axés sur l’extension DevTools pour Visual Studio Code, mais sont conçus pour le navigateur Microsoft Edge DevTools.

Outil Objectif Article
Outil Éléments Inspectez, modifiez et déboguez votre HTML et CSS. Vous pouvez modifier dans l’outil tout en affichant les modifications en direct dans le navigateur. Déboguez votre HTML à l’aide de l’arborescence DOM, et inspectez et travaillez sur le CSS de votre page Web. Inspecter, modifier et déboguer du code HTML et CSS à l’aide de l’outil Elements
Outil console Une ligne de commande intelligente et riche dans DevTools. Un excellent outil compagnon à utiliser avec d’autres outils. Fournit un moyen puissant de créer des scripts de fonctionnalités, d’inspecter la page web actuelle et de manipuler la page web actuelle à l’aide de JavaScript. Présentation de la console
Outil réseau Utilisez l’outil Réseau pour vous assurer que les ressources sont téléchargées comme prévu. Examinez les propriétés d’une ressource individuelle, telles que les en-têtes HTTP, le contenu ou la taille. Inspecter l’activité réseau
Outil de l’application Utilisez l’outil Application pour gérer le stockage des pages d’application web, y compris le manifeste, les workers de service, le stockage local, les cookies, le stockage de cache et les services d’arrière-plan. L’outil Application pour gérer le stockage
Outil des problèmes L’outil Problèmes analyse automatiquement la page Web actuelle, signale les problèmes regroupés par type et fournit de la documentation pour aider à expliquer et à résoudre les problèmes. Rechercher et résoudre des problèmes à l’aide de l’outil Problèmes
Outil Conditions du réseau Utilisez l’outil Conditions réseau pour désactiver le cache du navigateur, définir la limitation du réseau, définir la chaîne de l’agent utilisateur et définir les encodage de contenu tels que deflate, gzip et br. Outil Conditions du réseau
Outil de blocage des requêtes de réseau Utilisez l’outil de blocage des requêtes réseau pour tester le blocage des demandes réseau vers un modèle d’URL spécifié et voir comment une page web se comporte. Outil de blocage des requêtes de réseau
Inspecter l’outil Utilisez l’outil Inspecter pour afficher des informations sur un élément dans une page web rendue. Lorsque l’outil Inspecter est actif, vous survolez les éléments de la page Web, et DevTools ajoute une superposition d’informations et une mise en surbrillance de grille sur la page Web. Analyser les pages à l’aide de l’outil Inspecter
Émulation d’appareil Utilisez l’outil d’émulation d’appareil , également appelé mode de simulation d’appareil ou mode d’appareil, pour estimer approximativement l’apparence et les réponses de votre page sur un appareil mobile. Émuler des appareils mobiles (émulation d’appareil)

Pour obtenir la liste de tous les outils inclus dans la version de DevTools du navigateur Microsoft Edge, consultez À propos de la liste des outils.

Voir aussi

Pages externes :

  • Dernière mise à jour :