Fichier launch.json de l’extension DevTools

Visual Studio Code utilise un launch.json fichier pour définir les configurations de débogage. Pour utiliser l’extension DevTools, un launch.json fichier n’est nécessaire que si vous souhaitez utiliser le débogueur et que votre page web nécessite une exécution sur un serveur web, pas seulement sur un système de fichiers local. Dans la plupart des cas, la seule chose que vous devez savoir sur le contenu du fichier généré par launch.json DevTools (si vous choisissez de l’utiliser) est que vous devez entrer l’URL souhaitée dans la "url" chaîne à plusieurs endroits. Lisez cet article si vous souhaitez utiliser des configurations de débogage personnalisées et avancées.

Si vous souhaitez utiliser l’interface utilisateur de Visual Studio Code comme F5 pour démarrer les onglets DevTools avec le mode Débogage, votre dossier ouvert (espace de travail) doit contenir un fichier généré par DevTools (compatible DevTools) launch.json dans le .vscode répertoire.

Vous trouverez ci-dessous des détails sur le launch.json format de fichier. Normalement, vous n’avez pas besoin de modifier quoi que ce soit dans le fichier, sauf pour remplacer plusieurs instances de la chaîne d’URL, comme expliqué dans Ouverture de DevTools en cliquant sur le bouton Lancer le projet dans Ouverture de DevTools et le navigateur DevTools.

Où les chaînes de nom apparaissent dans l’interface utilisateur

La "name" chaîne de chaque configuration de débogage remplit les listes déroulantes à plusieurs endroits.

1. Sélectionnez Fichier>Fermer le dossier.

2. Sélectionnez Fichier>Ouvrir récent>C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html, cloné à l’étape 5 : Cloner le dépôt Demos dans Installation de l’extension DevTools pour Visual Studio Code.

   Supposons qu’aucun fichier n’existe launch.json dans le .vscode répertoire.

3. Sélectionnez Barre >d’activitéOutils >Microsoft Edge cliquez sur le bouton Générer launch.json.

4. Dans la barre>d’activités Explorer, double-cliquez pour index.html l’ouvrir.

5. Sélectionnez La barre> d’activitéExécuter et déboguer> cliquez sur le bouton Exécuter et déboguer.

   Dans la barre latérale Exécuter et déboguer en haut à gauche, les chaînes sont Launch Edge Headless et attachent DevTools et Launch Edge et attachent DevTools. En bas de la fenêtre Visual Studio Code, la chaîne est Launch Edge Headless et attachez DevTools. Il s’agit des noms de configurations composées dans le .json fichier, indiquant au débogueur Visual Studio Code d’ouvrir les deux onglets DevTools, ou bien l’onglet DevTools et un navigateur externe :

    "compounds": [
        {
            "name": "Launch Edge Headless and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge in headless mode",
                "Open Edge DevTools"
            ]
        },
        {
            "name": "Launch Edge and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge",
                "Open Edge DevTools"
            ]
        }
    ]
   

   

   Dans la console de débogage en bas à droite, la chaîne est Lancer Microsoft Edge en mode sans tête. Il s’agit d’une chaîne qui ne concerne pas l’onglet Edge DevTools , mais l’onglet Edge DevTools : Browser . Il s’agit du nom d’une configuration individuelle, et non d’une configuration composée :

       "configurations": [
        ...
        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge in headless mode",
            "request": "launch",
            "runtimeArgs": [
                "--headless",
                "--remote-debugging-port=9222"
            ],
            "url": "file://c:\\Users\\collabera\\Documents\\GitHub\\Demos\\demo-to-do\\index.html",
            "presentation": {
                "hidden": true
            }
        },
   

   

6. Dans la barre latérale Exécuter et déboguer , cliquez sur Démarrer le débogage. Les deux onglets DevTools s’ouvrent et Visual Studio Code passe en mode Débogage. Cette approche est l’interface utilisateur Visual Studio Code intégrée pour démarrer le débogueur, plutôt que l’interface utilisateur DevTools décrite dans Ouverture de DevTools et le navigateur DevTools.

Emplacement où le fichier launch.json est placé

1. Dans le volet Explorer de Visual Studio Code, le launch.json fichier est placé dans un .vscode dossier à la racine du dossier que vous avez ouvert.

   • Pour un dépôt, tel que le dépôt Demos, si vous ouvrez l’intégralité du dossier du dépôt, le bouton Générer launch.json crée un \.vscode\launch.json fichier près de la racine, pour l’ensemble du répertoire du dépôt.

   • Si vous ouvrez un dossier particulier et plus petit, tel que \Demos\demo-to-do\, le bouton Générer launch.json place un launch.json fichier dans ce dossier uniquement.

Visual Studio Code utilise un launch.json fichier pour configurer et personnaliser le débogueur. launch.json est un fichier de configuration du débogueur. Ce fichier contrôle également le navigateur web à utiliser conjointement avec le débogueur. Par exemple, lorsque vous testez votre page web en cliquant sur un bouton de la page web pour exécuter votre code JavaScript, le débogueur Visual Studio Code écoute le navigateur et effectue l’exécution du code JavaScript de la page web.

Vous trouverez ci-dessous une copie du launch.json après avoir cliqué sur le bouton Créer launch.json dans l’extension.

Il existe trois configurations et deux composés initialement définis par défaut :

• configurations- dans l’interface utilisateur Visual Studio Code, ces noms de configuration apparaissent dans l’interface utilisateur du débogueur :

  • Lancer Microsoft Edge : il s’agit d’une configuration de type « lancement ».

  • Lancez Microsoft Edge en mode sans tête : il s’agit d’une configuration de type « lancement ».

  • Ouvrez DevTools Edge : il s’agit d’une configuration de type « debug » (ou de type « attach ») .

• compounds- dans l’interface utilisateur Visual Studio Code, celles-ci apparaissent dans la barre d’outils Débogage :

  • Lancer Edge Headless et attacher DevTools

  • Lancer Edge et attacher DevTools

IntelliSense et autocomplétion

Pointez sur un nom ou une valeur JSON pour afficher une info-bulle :

Commencez à taper des guillemets doubles pour afficher la liste de saisie automatique des propriétés et descriptions JSON disponibles :

Lors de l’enregistrement du fichier, veillez à fournir un code JSON bien formé, y compris des virgules.

Types de configuration : lancement et débogage

Ces deux types distincts de configurations sont tous deux définis dans ce .json fichier pour le débogueur Visual Studio Code.

Configurations

Les sections suivantes du launch.json fichier proviennent de la version 2.1.1 de l’extension, dans un emplacement d’installation par défaut pour Visual Studio Code sur Windows.

Configuration 1 : Lancer Microsoft Edge

Il s’agit d’une configuration de type « launch browser ». Cette configuration contrôle le composant de navigateur, par .html exemple le fichier à afficher, lorsque l’option headless n’est pas sélectionnée dans l’interface utilisateur.

Ce nom de configuration n’apparaît pas directement dans l’interface utilisateur. Cette configuration est utilisée par une configuration composée ci-dessous.

        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge",
            "request": "launch",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ],
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        },

Configuration 2 : Lancer Microsoft Edge en mode sans tête

Il s’agit d’une configuration de type « launch browser ». Cette configuration contrôle le composant de navigateur, par .html exemple le fichier à afficher, quand headless est sélectionné dans la page Paramètres DevTools > Edge, comme c’est le cas par défaut.

Ce nom de configuration Lancer Microsoft Edge en mode sans tête s’affiche dans l’interface utilisateur, par exemple dans la barre d’outils Débogage et dans la console de débogage. Si vous lancez plusieurs instances, un nombre est ajouté aux instances supplémentaires dans l’interface utilisateur, par exemple Lancer Microsoft Edge en mode sans tête 2. Cette configuration est utilisée par une configuration composée ci-dessous.

        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge in headless mode",
            "request": "launch",
            "runtimeArgs": [
                "--headless",
                "--remote-debugging-port=9222"
            ],
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        },

Configuration 3 : Ouvrir DevTools Edge

Il s’agit d’une configuration de type « débogueur d’attachement ». Cette configuration contrôle l’onglet DevTools Edge (volet), par exemple le fichier qui .html remplit l’outil Éléments .

Ce nom de configuration n’apparaît pas directement dans l’interface utilisateur. Cette configuration est utilisée par une configuration composée ci-dessous.

        {
            "type": "vscode-edge-devtools.debug",
            "name": "Open Edge DevTools",
            "request": "attach",
            "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", // Provide your project's url to finish configuring
            "presentation": {
                "hidden": true
            }
        }

Configurations composées

La compounds section de définit des launch.json configurations composées.

Chaque configuration composée fait référence à deux configurations : une configuration pour ouvrir l’onglet Edge DevTools dans Visual Studio Code, et l’autre configuration pour ouvrir l’onglet Edge DevTools : Browser (parfois appelé screencast ou headless browser), ou à la fois l’onglet Edge DevTools : Browser et l’intégralité de la fenêtre du navigateur Microsoft Edge.

Dans le volet Outils Microsoft Edge , dans la section Cibles , à droite d’une cible, cliquez sur le bouton Activer/désactiver la capture d’écran . L’onglet (volet) Edge DevTools : Browser incorporé sans en-tête se ferme ou s’ouvre.

Dans le volet Outils Microsoft Edge , dans la section Cibles , sur le côté droit d’une cible, cliquez sur attacher et ouvrez le bouton Outils Microsoft Edge .

Configuration composée 1 : lancer Edge Headless et attacher DevTools

Cette configuration composée lance les composants suivants :

• L’onglet Edge DevTools : Browser (volet) dans Visual Studio Code. Ceci est défini par la configuration qui a le name « Lancer Microsoft Edge en mode sans tête », ci-dessus.

• Onglet Edge DevTools (volet) dans Visual Studio Code. Cela est défini par la configuration qui contient « name Open Edge DevTools », ci-dessus.

        {
            "name": "Launch Edge Headless and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge in headless mode",
                "Open Edge DevTools"
            ]
        },

Le nom de cette configuration composée, Launch Edge Headless et Attach DevTools, apparaît dans la barre d’outils Débogage de Visual Studio Code.

Configuration composée 2 : Lancer Edge et attacher DevTools

Cette configuration composée lance les composants suivants :

• L’onglet Edge DevTools : Browser (volet) dans Visual Studio Code. Cela est défini par la configuration qui a le name « Lancer Microsoft Edge », ci-dessus.

• Fenêtre du navigateur Microsoft Edge. Cela est défini par la configuration qui a le name « Lancer Microsoft Edge », ci-dessus.

• Onglet Edge DevTools (volet) dans Visual Studio Code. Cela est défini par la configuration qui contient « name Open Edge DevTools », ci-dessus.

        {
            "name": "Launch Edge and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge",
                "Open Edge DevTools"
            ]
        }

Le nom de cette configuration composée, Launch Edge et Attach DevTools, apparaît dans l’interface utilisateur dans la barre d’outils Débogage de Visual Studio Code.

Ajout de configurations

Vous pouvez définir vos propres configurations de débogage supplémentaires. Cliquez sur le bouton Ajouter une configuration .

Voir aussi

• Ouverture de DevTools et du navigateur DevTools.
• Prise en main de l’extension DevTools pour Visual Studio Code
• Extension Microsoft Edge DevTools pour Visual Studio Code

launch.json pour d’autres plateformes

• Configurez le débogage C/C++ dans la documentation Visual Studio Code.
• Configurez le débogueur dans Utilisation de React dans Visual Studio Code dans la documentation Visual Studio Code.