Xây dựng máy khách MCP - Phần 3: Debug

5 months ago MCP

Ở bài viết trước chúng ta đã xây dựng được một máy khách MCP đơn giản, tuy nhiên phần mã nhiều hơn và phức tạp hơn. Để cho bạn đọc có thể hình dung thì cách đơn giản để hiểu chương trình là xem luồng dữ liệu đang được xử lý bên trong đó, xem xem tại vị trí này đang có giá trị là gì và tại sao lại cần phải gọi nó... Hay nói tóm tắt là đặt debug.

Thông thường nếu dùng Framework nào đó để phát triển ứng dụng, thường thì họ tích hợp luôn cả hướng dẫn debug, khi đó chỉ cần đọc tài liệu rồi làm theo hướng dẫn. Nhưng đối với chuỗi ví dụ về xây dựng máy chủ MCP cho 2coffee.dev được phát triển từ đầu bằng TypeScript, không sử dụng một khung có sẵn nào cả cho nên không có phần debug. Vậy nên hướng dẫn này dành cho bạn đọc cách thiết lập gỡ lỗi trong trình soạn thảo mã VSCode.

Đầu tiên hãy nắm được quy tắc đặt debug. Thật ra có rất nhiều cách như đặt debug trong một tệp thực thi (.js, .ts) hoặc sử dụng cờ debug trong một chương trình phức tạp hơn. Mã nguồn ở ví dụ hầu hết chỉ cần chạy một tệp duy nhất như build/client.js cho nên đơn giản là chỉ cần thiết lập debug cho tệp đó.

Tuy nhiên dự án lại viết bằng TypeScript, và khi đặt debug thì luôn muốn đặt trên tệp nguồn (.ts) thay vì trên tệp đã được build (.js) bởi vì tệp nguồn sạch sẽ và dễ quan sát, cũng như chỉnh sửa. Để làm được điều đó thì nguyên tắc ở đây là khi build từ TypeScript sang JavaScript luôn kèm theo sourceMaps để công cụ ánh xạ được mã chạy từ tệp .js sang tệp .ts.

Mở .vscode/launch.json thêm vào cấu hình có tên là "Debug Client".

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Client",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/build/client.js",
      "preLaunchTask": "npm: build",
      "sourceMaps": true,
      "console": "integratedTerminal"
    }
  ]
}

program trỏ đến tệp cần thực thi, có người thắc mặc tại sao không trỏ đến client.ts? Bởi vì chúng ta đang dùng Node.js để chạy mà Node.js chưa thực sự hỗ trợ TypeScript. preLaunchTask để chạy lệnh npm run build trước khi đi vào tệp thực thi. sourceMaps để bật ánh xạ từ .js sang .ts và console để phục vụ cho mục đích nhận dữ liệu từ Terminail (bởi vì có dùng module readline).

Nhưng trước đó cần phải cấu hình thêm sourceMaps trong tsconfig.json.

{
  "compilerOptions": {
      ...
      "sourceMap": true,
      ...
  }
}

Thế là xong! Bây giờ mở tệp src/client.ts lên và đặt breakpoint vào một vị trí cần quan sát. Sau đó chọn Run > Start Debugging hoặc bấm F5 để bắt đầu quá trình debug.

Kết quả