feat(nuxt): add hook debug mode (#7690)

packages/nuxt/package.json

@@ -54,7 +54,7 @@
     "globby": "^13.1.2",
     "h3": "^0.7.21",
     "hash-sum": "^2.0.0",
-    "hookable": "^5.4.0",
+    "hookable": "^5.4.1",
     "knitwork": "^0.1.2",
     "magic-string": "^0.26.7",
     "mlly": "^0.5.16",

packages/nuxt/src/app/plugins/debug.ts

@@ -0,0 +1,6 @@
+import { createDebugger } from 'hookable'
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  createDebugger(nuxtApp.hooks, { tag: 'nuxt-app' })
+})

packages/nuxt/src/core/nitro.ts

@@ -17,6 +17,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
   // Resolve config
   const _nitroConfig = ((nuxt.options as any).nitro || {}) as NitroConfig
   const nitroConfig: NitroConfig = defu(_nitroConfig, <NitroConfig>{
+    debug: nuxt.options.debug,
     rootDir: nuxt.options.rootDir,
     workspaceDir: nuxt.options.workspaceDir,
     srcDir: nuxt.options.serverDir,

packages/nuxt/src/core/nuxt.ts

@@ -1,5 +1,5 @@
 import { join, normalize, resolve } from 'pathe'
-import { createHooks } from 'hookable'
+import { createHooks, createDebugger } from 'hookable'
 import type { Nuxt, NuxtOptions, NuxtConfig, ModuleContainer, NuxtHooks } from '@nuxt/schema'
 import { loadNuxtConfig, LoadNuxtOptions, nuxtCtx, installModule, addComponent, addVitePlugin, addWebpackPlugin, tryResolveModule, addPlugin } from '@nuxt/kit'
 // Temporary until finding better placement
@@ -183,6 +183,11 @@ async function initNuxt (nuxt: Nuxt) {
     addPlugin(resolve(nuxt.options.appDir, 'plugins/preload.server'))
   }
 
+  // Add nuxt app debugger
+  if (nuxt.options.debug) {
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/debug'))
+  }
+
   for (const m of modulesToInstall) {
     if (Array.isArray(m)) {
       await installModule(m[0], m[1])
@@ -229,6 +234,10 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
 
   const nuxt = createNuxt(options)
 
+  if (nuxt.options.debug) {
+    createDebugger(nuxt.hooks, { tag: 'nuxt' })
+  }
+
   if (opts.ready !== false) {
     await nuxt.ready()
   }

packages/schema/src/config/_common.ts

@@ -1,5 +1,5 @@
 import { join, resolve } from 'pathe'
-import { isDevelopment } from 'std-env'
+import { isDebug, isDevelopment } from 'std-env'
 import createRequire from 'create-require'
 import { pascalCase } from 'scule'
 import jiti from 'jiti'
@@ -149,11 +149,14 @@ export default defineUntypedSchema({
   /**
    * Set to `true` to enable debug mode.
    *
-   * By default, it's only enabled in development mode.
+   * At the moment, it prints out hook names and timings on the server, and
+   * logs hook arguments as well in the browser.
+   *
    * @version 2
+   * @version 3
    */
   debug: {
-    $resolve: async (val, get) => val ?? await get('dev')
+    $resolve: async (val, get) => val ?? isDebug
   },
 
   /**

yarn.lock

@@ -8380,6 +8380,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hookable@npm:^5.4.1":
+  version: 5.4.1
+  resolution: "hookable@npm:5.4.1"
+  checksum: 2a48150436bf70b4b756bcf15694809032c490c1747aba363a6de928a96712e808b0918de06c933e082cc2042c3f051b593d400df6af4773cd9ad1e85d677839
+  languageName: node
+  linkType: hard
+
 "hosted-git-info@npm:^2.1.4":
   version: 2.8.9
   resolution: "hosted-git-info@npm:2.8.9"
@@ -11029,7 +11036,7 @@ __metadata:
     globby: ^13.1.2
     h3: ^0.7.21
     hash-sum: ^2.0.0
-    hookable: ^5.4.0
+    hookable: ^5.4.1
     knitwork: ^0.1.2
     magic-string: ^0.26.7
     mlly: ^0.5.16