Visual Studio pour le développement web

Microsoft Visual Studio est un environnement de développement intégré (IDE). Utilisez-le pour modifier, déboguer, générer et publier vos applications web. Visual Studio est un programme riche en fonctionnalités qui peut être utilisé pour de nombreux aspects de votre développement web.

En plus de l’éditeur et du débogueur standard fournis par la plupart des IDE, Visual Studio inclut des fonctionnalités pour faciliter votre processus de développement, notamment :

• Compilateurs.
• Outils de saisie semi-automatique du code.
• Concepteurs graphiques.
• Et bien d’autres fonctionnalités.

Si vous n’utilisez pas déjà Visual Studio, accédez à Télécharger Visual Studio pour le télécharger.

Actuellement, Visual Studio 2019 prend en charge le débogage de JavaScript dans Microsoft Edge pour vos applications ASP.NET Framework et ASP.NET Core. Pour utiliser Visual Studio pour déboguer Microsoft Edge, procédez comme suit.

Lancer Microsoft Edge

Suivez les étapes de cette section pour utiliser Visual Studio pour effectuer les opérations suivantes :

• Créez votre application ASP.NET et ASP.NET Core.
• Démarrez un serveur web.
• Lancez Microsoft Edge.
• Connectez le débogueur Visual Studio avec un seul bouton.

Le flux de travail simplifié vous permet de déboguer JavaScript qui s’exécute dans Microsoft Edge directement à partir de votre IDE.

Créer une application web ASP.NET Core

Tout d’abord, créez une application web ASP.NET Core, comme suit :

1. Ouvrez Visual Studio 2019 et sélectionnez Créer un projet.

2. Dans la zone de recherche de l’écran suivant, entrez react.

3. Sélectionnez ASP.NET Core avec React.js dans la liste des modèles, puis Suivant.

Ce modèleReact.js spécifie comment intégrer React.js à une application ASP.NET Core.

Vous avez maintenant créé un projet pour une application web ASP.NET Core.

Lancer Microsoft Edge à partir de Visual Studio

Ensuite, exécutez et déboguez le projet d’application web ASP.NET Core dans Visual Studio, comme suit :

1. Ouvrez ClientApp/src/components/Counter.js.

2. Sélectionnez la liste déroulante en regard du bouton vert Lecture et IIS Express.

   

3. Sélectionnez Débogage de> scriptactivé.

   

4. Dans la même liste déroulante, sélectionnez Navigateur> web le canal d’aperçu de Microsoft Edge que vous souhaitez que Visual Studio lance, par exemple, Canary, Dev ou Beta. Si vous n’utilisez pas encore l’un des canaux de préversion de Microsoft Edge, accédez à Télécharger les canaux Microsoft Edge Insider pour en télécharger un.

   

5. Sélectionnez le bouton vert Lecture . Visual Studio génère votre application, démarre le serveur web, lance Microsoft Edge et accède à ou au https://localhost:44362/ port spécifié dans launchSettings.json.

   

Poursuivez avec les étapes ci-dessous.

Déboguer du code JavaScript en cours d’exécution dans Microsoft Edge

1. Revenez à Visual Studio pour définir un point d’arrêt.

2. Dans Counter.js, définissez un point d’arrêt sur la ligne 13 en sélectionnant la gouttière en regard de la ligne.

   

3. Revenez à la instance de Microsoft Edge lancée par Visual Studio.

4. Sélectionnez Compteur dans le menu de navigation en haut de la page web, puis incrémenter.

   

5. Le débogueur JavaScript dans Visual Studio atteint le point d’arrêt que vous avez défini dans Counter.js. Visual Studio met désormais en pause le runtime de JavaScript en cours d’exécution dans Microsoft Edge et vous pouvez parcourir le script ligne par ligne.

Dans l’approche ci-dessus, vous avez lancé Microsoft Edge à partir de Visual Studio. Vous pouvez également attacher le débogueur Visual Studio à un instance de Microsoft Edge déjà en cours d’exécution, comme décrit ci-dessous.

L’exemple n’était qu’une démonstration mineure des fonctionnalités disponibles dans Visual Studio. Pour plus d’informations sur les fonctionnalités de Visual Studio 2019, consultez la documentation de Visual Studio.

Attacher le débogueur Visual Studio à un instance en cours d’exécution de Microsoft Edge

Pour attacher le débogueur Visual Studio à un instance de Microsoft Edge qui est déjà en cours d’exécution :

1. Vérifiez qu’aucune instance de Microsoft Edge n’est en cours d’exécution.

2. À partir de votre ligne de commande, exécutez la commande suivante :

   start msedge --remote-debugging-port=9222
   

3. Dans Visual Studio, sélectionnez Déboguer>Attacher au processus ou Ctrl+Alt+P.

   

4. Dans la boîte de dialogue Attacher au processus, définissezType de connexion sur Chrome devtools protocol websocket (aucune authentification) .

5. Dans la zone de texte Cible de connexion , tapez http://localhost:9222/ , puis appuyez sur Entrée.

6. Passez en revue la liste des onglets ouverts que vous avez dans Microsoft Edge répertoriés dans la section Processus disponibles .

   

7. Sélectionnez l’onglet que vous souhaitez déboguer dans la liste, puis sélectionnez Attacher.

8. Dans la boîte de dialogue Sélectionner le type de code, sélectionnez JavaScript (Microsoft Edge - Chromium),puis ok.

Le débogueur Visual Studio est maintenant attaché à Microsoft Edge. Vous pouvez suspendre l’exécution de JavaScript, définir des points d’arrêt et afficher console.log() des instructions directement dans la fenêtre Sortie de débogage de Visual Studio.

Extension DevTools Edge pour Visual Studio

Déboguez vos projets ASP.NET dans Visual Studio avec les outils de développement Edge. Vous pouvez incorporer les outils de développement Microsoft Edge dans Microsoft Visual Studio pour déboguer vos projets ASP.NET en direct. Téléchargez les outils de développement Microsoft Edge pour Visual Studio.

Pour utiliser l’extension :

1. Vérifiez que Visual Studio 2022 et la charge de travail ASP.NET sont installés.

2. Configurez Web Live Preview comme Web Forms Designer par défaut, comme décrit dans la page ci-dessus.

3. Ouvrez un projet ASP.NET.

4. Ouvrez une page web du projet dans la fenêtre Création .

5. Dans le coin supérieur gauche de la fenêtre Création , cliquez sur le bouton Ouvrir DevTools Edge () :

Edge DevTools pour Visual Studio s’ouvre avec l’outil Éléments sélectionné :

L’outil Réseau est également ouvert par défaut :

L’outil Inspecter () et la capture d’écran bascule () sont disponibles, et le menu Autres outils () propose les outils Problèmes, Conditions réseau et Blocage des requêtes réseau :

Voir aussi :

• Outils de développement Edge pour Visual Studio, sur Visual Studio DevBlogs.

Prise de contact avec l’équipe Microsoft Visual Studio

Les équipes Microsoft Visual Studio et Microsoft Edge souhaitent en savoir plus sur la façon dont vous utilisez JavaScript dans Visual Studio. Pour envoyer vos commentaires, sélectionnez l’icône Envoyer des commentaires dans Visual Studio ou tweetez @VisualStudio and @EdgeDevTools.