Partager via

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 1 : Installer DevTools et les prérequis

  1. Si ce n’est déjà fait, suivez les étapes décrites dans Installation de l’extension DevTools pour Visual Studio Code, puis continuez ci-dessous. Vous n’avez pas besoin d’installer et de démarrer un serveur web pour le présent tutoriel, mais c’est recommandé.

É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 :

  1. Dans Visual Studio Code, sélectionnez Fichier>Ouvrir le dossier.

  2. 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 :

    Ouvrir le dossier : démonstration à faire

  3. Sélectionnez Barre>d’activité Explorer (icône Explorer) > cliquez avec le bouton index.html droit, puis sélectionnez Ouvrir avec Edge>Open Browser with DevTools :

    Cliquez avec le bouton droit sur > Ouvrir le navigateur avec 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 :

    Les deux onglets DevTools Edge et la barre d’outils Déboguer

É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.

  1. Dans le coin supérieur gauche de l’onglet Edge DevTools , cliquez sur le bouton Activer/désactiver la capture d’écran :

    Bouton « Activer la capture d’écran » sous l’onglet « Edge DevTools »

    L’onglet Edge DevTools : Browser se ferme.

  2. Sous l’onglet Edge DevTools , cliquez à nouveau sur le bouton Activer/désactiver la capture d’écran .

    L’onglet Edge DevTools : Browser s’ouvre.

  3. En haut à droite de l’onglet Edge DevTools : Browser , cliquez sur le bouton Fermer DevTools :

    Bouton « Fermer DevTools » sous l’onglet « Edge DevTools : Navigateur »

  4. En haut à droite de l’onglet Edge DevTools : Browser , cliquez sur le bouton Ouvrir DevTools .

  5. 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.

  1. Dans l’outil Éléments , sous l’onglet Styles , cliquez sur une valeur CSS, telle que la taille de police du corps.

  2. 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 :

    Modification miroir CSS

  3. Fermez le .css fichier. Visual Studio Code vous invite à enregistrer les modifications.

  4. Cliquez sur le bouton Ne pas enregistrer .

Étape 5 : Parcourir pas à pas le code JavaScript dans le débogueur

  1. Sélectionnez Barre d’activité> Explorer (icône Explorer dans la barre d’activité).

  2. 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 :

    Débogage de l’application de démonstration

  3. 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.

  4. 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 :

    Exécution pas à pas dans JavaScript dans l’application de démonstration

  5. 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.

  6. 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 :

  1. 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 :

    Bouton Arrêter dans la barre d’outils Déboguer

    L’onglet DevTools Edge se ferme et l’onglet Edge DevTools : Browser se ferme.

Voir aussi :

Vous avez terminé le tutoriel « Bien démarrer en cliquant avec le bouton droit sur un fichier HTML ». Il est recommandé d’effectuer également les autres tutoriels . Consultez Prise en main de l’extension DevTools pour Visual Studio Code.

Voir aussi

Github: