Inspecter les demandes et les réponses à l’aide de Chrome DevTools

En un clin d’œil
Objectif: Afficher les demandes dans Chrome DevTools
Heure : 5 minutes
Plugins :DevToolsPlugin
Prérequis :configurer le proxy de développement

Par défaut, le proxy de développement affiche ses messages dans l’invite de commandes. Si vous utilisez le proxy de développement avec une application qui émet de nombreuses requêtes, il est difficile de trouver les messages qui vous intéressent. De plus, vous souhaiterez peut-être inspecter les demandes et les réponses interceptées par le proxy de développement.

Pour faciliter la recherche des messages qui vous intéressent, utilisez le plug-in DevToolsPlugin pour afficher les messages du proxy de développement dans Chrome DevTools.

Le DevToolsPlugin expose les messages du proxy de développement et des informations sur les requêtes et réponses interceptées dans Chrome DevTools.

Pour utiliser Chrome DevTools avec le proxy de développement :

1. Ouvrez le fichier devproxyrc.json stocké dans votre répertoire d’installation du proxy de développement. Vous pouvez également utiliser la commande devproxy config open.

2. Activez le DevToolsPlugin plug-in et ajoutez la devTools section de configuration. Les valeurs prises en charge preferredBrowser sont les suivantes : Edge, EdgeDev, Chrome.

   Le fichier devproxyrc.json complet ressemble à ceci :

   Fichier : devproxyrc.json

   {
     "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.0.0/rc.schema.json",
     "plugins": [
       {
         "name": "DevToolsPlugin",
         "enabled": true,
         "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
         "configSection": "devTools"
       }
     ],
     "devTools": {
       "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.0.0/devtoolsplugin.schema.json",
       "preferredBrowser": "Edge"
     }
   }
   

3. Enregistrez le fichier devproxyrc.json et démarrez le proxy de développement.

Inspecter les requêtes lorsque le proxy de développement s’exécute dans un conteneur

Lorsque vous exécutez Dev Proxy dans un conteneur, un conteneur de développement ou GitHub Codespaces, le plug-in ne peut pas lancer un navigateur sur votre ordinateur. Au lieu de cela, configurez le plug-in pour écouter sur un port fixe et enregistrer l’URL des outils de développement, puis ouvrez l’URL dans le navigateur sur votre ordinateur.

1. Dans la devTools section de configuration, définissez port sur un port fixe et launchBrowser sur false:

   Fichier : devproxyrc.json

   {
     "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.0.0/rc.schema.json",
     "plugins": [
       {
         "name": "DevToolsPlugin",
         "enabled": true,
         "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
         "configSection": "devTools"
       }
     ],
     "devTools": {
       "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.0.0/devtoolsplugin.schema.json",
       "port": 19229,
       "launchBrowser": false
     }
   }
   

2. Publier ou rediriger le port vers le même port sur votre machine. L’URL des outils de développement contient le numéro de port. Le port de votre ordinateur doit donc correspondre au port dans la configuration.

   • Si vous utilisez l’image Docker de Dev Proxy, publiez le port lorsque vous démarrez le conteneur :

     docker run --rm -it -p 8000:8000 -p 8897:8897 -p 19229:19229 -v ${PWD}:/config ghcr.io/dotnet/dev-proxy:latest
     

     L’image Docker démarre le proxy de développement avec --ip-address 0.0.0.0, de sorte que le plug-in écoute sur toutes les interfaces. Si vous exécutez Dev Proxy dans votre propre conteneur et publiez le port, démarrez également Dev Proxy avec --ip-address 0.0.0.0.

   • Si vous utilisez Dev Proxy avec Aspire, publiez le port sur la ressource de conteneur Dev Proxy :

     var devProxy = builder.AddDevProxyContainer("devproxy")
         .WithConfigFile("./devproxy.json")
         .WithCertFolder(".devproxy/cert")
         .WithConfigFolder(".devproxy/config")
         // publish the DevToolsPlugin port to the same port on the host
         .WithHttpEndpoint(port: 19229, targetPort: 19229, name: "devtools");
     

   • Si vous utilisez un conteneur de développement ou GitHub Codespaces dans Visual Studio Code, redirigez le port vers votre ordinateur.

3. Démarrez le proxy de développement. Le proxy de développement enregistre l’URL des outils de développement, par exemple :

   DevToolsPlugin available at devtools://devtools/bundled/inspector.html?ws=127.0.0.1:19229/<token>. Open this URL in Microsoft Edge or Google Chrome to inspect requests.
   

4. Copiez l’URL et ouvrez-la dans Microsoft Edge ou Google Chrome sur votre ordinateur.

Voir aussi

• DevToolsPlugin
• Modifier le niveau de journalisation
• Inspecter les demandes d’API émises par les services cloud