Bagikan melalui

Debug dengan Proksi Dev

Sekilas
Tujuan: Debug aplikasi Anda saat Dev Proxy mensimulasikan kesalahan API
Waktu: 15 menit
Plugins:GenericRandomErrorPlugin
Prasyarat:Menyiapkan Proksi Dev, Visual Studio Code

Saat Anda membuat aplikasi yang memanggil API, Anda perlu memastikan kode Anda menangani kesalahan dengan benar. Dengan menggabungkan Dev Proxy dengan debugger Kode Visual Studio (VS), Anda dapat mensimulasikan kesalahan API dan menelusuri kode penanganan kesalahan Anda untuk memverifikasi bahwa kode tersebut berfungsi dengan benar.

Gambaran Umum

Debugging dengan Dev Proxy melibatkan tiga langkah:

  1. Mengonfigurasi Visual Studio Code untuk merutekan permintaan HTTP melalui Dev Proxy
  2. Mengonfigurasi Dev Proxy untuk mensimulasikan kesalahan tertentu
  3. Atur breakpoint dalam kode penanganan kesalahan Anda dan lakukan pemecahan masalah

Mengonfigurasi Visual Studio Code untuk penelusuran kesalahan dengan Dev Proxy

Cara Anda mengonfigurasi Visual Studio Code bergantung pada bahasa pemrograman yang Anda gunakan. Bagian berikut menunjukkan kepada Anda cara mengonfigurasi Visual Studio Code untuk aplikasi Node.js, .NET, dan Python.

Node.js

Untuk men-debug aplikasi Node.js dengan Dev Proxy, konfigurasikan file untuk mengatur variabel lingkungan proksi dan menonaktifkan verifikasi sertifikat TLS/SSL.

File: .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"
      }
    }
  ]
}

Penting

Pengaturan menonaktifkan verifikasi sertifikat TLS/SSL. Hanya gunakan pengaturan ini selama pengembangan. Untuk pendekatan yang lebih aman, gunakan untuk mempercayai sertifikat Proksi Dev secara langsung:

macOS/Linux:

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

Windows:

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

Variabel tersebut digunakan oleh paket tersebut, yang menyediakan dukungan proksi untuk banyak pustaka HTTP Node.js. Untuk informasi selengkapnya tentang mengonfigurasi pustaka HTTP yang berbeda, lihat Menggunakan Dev Proxy dengan aplikasi Node.js.

.NET

.NET aplikasi secara otomatis menggunakan pengaturan proksi sistem. Untuk men-debug aplikasi .NET dengan Dev Proxy, Anda biasanya tidak perlu mengatur variabel lingkungan apa pun. Buat konfigurasi debug dasar:

File: .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
    }
  ]
}

Jika aplikasi Anda tidak mengambil proksi sistem, atur variabel lingkungan proksi secara eksplisit:

File: .vscode/launch.json (dengan pengaturan proksi eksplisit)

{
  "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"
      }
    }
  ]
}

Petunjuk / Saran

Di Windows dan macOS, .NET mempercayai sertifikat Proksi Dev secara otomatis jika Anda menginstalnya sebagai sertifikat akar tepercaya selama penyiapan Proksi Dev. Di Linux, Anda mungkin perlu mempercayai sertifikat secara manual. Lihat dokumentasi distribusi Anda untuk mengonfigurasi sertifikat tepercaya.

Python

Untuk men-debug aplikasi Python dengan Dev Proxy, konfigurasikan file launch.json untuk mengatur variabel lingkungan proksi. Konfigurasi bergantung pada apakah Anda menggunakan pustaka atau pustaka HTTP lainnya.

File: .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": ""
      }
    }
  ]
}

Penting

Pengaturan ke string kosong memberi tahu pustaka untuk melewati verifikasi sertifikat TLS/SSL. Hanya gunakan pengaturan ini selama pengembangan.

Untuk pendekatan yang lebih aman, arahkan ke sertifikat Dev Proxy:

macOS/Linux:

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

Windows:

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

Jika Anda menggunakan pustaka, konfigurasikan verifikasi TLS/SSL menggunakan variabel lingkungan sebagai gantinya :

{
  "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"
  }
}

Mengonfigurasi Dev Proxy untuk mensimulasikan kesalahan

Untuk men-debug penanganan kesalahan, konfigurasikan Dev Proxy untuk mengembalikan kesalahan tertentu saat aplikasi Anda memanggil API. Gunakan GenericRandomErrorPlugin untuk mensimulasikan kesalahan seperti atau .

Mensimulasikan kesalahan 429 (Terlalu Banyak Permintaan)

Buat file konfigurasi Proxy Dev yang mensimulasikan pengendalian laju:

File: devproxyrc.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.3.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.3.0/genericrandomerrorplugin.schema.json",
    "errorsFile": "errors.json"
  }
}

Buat file kesalahan dengan respons kesalahan tertentu:

File: errors.json

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.3.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."
            }
          }
        }
      ]
    }
  ]
}

Petunjuk / Saran

Atur nilai menjadi untuk menyebabkan setiap permintaan gagal, sehingga Anda secara konsisten mengaktifkan kode penanganan kesalahan saat men-debug. Turunkan laju saat Anda ingin menguji kesalahan terputus-putus.

Mensimulasikan 500 (Kesalahan Server Internal)

Untuk mensimulasikan kesalahan server, tambahkan respons kesalahan lain:

File: errors.json (beberapa kesalahan)

{
  "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.3.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."
            }
          }
        }
      ]
    }
  ]
}

Saat Anda menentukan beberapa respons kesalahan, Dev Proxy secara acak memilih satu untuk setiap permintaan yang disadap.

Men-debug kode penanganan kesalahan Anda

Dengan VS Code dan Dev Proxy dikonfigurasi, Anda sekarang dapat men-debug kode penanganan kesalahan Anda.

Langkah 1: Mengatur titik henti

Buka kode sumber Anda dan atur titik henti dalam kode penanganan kesalahan Anda. Misalnya, dalam aplikasi 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;
  }
}

Langkah 2: Mulai Proksi Dev

Mulai Dev Proxy dengan file konfigurasi Anda:

devproxy --config-file devproxyrc.json

Langkah 3: Mulai penelusuran kesalahan di Visual Studio Code

  1. Buka Visual Studio Code
  2. Tekan F5 atau pilih Jalankan Mulai Debugging
  3. Saat aplikasi Anda melakukan panggilan API, Dev Proxy mencegatnya dan mengembalikan kesalahan
  4. Visual Studio Code berhenti sejenak di titik henti Anda
  5. Gunakan kontrol debug untuk menelusuri kode Anda dan memeriksa variabel

Langkah 4: Periksa kesalahan

Saat Visual Studio Code berhenti sejenak di titik henti Anda, gunakan panel debug untuk:

  • Menampilkan kode dan pesan status respons kesalahan
  • Periksa nilai variabel lokal
  • Menelusuri logika coba lagi Anda
  • Verifikasi bahwa pesan kesalahan Anda mudah digunakan

Memulai dan menghentikan Proksi Dev secara otomatis

Untuk menyederhanakan alur kerja debugging Anda, konfigurasikan Visual Studio Code untuk memulai Dev Proxy secara otomatis saat Anda melakukan debugging dan menghentikannya setelah proses debugging selesai. Instal ekstensi Dev Proxy Toolkit dan konfigurasikan tugas:

File: .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"
    }
  ]
}

Untuk menggunakan tugas-tugas ini, perbarui :

File: .vscode/launch.json (Node.js dengan mulai otomatis)

{
  "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"
      }
    }
  ]
}

Tips untuk penelusuran kesalahan yang efektif

  • Untuk secara konsisten mencapai titik henti Anda, atur dalam konfigurasi Proksi Dev Anda sehingga setiap permintaan gagal.
  • Untuk memahami bagaimana kode Anda menangani kesalahan tertentu, gunakan satu respons kesalahan saat debugging.
  • Untuk memverifikasi bahwa kode Anda mematuhi pembatasan, periksa apakah kode tersebut membaca dan mengikuti header ketika men-debug kesalahan 429.
  • Untuk memastikan kode Anda menangani respons yang tidak biasa dengan baik, gunakan Dev Proxy untuk mensimulasikan kasus edge seperti JSON cacat atau header yang hilang.
  • Untuk memutus hanya pada kesalahan tertentu, gunakan titik henti kondisional di Visual Studio Code dengan mengklik kanan titik henti dan menambahkan kondisi seperti .

Baca juga

  • Last updated on