استفاده از ابزارهای دیباگ در Next.js – بررسی کامل کلاینت و سرور با VS Code، DevTools و inspect

مقدمه

Next.js از دیباگ کامل سمت کلاینت و سرور پشتیبانی می‌کند. با استفاده از VS Code، DevTools مرورگر، یا هر دیباگر متصل به Node.js می‌توانید کد خود را بررسی و اشکال‌زدایی کنید.

دیباگ با VS Code

فایل .vscode/launch.json را با تنظیمات زیر ایجاد کنید:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug client-side (Firefox)",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:3000",
      "reAttach": true,
      "pathMappings": [
        {
          "url": "webpack://_N_E",
          "path": "${workspaceFolder}"
        }
      ]
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "runtimeArgs": ["--inspect"],
      "skipFiles": ["/**"],
      "serverReadyAction": {
        "action": "debugWithEdge",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}

در صورت استفاده از Chrome، مقدار debugWithEdge را به debugWithChrome تغییر دهید. اگر پروژه در زیرپوشه‌ای قرار دارد (مانند Turborepo)، از cwd استفاده کنید.

دیباگ با WebStorm

در WebStorm یک پیکربندی JavaScript Debug با آدرس http://localhost:3000 بسازید. با اجرای آن، مرورگر به‌صورت خودکار باز شده و به سرور و کلاینت متصل می‌شود.

دیباگ سمت کلاینت با DevTools مرورگر

• سرور را با npm run dev یا next dev اجرا کنید
• آدرس http://localhost:3000 را در مرورگر باز کنید
• در Chrome از تب Sources و در Firefox از تب Debugger استفاده کنید
• برای جستجوی فایل‌ها از Ctrl+P یا ⌘+P استفاده کنید

مسیر فایل‌ها با webpack://_N_E/./ شروع می‌شود.

ابزار React Developer Tools

افزونهٔ React Developer Tools را نصب کنید تا بتوانید کامپوننت‌ها، props، state و مشکلات عملکردی را بررسی کنید.

دیباگ سمت سرور با فلگ --inspect

برای دیباگ سرور، از فلگ --inspect استفاده کنید:

NODE_OPTIONS='--inspect' next dev

برای دسترسی از راه دور (مثلاً در Docker):

NODE_OPTIONS='--inspect=0.0.0.0' next dev

در فایل package.json:

{
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev"
  }
}

اتصال DevTools به سرور

Chrome

• به آدرس chrome://inspect بروید
• روی Configure کلیک کرده و localhost:9229 را اضافه کنید
• برنامهٔ خود را در بخش Remote Target پیدا کرده و روی Inspect کلیک کنید

Firefox

• به آدرس about:debugging بروید
• در ستون سمت چپ روی This Firefox کلیک کنید
• برنامهٔ خود را در بخش Remote Targets پیدا کرده و روی Inspect کلیک کنید

بررسی خطاهای سرور

در صورت بروز خطا، Next.js آیکون Node.js را زیر نسخهٔ Next.js نمایش می‌دهد. با کلیک روی آن، آدرس DevTools کپی شده و می‌توانید آن را در مرورگر باز کنید.

دیباگ در ویندوز

در ویندوز، دستور NODE_OPTIONS='--inspect' پشتیبانی نمی‌شود. از cross-env استفاده کنید:

{
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev"
  }
}

با دستور npm i -D cross-env نصب کنید. همچنین توصیه می‌شود Windows Defender را غیرفعال کنید تا عملکرد Fast Refresh بهتر شود.

جمع‌بندی

Next.js ابزارهای قدرتمندی برای دیباگ کلاینت و سرور ارائه می‌دهد. با استفاده از VS Code، DevTools مرورگر و فلگ inspect می‌توانید کد خود را با دقت بررسی کرده و مشکلات را سریع‌تر حل کنید.