Partager via

Déboguer avec le proxy de développement

En un clin d’œil
Objectif: Déboguer votre application pendant que le proxy de développement simule les erreurs d’API
Heure : 15 minutes
Plugins :GenericRandomErrorPlugin
Prérequis :configurer le proxy de développement, VS Code

Lorsque vous générez des applications qui appellent des API, vous devez vous assurer que votre code gère correctement les erreurs. En combinant le proxy de développement avec le débogueur de Visual Studio (VS) Code, vous pouvez simuler des erreurs d'API et parcourir votre code de gestion des erreurs pour vérifier qu'il fonctionne correctement.

Vue d’ensemble

Le débogage avec le proxy de développement implique trois étapes :

  1. Configurer VS Code pour acheminer les requêtes HTTP via le proxy de développement
  2. Configurer le proxy de développement pour simuler des erreurs spécifiques
  3. Définir des points d’arrêt dans votre code de gestion des erreurs et déboguer

Configurer VS Code pour le débogage avec le proxy de développement

La façon dont vous configurez VS Code dépend du langage de programmation que vous utilisez. Les sections suivantes vous montrent comment configurer VS Code pour Node.js, .NET et les applications Python.

Node.js

Pour déboguer une application Node.js avec le proxy de développement, configurez le fichier pour définir les variables d’environnement proxy et désactiver la vérification du certificat TLS/SSL.

Fichier : .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug with Dev Proxy",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js",
      "env": {
        "NODE_ENV": "development",
        "http_proxy": "http://127.0.0.1:8000",
        "https_proxy": "http://127.0.0.1:8000",
        "GLOBAL_AGENT_HTTP_PROXY": "http://127.0.0.1:8000",
        "NODE_TLS_REJECT_UNAUTHORIZED": "0"
      }
    }
  ]
}

Important

Le paramètre désactive la vérification du certificat TLS/SSL. Utilisez uniquement ce paramètre pendant le développement. Pour une approche plus sécurisée, utilisez cette méthode pour approuver directement le certificat du proxy de développement :

macOS/Linux :

"NODE_EXTRA_CA_CERTS": "${env:HOME}/.devproxy/rootCert.pem"

Windows :

"NODE_EXTRA_CA_CERTS": "${env:USERPROFILE}\\.devproxy\\rootCert.pem"

La variable est utilisée par le package, qui fournit la prise en charge du proxy pour de nombreuses bibliothèques HTTP Node.js. Pour plus d’informations sur la configuration de différentes bibliothèques HTTP, consultez Utiliser le proxy de développement avec des applications Node.js.

.NET

.NET applications utilisent automatiquement les paramètres de proxy système. Pour déboguer une application .NET avec le proxy de développement, vous n'avez généralement pas besoin de définir de variables d'environnement. Créer une configuration de débogage de base :

Fichier : .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with Dev Proxy",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "console": "internalConsole",
      "stopAtEntry": false
    }
  ]
}

Si votre application ne récupère pas le proxy système, définissez explicitement les variables d’environnement proxy :

Fichier : .vscode/launch.json (avec des paramètres de proxy explicites)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with Dev Proxy",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "console": "internalConsole",
      "stopAtEntry": false,
      "env": {
        "http_proxy": "http://127.0.0.1:8000",
        "https_proxy": "http://127.0.0.1:8000"
      }
    }
  ]
}

Conseil / Astuce

Sur Windows et macOS, .NET approuve automatiquement le certificat du proxy de développement si vous l’avez installé en tant que certificat racine approuvé pendant la configuration du proxy Dev. Sur Linux, vous devrez peut-être approuver le certificat manuellement. Consultez la documentation de votre distribution pour configurer des certificats approuvés.

Python

Pour déboguer une application Python avec le proxy de développement, configurez le fichier launch.json pour définir les variables d’environnement proxy. La configuration dépend de l’utilisation de la bibliothèque ou d’autres bibliothèques HTTP.

Fichier : .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with Dev Proxy",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}/main.py",
      "console": "integratedTerminal",
      "env": {
        "HTTP_PROXY": "http://127.0.0.1:8000",
        "HTTPS_PROXY": "http://127.0.0.1:8000",
        "REQUESTS_CA_BUNDLE": ""
      }
    }
  ]
}

Important

La définition d’une chaîne vide indique à la bibliothèque d’ignorer la vérification du certificat TLS/SSL. Utilisez uniquement ce paramètre pendant le développement.

Pour une approche plus sécurisée, pointez sur le certificat du proxy de développement :

macOS/Linux :

"REQUESTS_CA_BUNDLE": "${env:HOME}/.devproxy/rootCert.pem"

Windows :

"REQUESTS_CA_BUNDLE": "${env:USERPROFILE}\\.devproxy\\rootCert.pem"

Si vous utilisez la bibliothèque, configurez la vérification TLS/SSL à l’aide de la variable d’environnement à la place :

{
  "env": {
    "HTTP_PROXY": "http://127.0.0.1:8000",
    "HTTPS_PROXY": "http://127.0.0.1:8000",
    "TLS/SSL_CERT_FILE": "${env:HOME}/.devproxy/rootCert.pem"
  }
}

Configurer le proxy de développement pour simuler des erreurs

Pour déboguer le traitement des erreurs, configurez le proxy de développement pour renvoyer des erreurs spécifiques lorsque votre application interagit avec des API. Utilisez GenericRandomErrorPlugin pour simuler des erreurs telles que ou .

Simuler une erreur 429 (Trop de requêtes)

Créez un fichier de configuration du proxy de développement qui simule le ralentissement :

Fichier : devproxyrc.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.2.0/rc.schema.json",
  "plugins": [
    {
      "name": "GenericRandomErrorPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
      "configSection": "errorsConfig"
    }
  ],
  "urlsToWatch": [
    "https://api.contoso.com/*"
  ],
  "rate": 100,
  "errorsConfig": {
    "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.2.0/genericrandomerrorplugin.schema.json",
    "errorsFile": "errors.json"
  }
}

Créez le fichier d’erreurs avec les réponses d’erreur spécifiques :

Fichier : errors.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.2.0/genericrandomerrorplugin.errorsfile.schema.json",
  "errors": [
    {
      "request": {
        "url": "https://api.contoso.com/*"
      },
      "responses": [
        {
          "statusCode": 429,
          "headers": [
            {
              "name": "content-type",
              "value": "application/json"
            },
            {
              "name": "Retry-After",
              "value": "60"
            }
          ],
          "body": {
            "error": {
              "code": "TooManyRequests",
              "message": "Rate limit exceeded. Retry after 60 seconds."
            }
          }
        }
      ]
    }
  ]
}

Conseil / Astuce

Définissez cette option pour effectuer l’échec de chaque requête afin d’atteindre constamment votre code de gestion des erreurs lors du débogage. Réduisez le taux lorsque vous souhaitez tester des erreurs intermittentes.

Simuler une erreur de serveur interne 500

Pour simuler des erreurs de serveur, ajoutez une autre réponse d’erreur :

Fichier : errors.json (plusieurs erreurs)

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.2.0/genericrandomerrorplugin.errorsfile.schema.json",
  "errors": [
    {
      "request": {
        "url": "https://api.contoso.com/*"
      },
      "responses": [
        {
          "statusCode": 429,
          "headers": [
            {
              "name": "content-type",
              "value": "application/json"
            },
            {
              "name": "Retry-After",
              "value": "60"
            }
          ],
          "body": {
            "error": {
              "code": "TooManyRequests",
              "message": "Rate limit exceeded. Retry after 60 seconds."
            }
          }
        },
        {
          "statusCode": 500,
          "headers": [
            {
              "name": "content-type",
              "value": "application/json"
            }
          ],
          "body": {
            "error": {
              "code": "InternalServerError",
              "message": "An unexpected error occurred."
            }
          }
        }
      ]
    }
  ]
}

Lorsque vous définissez plusieurs réponses d’erreur, le proxy de développement sélectionne aléatoirement un pour chaque requête interceptée.

Déboguer votre code de gestion des erreurs

Avec VS Code et le proxy de développement configurés, vous pouvez désormais déboguer votre code de gestion des erreurs.

Étape 1 : Définir des points d’arrêt

Ouvrez votre code source et définissez des points d’arrêt dans votre code de gestion des erreurs. Par exemple, dans une application Node.js :

async function fetchData() {
  try {
    const response = await fetch('https://api.contoso.com/data');
    
    if (!response.ok) {
      // Set a breakpoint here to debug error responses
      throw new Error(`HTTP error: ${response.status}`);
    }
    
    return await response.json();
  } catch (error) {
    // Set a breakpoint here to debug exceptions
    console.error('Failed to fetch data:', error);
    throw error;
  }
}

Étape 2 : Démarrer le proxy de développement

Démarrez le proxy de développement avec votre fichier de configuration :

devproxy --config-file devproxyrc.json

Étape 3 : Démarrer le débogage dans VS Code

  1. Ouvrir VS Code
  2. Appuyez sur F5 ou sélectionnez Démarrer le débogage
  3. Lorsque votre application effectue un appel d’API, le proxy de développement l’intercepte et retourne une erreur
  4. VS Code s’interrompt au niveau de votre point d’arrêt
  5. Utiliser les contrôles de débogage pour parcourir votre code et inspecter des variables

Étape 4 : Inspecter l’erreur

Lorsque VS Code s’interrompt au niveau de votre point d’arrêt, utilisez le panneau de débogage pour :

  • Afficher le code d’état de la réponse d’erreur et le message
  • Vérifier les valeurs des variables locales
  • Passez en revue votre logique de nouvelle tentative
  • Vérifiez que vos messages d’erreur sont conviviales

Démarrer et arrêter automatiquement le proxy de développement

Pour simplifier votre flux de travail de débogage, configurez VS Code pour démarrer automatiquement le proxy de développement lorsque vous commencez le débogage et l’arrêtez lorsque vous avez terminé. Installez l’extension Dev Proxy Toolkit et configurez les tâches :

Fichier : .vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "devproxy-start",
      "type": "devproxy",
      "command": "start",
      "args": [
        "--config-file",
        "devproxyrc.json"
      ],
      "isBackground": true,
      "problemMatcher": "$devproxy-watch"
    },
    {
      "label": "devproxy-stop",
      "type": "devproxy",
      "command": "stop"
    }
  ]
}

Pour utiliser ces tâches, mettez à jour vos éléments suivants :

Fichier : .vscode/launch.json (Node.js avec démarrage automatique)

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug with Dev Proxy",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js",
      "preLaunchTask": "devproxy-start",
      "postDebugTask": "devproxy-stop",
      "env": {
        "NODE_ENV": "development",
        "http_proxy": "http://127.0.0.1:8000",
        "https_proxy": "http://127.0.0.1:8000",
        "GLOBAL_AGENT_HTTP_PROXY": "http://127.0.0.1:8000",
        "NODE_TLS_REJECT_UNAUTHORIZED": "0"
      }
    }
  ]
}

Conseils pour le débogage efficace

  • Pour atteindre constamment vos points d’arrêt, définissez-les dans votre configuration du proxy de développement afin que chaque requête échoue.
  • Pour comprendre comment votre code gère une erreur spécifique, utilisez une seule réponse d’erreur lors du débogage.
  • Pour vérifier que votre code respecte la limitation de débit, vérifiez qu'il analyse et respecte l'en-tête pendant le débogage des erreurs 429.
  • Pour vous assurer que votre code gère correctement les réponses inhabituelles, utilisez le proxy de développement pour simuler des cas de périphérie tels que json mal formé ou des en-têtes manquants.
  • Pour arrêter uniquement sur des erreurs spécifiques, utilisez des points d’arrêt conditionnels dans VS Code en cliquant avec le bouton droit sur un point d’arrêt et en ajoutant une condition comme .

Voir aussi

  • Last updated on