LogoENEnglish

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

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

Next.js debuggingVS CodeDevToolsNode inspect

~4 دقیقه مطالعه • بروزرسانی ۴ آبان ۱۴۰۴

مقدمه


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 می‌توانید کد خود را با دقت بررسی کرده و مشکلات را سریع‌تر حل کنید.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article