‏Nuxt DevTools v4 از نو روی Devframe ساخته شد

تیم Nuxt نسخه‌ی 4 از Nuxt DevTools رو منتشر کرده که روی Devframe و Vite DevTools ساخته شده. این نسخه همراه Nuxt v5 میاد و با Nuxt v4.5 به بالا هم کار می‌کنه. تو اپت لازم نیست چیزی عوض کنی و میانبرش همونه: Shift + Option + D تو macOS یا Shift + Alt + D تو ویندوز. مهم‌ترین تغییر برای کاربر اینه که دیگه یه نسخه‌ی کپی‌شده از Vue DevTools نمی‌گیری، بلکه خود Vue DevTools کامل با همه‌ی قابلیت‌هاش رو داری.

به گفته‌ی تیم Nuxt، از نسخه‌ی 1.0 به بعد DevTools طوری رشد کرده بود که فقط برای Nuxt جواب می‌داد. هر ماژولی که پنل می‌خواست باید از API اختصاصی Nuxt استفاده می‌کرد و هر قابلیت Vue DevTools باید تو کد خودشون کپی (vendor) می‌شد که هماهنگ نگه داشتنش سخت بود. اونا معتقدن هر ابزار دنیای جاوااسکریپت همین سه چیز رو لازم داره: یه پنل، یه راه برای حرف زدن با سرور و یه راه برای نشون دادن داده.

Devframe یه toolkit برای ساخت devtools هست که به فریم‌ورک خاصی وابسته نیست. یه بار ابزارت رو با پنل‌ها، RPC تایپ‌دار (یعنی صدا زدن تابع‌های سمت سرور از مرورگر با تایپ مشخص) و state مشترک تعریف می‌کنی و همون تعریف تو Nuxt، Vite، Next.js، یه CLI مستقل، یه گزارش استاتیک یا یه MCP server برای ایجنت‌های کدنویسی اجرا می‌شه. تیم Nuxt اونو به unplugin برای devtools تشبیه می‌کنه. زیر کاپوت، هر devframe یه handler ساده از Request به Response هست و یه hub می‌تونه چندتاشونو پشت یه handler جمع کنه.

ساختار جدید سه لایه داره. Devframe Hub پایه‌ست، Vite DevTools روش ابزارهای Vite مثل Vitest، Rolldown و Oxc رو اضافه می‌کنه و Nuxt DevTools هم روی Vite DevTools لایه‌ی Nuxt یعنی Vue DevTools، Pinia، ماژول‌ها و auto importها رو میاره. این رابطه دوطرفه‌ست: ابزارهایی که بقیه روی Devframe یا Vite DevTools می‌سازن تو Nuxt کار می‌کنن و ابزاری که برای Nuxt بسازی بیرون از Nuxt هم کار می‌کنه. یعنی یه بار پنل می‌سازی و آدم‌های بیشتری ازش استفاده می‌کنن.

تیم Nuxt این نسخه رو یه نسخه‌ی انتقالی می‌دونه. ماژول‌هایی که از API قدیمی @nuxt/devtools-kit استفاده می‌کنن هنوز کار می‌کنن، چون یه shim (یعنی لایه‌ی سازگاری که API قدیمی رو به سیستم جدید وصل می‌کنه) اضافه شده که تو حالت development هشدار می‌ده. هر helper قدیمی یه کد هشدار داره؛ مثلاً addCustomTab() جاشو به ctx.docks.register() داده (NDT_DEP_0005) و extendServerRpc() به ctx.scope('my-module').rpc.register() (NDT_DEP_0003). یه پنل با API جدید تقریباً این شکلیه:

onDevtoolsReady((ctx) => {
  ctx.docks.register({
    id: 'my-module',
    type: 'iframe',
    url: '/__my-module/',
  })
  ctx.scope('my-module').rpc.register({
    name: 'get-modules', type: 'query', handler: () => loadModules(),
  })
})

docks فعلاً viewهای vnode و دسته‌بندی تب‌ها رو پشتیبانی نمی‌کنه، پس اگه ماژولت به اینا وابسته‌ست فعلاً با shim بمون. پیشنهاد تیم Nuxt اینه که ماژول‌ها یا به Devframe برن، اگه می‌خوان پنلشون همه‌جا کار کنه، یا به Vite DevTools، اگه فقط با Vite کار می‌کنن و کمترین تغییر رو می‌خوان. برای حالت قابل‌حمل هم ابزار با defineDevframe() تعریف می‌شه و ماژول Nuxt فقط یه wrapper نازک دورش می‌مونه.

نکات کلیدی:

• Nuxt DevTools v4 همراه Nuxt v5 میاد و با Nuxt v4.5 به بالا هم کار می‌کنه.
• پایه‌ی جدیدش Devframe و Vite DevTools هست و Vue DevTools دیگه کپی نمی‌شه، بلکه کامل به ارث می‌رسه.
• یه تعریف Devframe تو Nuxt، Vite، Next.js، CLI مستقل یا MCP server اجرا می‌شه.
• API قدیمی @nuxt/devtools-kit با یه shim هنوز کار می‌کنه و کدهای هشدار مثل NDT_DEP_0005 جای دقیق تغییر رو نشون می‌دن.
• viewهای vnode و دسته‌بندی تب‌ها هنوز تو docks پشتیبانی نمی‌شن.