Partager via

Visual Studio pour le développement web

  • Article

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.

Créer une application web ASP.NET Core avec React.js

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.

    Liste déroulante en regard du bouton vert Lecture et IIS Express

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

    Activer le débogage de script dans Visual Studio

  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 à Devenir un Microsoft Edge Insider pour en télécharger un.

    Sélectionnez le canal de préversion de Microsoft Edge que vous souhaitez que Visual Studio lance

  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.

    Microsoft Edge démarre à partir de Visual Studio

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.

    Sélectionnez la gouttière en regard de la ligne 13 dans Counter.js pour définir un point d’arrêt dans Visual Studio

  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.

    Page Compteur dans notre application web ASP.NET Core

  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.

Visual Studio suspend l’exécution de JavaScript dans Microsoft Edge

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.

    Sélection de « Déboguer > attacher au processus » dans Visual Studio

  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 .

    Configuration de la boîte de dialogue « Attacher au processus » dans Visual Studio

  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 Microsoft Edge Developers Tools pour Visual Studio (PRÉVERSION) à partir de Visual Studio Marketplace.

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 (icône Ouvrir DevTools Edge) :

Un projet ASP.NET, ouvrant DevTools Edge

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

Outils de développement Microsoft Edge pour Visual Studio : Outil Éléments de DevTools

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

Outils de développement Microsoft Edge pour Visual Studio : Outil réseau de DevTools

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

Fenêtre Edge DevTools de Visual Studio, non attachée

Voir aussi :

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.

Icône Envoyer des commentaires dans Visual Studio

Voir également

Externe: