Commencez en cliquant avec le bouton droit sur un fichier HTML
Article
Utilisez ce tutoriel pour découvrir comment ouvrir et fermer DevTools en cliquant avec le bouton droit sur un .html fichier de démonstration à faire dans le Explorer de Visual Studio Code, sans avoir à exécuter un serveur web.
Étape 2 : Démarrer DevTools en cliquant avec le bouton droit sur un fichier HTML
Cliquer avec le bouton droit sur un .html fichier dans le Explorer de Visual Studio Code est le moyen main d’ouvrir DevTools lorsque votre page web ne nécessite pas d’exécution sur un serveur web.
Contrairement au bouton Lancer l’instance , cette approche ouvre DevTools en mode débogage.
Contrairement au bouton Lancer le projet que nous utiliserons ultérieurement, cette approche ne vous oblige pas à générer un launch.json fichier.
Nous allons le démontrer en ouvrant l’application web de démonstration à faire :
Dans Visual Studio Code, sélectionnez Fichier>Ouvrir le dossier.
Accédez au répertoire où vous avez cloné le dépôt Demos, ouvrez le répertoire spécifique de l’application de démonstration à faire , par C:\Users\username\Documents\GitHub\Demos\demo-to-do\exemple , puis cliquez sur le bouton Sélectionner un dossier :
Sélectionnez Barre>d’activité Explorer () > cliquez avec le bouton index.html droit, puis sélectionnez Ouvrir avec Edge>Open Browser with DevTools :
L’onglet Edge DevTools s’ouvre .
L’onglet Edge DevTools : Browser s’ouvre, affichant la page web sur laquelle vous avez cliqué avec le bouton droit.
La barre d’outils Déboguer de Visual Studio Code s’ouvre, la console de débogage s’ouvre en bas et le volet Exécuter s’ouvre. Ces fonctionnalités indiquent que Visual Studio Code est en mode débogage :
Étape 3 : Organiser les onglets
Pour économiser de l’espace, utilisez le bouton Fermer DevTools ou Ouvrir DevTools et le bouton Basculer la capture d’écran pour activer (ouvrir ou fermer) les onglets DevTools.
Dans le coin supérieur gauche de l’onglet Edge DevTools , cliquez sur le bouton Activer/désactiver la capture d’écran :
L’onglet Edge DevTools : Browser se ferme.
Sous l’onglet Edge DevTools , cliquez à nouveau sur le bouton Activer/désactiver la capture d’écran .
L’onglet Edge DevTools : Browser s’ouvre.
En haut à droite de l’onglet Edge DevTools : Browser , cliquez sur le bouton Fermer DevTools :
En haut à droite de l’onglet Edge DevTools : Browser , cliquez sur le bouton Ouvrir DevTools .
Faites glisser l’onglet Edge DevTools : Browser pour l’ancrer n’importe où dans Visual Studio Code, par exemple en le regroupant avec l’éditeur de code source.
Étape 4 : Modifier css dans DevTools, en mettant à jour automatiquement le fichier .css
Sous l’onglet Edge DevTools, sous l’onglet Styles de l’outil >Éléments, vous pouvez modifier les sélecteurs, les règles et les valeurs CSS. La case à cocher CSS miroir modification est cochée par défaut. Le .css fichier est donc automatiquement modifié, mais les modifications ne sont pas enregistrées, ce qui vous permet de décider d’enregistrer les modifications.
Dans l’outil Éléments , sous l’onglet Styles , cliquez sur une valeur CSS, telle que la taille de police du corps.
Modifiez la valeur CSS, par exemple en utilisant la roulette de la souris ou en appuyant sur flèche haut et flèche bas. Le fichier associé .css s’ouvre, par to-do-styles.css exemple et fait défiler jusqu’à la ligne qui définit la valeur CSS, et modifie automatiquement le .css fichier, mais n’enregistre pas les modifications :
Fermez le .css fichier. Visual Studio Code vous invite à enregistrer les modifications.
Cliquez sur le bouton Ne pas enregistrer .
Étape 5 : Parcourir pas à pas le code JavaScript dans le débogueur
Sélectionnez Barre d’activité> Explorer ().
Dans le répertoire de démonstration, cliquez sur to-do.js pour l’ouvrir. Faites défiler jusqu’à la changeTask fonction, puis cliquez à gauche d’un numéro de ligne pour définir un point d’arrêt :
Si la barre latérale Exécuter et déboguer n’est pas affichée, sélectionnez Afficherl’exécution>. La barre latérale Exécuter et déboguer inclut le volet Espion et d’autres volets du débogueur.
Dans l’application de démonstration affichée sous l’onglet Edge DevTools : Browser , entrez une tâche, telle que test. Le débogueur de Visual Studio Code s’interrompt au point d’arrêt dans le to-do.js fichier :
Dans la barre d’outils Déboguer, ou à l’aide du menu Exécuter ou en appuyant sur les touches, parcourez deux lignes de code dans to-do.js.
Dans l’application de démonstration affichée sous l’onglet Edge DevTools : Browser , cliquez sur le cercle « terminé » en regard de la tâche de test. Le débogueur de Visual Studio Code s’interrompt au point d’arrêt dans le to-do.js fichier.
Étape 6 : Fermer DevTools
Pour mettre fin au débogage et fermer les onglets DevTools Edge :
Dans la barre d’outils Déboguer, cliquez sur le bouton Arrêter (Maj+F5). Ou, dans le menu Exécuter , sélectionnez Arrêter le débogage :
L’onglet DevTools Edge se ferme et l’onglet Edge DevTools : Browser se ferme.
Entraînez-vous à effectuer les premières étapes du développement web en créant un projet web simple dans Visual Studio Code, contenant une page web, un fichier CSS et un fichier JavaScript. Découvrez comment utiliser les outils de développement dans votre navigateur pour vérifier votre travail.
Installation de l’extension Outils de développement Microsoft Edge pour Visual Studio Code, clonage du dépôt Demos et configuration d’un serveur localhost pour utiliser le dépôt Demos.
Ouverture de l’onglet Edge DevTools et de l’onglet Edge DevTools : Browser (un navigateur incorporé) dans l’extension Outils de développement Microsoft Edge pour Visual Studio Code.