diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts
index dc4fa78ecf..90a57db773 100644
--- a/packages/devtools-kit/src/_types/client-api.ts
+++ b/packages/devtools-kit/src/_types/client-api.ts
@@ -113,9 +113,13 @@ export interface NuxtDevtoolsHostClient {
   syncClient: () => NuxtDevtoolsHostClient
 }
 
+export interface CodeHighlightOptions {
+  grammarContextCode?: string
+}
+
 export interface NuxtDevtoolsClient {
   rpc: BirpcReturn<ServerFunctions, ClientFunctions>
-  renderCodeHighlight: (code: string, lang?: BuiltinLanguage) => {
+  renderCodeHighlight: (code: string, lang?: BuiltinLanguage, options?: CodeHighlightOptions) => {
     code: string
     supported: boolean
   }
diff --git a/packages/devtools-kit/src/_types/rpc.ts b/packages/devtools-kit/src/_types/rpc.ts
index abcbae5d9f..70a37f52b2 100644
--- a/packages/devtools-kit/src/_types/rpc.ts
+++ b/packages/devtools-kit/src/_types/rpc.ts
@@ -6,13 +6,14 @@ import type { AnalyzeBuildsInfo } from './analyze-build'
 import type { ModuleCustomTab } from './custom-tabs'
 import type { AssetEntry, AssetInfo, AutoImportsWithMetadata, ComponentRelationship, HookInfo, ImageMeta, NpmCommandOptions, NpmCommandType, PackageUpdateInfo, ScannedNitroTasks, ServerRouteInfo } from './integrations'
 import type { ModuleOptions, NuxtDevToolsOptions } from './options'
-import type { InstallModuleReturn } from './server-ctx'
+import type { InstallModuleReturn, ServerDebugContext } from './server-ctx'
 import type { TerminalAction, TerminalInfo } from './terminals'
 import type { GetWizardArgs, WizardActions } from './wizard'
 
 export interface ServerFunctions {
   // Static RPCs (can be provide on production build in the future)
   getServerConfig: () => NuxtOptions
+  getServerDebugContext: () => Promise<ServerDebugContext | undefined>
   getServerData: (token: string) => Promise<NuxtServerData>
   getServerRuntimeConfig: () => Record<string, any>
   getModuleOptions: () => ModuleOptions
diff --git a/packages/devtools-kit/src/_types/server-ctx.ts b/packages/devtools-kit/src/_types/server-ctx.ts
index b730aa011a..8bcaf4b016 100644
--- a/packages/devtools-kit/src/_types/server-ctx.ts
+++ b/packages/devtools-kit/src/_types/server-ctx.ts
@@ -1,5 +1,5 @@
 import type { BirpcGroup } from 'birpc'
-import type { Nuxt } from 'nuxt/schema'
+import type { Nuxt, NuxtDebugModuleMutationRecord } from 'nuxt/schema'
 import type { ModuleOptions } from './options'
 import type { ClientFunctions, ServerFunctions } from './rpc'
 
@@ -42,3 +42,9 @@ export interface InstallModuleReturn {
   commands: string[]
   processId: string
 }
+
+export type ServerDebugModuleMutationRecord = (Omit<NuxtDebugModuleMutationRecord, 'module'> & { name: string })
+
+export interface ServerDebugContext {
+  moduleMutationRecords: ServerDebugModuleMutationRecord[]
+}
diff --git a/packages/devtools-ui-kit/src/components/NBadgeHashed.vue b/packages/devtools-ui-kit/src/components/NBadgeHashed.vue
new file mode 100644
index 0000000000..390ea3fbf9
--- /dev/null
+++ b/packages/devtools-ui-kit/src/components/NBadgeHashed.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getHslColorFromStringHash } from '../composables/color'
+import NBadge from './NBadge.vue'
+
+const props = defineProps<{
+  text: string
+}>()
+
+const color = computed(() => {
+  const foreground = getHslColorFromStringHash(props.text, 50, 60)
+  const background = getHslColorFromStringHash(props.text, 50, 60, 0.05)
+  return { color: foreground, background }
+})
+</script>
+
+<template>
+  <NBadge :style="color">
+    {{ text }}<slot />
+  </NBadge>
+</template>
diff --git a/packages/devtools-ui-kit/src/components/NCodeBlock.vue b/packages/devtools-ui-kit/src/components/NCodeBlock.vue
index bf8b8cd12a..29562c52e5 100644
--- a/packages/devtools-ui-kit/src/components/NCodeBlock.vue
+++ b/packages/devtools-ui-kit/src/components/NCodeBlock.vue
@@ -10,6 +10,7 @@ const props = withDefaults(
     lang?: BuiltinLanguage | 'text'
     lines?: boolean
     inline?: boolean
+    grammarContextCode?: string
     transformRendered?: (code: string) => string
   }>(),
   {
@@ -22,7 +23,7 @@ const emit = defineEmits(['loaded'])
 const rendered = computed(() => {
   const result = props.lang === 'text'
     ? { code: props.code, supported: false }
-    : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang) || { code: props.code, supported: false }
+    : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang, { grammarContextCode: props.grammarContextCode }) || { code: props.code, supported: false }
   if (result.supported && props.transformRendered)
     result.code = props.transformRendered(result.code)
   if (result.supported)
diff --git a/packages/devtools-ui-kit/src/composables/color.ts b/packages/devtools-ui-kit/src/composables/color.ts
new file mode 100644
index 0000000000..34258ec1dc
--- /dev/null
+++ b/packages/devtools-ui-kit/src/composables/color.ts
@@ -0,0 +1,7 @@
+export function getHslColorFromStringHash(name: string, saturation = 65, lightness = 50, opacity: number | string = 1) {
+  let hash = 0
+  for (let i = 0; i < name.length; i++)
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  const h = hash % 360
+  return `hsla(${h}, ${saturation}%, ${lightness}%, ${opacity})`
+}
diff --git a/packages/devtools-ui-kit/src/module.ts b/packages/devtools-ui-kit/src/module.ts
index 19badeef20..9a9130c8ab 100644
--- a/packages/devtools-ui-kit/src/module.ts
+++ b/packages/devtools-ui-kit/src/module.ts
@@ -16,7 +16,7 @@ export interface ModuleOptions {
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
-    name: 'devtools-ui-kit',
+    name: '@nuxt/devtools-ui-kit',
     configKey: 'devtoolsUIKit',
   },
   defaults: {
@@ -35,9 +35,6 @@ export default defineNuxtModule<ModuleOptions>({
     if (!options.dev)
       nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss)
 
-    // eslint-disable-next-line ts/ban-ts-comment
-    // @ts-ignore - module options
-    nuxt.options.vueuse = nuxt.options.vueuse || {}
     // eslint-disable-next-line ts/ban-ts-comment
     // @ts-ignore - module options
     nuxt.options.colorMode = defu(nuxt.options.colorMode, { classSuffix: '' })
diff --git a/packages/devtools/client/components/BuildAnalyzeDetails.vue b/packages/devtools/client/components/BuildAnalyzeDetails.vue
index 708a6fab16..2855d8978f 100644
--- a/packages/devtools/client/components/BuildAnalyzeDetails.vue
+++ b/packages/devtools/client/components/BuildAnalyzeDetails.vue
@@ -57,10 +57,10 @@ async function clear(name: string) {
         <button
           px4 py2 border="r base"
           hover="bg-active"
-          :class="tab.id === selectedTab.id ? '' : 'border-b'"
+          :class="tab.id === selectedTab?.id ? '' : 'border-b'"
           @click="selectedTab = tab"
         >
-          <div :class="tab.id === selectedTab.id ? '' : 'op30' ">
+          <div :class="tab.id === selectedTab?.id ? '' : 'op30' ">
             {{ tab.name }}
           </div>
         </button>
@@ -68,7 +68,7 @@ async function clear(name: string) {
       <div border="b base" flex-auto />
     </div>
     <div
-      v-if="selectedTab.id === 'overview'"
+      v-if="selectedTab?.id === 'overview'"
       flex="~ col gap-4 items-center justify-center" p4
     >
       <div flex-auto />
@@ -126,17 +126,17 @@ async function clear(name: string) {
       </NButton>
     </div>
     <iframe
-      v-lazy-show="selectedTab.id === 'bundle-client'"
+      v-lazy-show="selectedTab?.id === 'bundle-client'"
       :src="`${ROUTE_ANALYZE}${current.slug}/client.html`"
       h-full w-full
     />
     <iframe
-      v-lazy-show="selectedTab.id === 'bundle-nitro'"
+      v-lazy-show="selectedTab?.id === 'bundle-nitro'"
       :src="`${ROUTE_ANALYZE}${current.slug}/nitro.html`"
       h-full w-full
     />
     <iframe
-      v-lazy-show="selectedTab.id === 'vite-inspect'"
+      v-lazy-show="selectedTab?.id === 'vite-inspect'"
       :src="`${ROUTE_ANALYZE}${current.slug}/.vite-inspect/`"
       h-full w-full
     />
diff --git a/packages/devtools/client/components/DebugModuleMutationRecords.vue b/packages/devtools/client/components/DebugModuleMutationRecords.vue
new file mode 100644
index 0000000000..ddd0d0d1cb
--- /dev/null
+++ b/packages/devtools/client/components/DebugModuleMutationRecords.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { ServerDebugModuleMutationRecord } from '@nuxt/devtools-kit/types'
+import { computed, ref } from 'vue'
+
+const props = defineProps<{
+  moduleMutationRecords: ServerDebugModuleMutationRecord[]
+}>()
+
+function isPath(path: string) {
+  return path.startsWith('/') || path.match(/^[a-z]:[\\/]/i)
+}
+
+// const search = ref('')
+const showBuiltin = ref(false)
+const showTemplates = ref(false)
+const showTranspile = ref(false)
+const showPlugins = ref(false)
+const showEmptyInitial = ref(false)
+const moduleFilter = ref('')
+
+const items = computed(() => {
+  let arr = props.moduleMutationRecords
+  if (!showBuiltin.value) {
+    arr = arr.filter(i => !i.name.startsWith('nuxt:') && i.name !== '@nuxt/devtools')
+  }
+  if (!showTemplates.value) {
+    arr = arr.filter(i => i.keys.join('.') !== 'build.templates')
+  }
+  if (!showTranspile.value) {
+    arr = arr.filter(i => i.keys.join('.') !== 'build.transpile')
+  }
+  if (!showPlugins.value) {
+    arr = arr.filter(i => i.keys.join('.') !== 'plugins')
+  }
+  if (!showEmptyInitial.value) {
+    arr = arr.filter(i => i.method || (i.value !== '[]' && i.value !== '{}'))
+  }
+  if (moduleFilter.value) {
+    arr = arr.filter(i => i.name === moduleFilter.value)
+  }
+  return arr
+})
+</script>
+
+<template>
+  <div flex="~ gap-2 col" mb4>
+    <!-- <NTextInput v-model="search" placeholder="Search" w-full /> -->
+    <div flex="~ gap-3 items-center">
+      <NCheckbox v-model="showBuiltin" n="primary">
+        <span ws-nowrap op75>Builtin Modules</span>
+      </NCheckbox>
+      <NCheckbox v-model="showTemplates" n="primary">
+        <span ws-nowrap op75>Templates</span>
+      </NCheckbox>
+      <NCheckbox v-model="showTranspile" n="primary">
+        <span ws-nowrap op75>Transpile</span>
+      </NCheckbox>
+      <NCheckbox v-model="showPlugins" n="primary">
+        <span ws-nowrap op75>Plugins</span>
+      </NCheckbox>
+      <NCheckbox v-model="showEmptyInitial" n="primary">
+        <span ws-nowrap op75>Empty Initial</span>
+      </NCheckbox>
+      <div v-if="moduleFilter" flex="~ gap-1" items-center p1 border="~ base rounded">
+        <NBadgeHashed font-mono :text="moduleFilter" />
+        <NButton icon="carbon-close" :border="false" @click="moduleFilter = ''" />
+      </div>
+    </div>
+  </div>
+  <table max-w-full of-auto>
+    <thead border="b base">
+      <tr>
+        <th ws-nowrap p1 text-center font-bold>
+          Index
+        </th>
+        <th ws-nowrap p1 text-center font-bold>
+          Module
+        </th>
+        <th ws-nowrap p1 text-center font-bold>
+          Key Path
+        </th>
+        <th ws-nowrap p1 text-center font-bold>
+          Method
+        </th>
+        <th ws-nowrap p1 text-center font-bold>
+          Value
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="record of items"
+        :key="moduleMutationRecords.indexOf(record)"
+        border="b dashed transparent hover:base"
+      >
+        <td text-center op50>
+          <div>{{ moduleMutationRecords.indexOf(record) + 1 }}</div>
+        </td>
+        <td>
+          <FilepathItem v-if="record.name && isPath(record.name)" :filepath="record.name" />
+          <NBadgeHashed
+            v-else
+            role="button" font-mono
+            :text="record.name"
+            @click="moduleFilter = record.name"
+          />
+        </td>
+        <td>
+          <code flex="~" px4>
+            <template v-for="key, idy of record.keys" :key="idy">
+              <span>{{ key }}</span>
+              <span v-if="idy < record.keys.length - 1" op50>
+                .
+              </span>
+            </template>
+          </code>
+        </td>
+        <td px2 text-center>
+          <NBadgeHashed font-mono :text="record.method || '='" :class="record.method ? '' : 'saturate-0'" />
+        </td>
+        <td of-auto>
+          <NCodeBlock
+            :code="String(record.value)"
+            lang="ts"
+            grammar-context-code="let a = "
+            ws-normal break-all py1
+            :lines="false" :inline="true"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/packages/devtools/client/components/HooksTable.vue b/packages/devtools/client/components/HooksTable.vue
index 8c94a83491..2cccb290b3 100644
--- a/packages/devtools/client/components/HooksTable.vue
+++ b/packages/devtools/client/components/HooksTable.vue
@@ -92,7 +92,7 @@ function toggleSortedBy(by: SortBy) {
         <td w-0 ws-nowrap text-center text-sm op25>
           {{ startTimes.indexOf(item.start) }}
         </td>
-        <td w-0 ws-nowrap text-right :style="{ color: getHashColorFromString(getNamePrefix(item.name)) }">
+        <td w-0 ws-nowrap text-right :style="{ color: getHslColorFromStringHash(getNamePrefix(item.name)) }">
           <code text-sm>{{ getNamePrefix(item.name) }}</code>
         </td>
         <td ws-nowrap>
diff --git a/packages/devtools/client/components/TimelineItemFunction.vue b/packages/devtools/client/components/TimelineItemFunction.vue
index be4095e0b1..60eb054b9a 100644
--- a/packages/devtools/client/components/TimelineItemFunction.vue
+++ b/packages/devtools/client/components/TimelineItemFunction.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { TimelineEventFunction } from '../../types'
 import { computed } from 'vue'
-import { getHashColorFromString } from '~/composables/utils'
+import { getHslColorFromStringHash } from '../../../devtools-ui-kit/src/composables/color'
 
 const props = defineProps<{
   item: TimelineEventFunction
 }>()
 
-const colorRaw = computed(() => getHashColorFromString(props.item.name, 50, 60, '_op_'))
+const colorRaw = computed(() => getHslColorFromStringHash(props.item.name, 50, 60, '_op_'))
 const color = computed(() => colorRaw.value.replace(/_op_/, '1'))
-const textColor = computed(() => getHashColorFromString(props.item.name, 50, 40))
+const textColor = computed(() => getHslColorFromStringHash(props.item.name, 50, 40))
 const colorBackground = computed(() => colorRaw.value.replace(/_op_/, '0.2'))
 </script>
 
diff --git a/packages/devtools/client/components/TimelineList.vue b/packages/devtools/client/components/TimelineList.vue
index 9f1e63a517..7a2b6af3ec 100644
--- a/packages/devtools/client/components/TimelineList.vue
+++ b/packages/devtools/client/components/TimelineList.vue
@@ -25,7 +25,7 @@ const emit = defineEmits<{
           font-mono
           :style="{
             color: event.type === 'function'
-              ? getHashColorFromString(event.name, 50, 60)
+              ? getHslColorFromStringHash(event.name, 50, 60)
               : '',
           }"
         >
diff --git a/packages/devtools/client/components/TimelineTable.vue b/packages/devtools/client/components/TimelineTable.vue
index 2ee0b44961..5556ccd65e 100644
--- a/packages/devtools/client/components/TimelineTable.vue
+++ b/packages/devtools/client/components/TimelineTable.vue
@@ -103,7 +103,7 @@ useEventListener(scroller, 'wheel', (e: WheelEvent) => {
             position: 'absolute',
             top: `${item.layer * 4}px`,
             left: `${item.relativeStart * 100}%`,
-            backgroundColor: getHashColorFromString(item.event.name, 50, 60),
+            backgroundColor: getHslColorFromStringHash(item.event.name, 50, 60),
           }"
         />
         <template v-if="segment.route">
diff --git a/packages/devtools/client/composables/client-services/shiki.ts b/packages/devtools/client/composables/client-services/shiki.ts
index 89d0e20140..6f714b4af1 100644
--- a/packages/devtools/client/composables/client-services/shiki.ts
+++ b/packages/devtools/client/composables/client-services/shiki.ts
@@ -1,3 +1,4 @@
+import type { CodeHighlightOptions } from '@nuxt/devtools-kit/types'
 import type { BundledLanguage, BundledTheme, Highlighter } from './shiki.bundle'
 import { shallowRef } from 'vue'
 import { bundledLanguages, bundledThemes, createHighlighter } from './shiki.bundle'
@@ -6,7 +7,11 @@ export const shiki = shallowRef<Highlighter>()
 
 let promise: Promise<any> | null = null
 
-export function renderCodeHighlight(code: string, lang: BundledLanguage | 'text' = 'text') {
+export function renderCodeHighlight(
+  code: string,
+  lang: BundledLanguage | 'text' = 'text',
+  options?: CodeHighlightOptions,
+) {
   if (!promise && !shiki.value) {
     // Only loading when needed
     promise = createHighlighter({
@@ -27,6 +32,7 @@ export function renderCodeHighlight(code: string, lang: BundledLanguage | 'text'
 
   return {
     code: shiki.value!.codeToHtml(code, {
+      ...options,
       lang,
       themes: {
         dark: 'vitesse-dark',
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index f774c95fd1..db702b41b0 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -39,6 +39,10 @@ export function useServerConfig() {
   return useAsyncState('getServerConfig', () => rpc.getServerConfig())
 }
 
+export function useServerDebugContext() {
+  return useAsyncState('getServerDebugContext', () => rpc.getServerDebugContext())
+}
+
 export function useServerRuntimeConfig() {
   return useAsyncState('getServerRuntimeConfig', () => rpc.getServerRuntimeConfig())
 }
diff --git a/packages/devtools/client/composables/utils.ts b/packages/devtools/client/composables/utils.ts
index ea3db5e870..babc2bd4aa 100644
--- a/packages/devtools/client/composables/utils.ts
+++ b/packages/devtools/client/composables/utils.ts
@@ -137,14 +137,6 @@ export function formatDuration(ms: number | string) {
   return `${(ms / 1000 / 60).toFixed(2)}min`
 }
 
-export function getHashColorFromString(name: string, saturation = 65, lightness = 50, opacity: number | string = 1) {
-  let hash = 0
-  for (let i = 0; i < name.length; i++)
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  const h = hash % 360
-  return `hsla(${h}, ${saturation}%, ${lightness}%, ${opacity})`
-}
-
 export function useSessionState<T>(name: string, initialValue: T) {
   return useState(name, () => {
     return useSessionStorage(name, initialValue, { listenToStorageChanges: false })
diff --git a/packages/devtools/client/nuxt.config.ts b/packages/devtools/client/nuxt.config.ts
index ac92328996..058fcde3e1 100644
--- a/packages/devtools/client/nuxt.config.ts
+++ b/packages/devtools/client/nuxt.config.ts
@@ -151,6 +151,8 @@ export default defineNuxtConfig({
     includeWorkspace: true,
   },
 
+  debug: true,
+
   eslint: {
     config: {
       standalone: false,
diff --git a/packages/devtools/client/pages/modules/debug.vue b/packages/devtools/client/pages/modules/debug.vue
new file mode 100644
index 0000000000..d743b88ce7
--- /dev/null
+++ b/packages/devtools/client/pages/modules/debug.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { definePageMeta } from '#imports'
+import DebugModuleMutationRecords from '~/components/DebugModuleMutationRecords.vue'
+import { useServerDebugContext } from '~/composables/state'
+
+definePageMeta({
+  icon: 'i-carbon-debug',
+  title: 'Debug',
+  category: 'advanced',
+})
+
+const context = useServerDebugContext()
+</script>
+
+<template>
+  <div v-if="!context" p6>
+    <div>No Debug Countext Found</div>
+    <div>Set `debug: true` in your nuxt.config.ts to enable this panel</div>
+  </div>
+  <div v-else>
+    <NSectionBlock
+      icon="carbon-container-image-push-pull"
+      text="Module Mutation Records"
+      description="Records of module mutations to nuxt options"
+    >
+      <DebugModuleMutationRecords
+        :module-mutation-records="context.moduleMutationRecords || []"
+      />
+    </NSectionBlock>
+  </div>
+</template>
diff --git a/packages/devtools/src/server-rpc/general.ts b/packages/devtools/src/server-rpc/general.ts
index fe38870684..db3556d5a0 100644
--- a/packages/devtools/src/server-rpc/general.ts
+++ b/packages/devtools/src/server-rpc/general.ts
@@ -1,7 +1,7 @@
 import type { ModuleOptions, NuxtLayout } from '@nuxt/schema'
 import type { Component, NuxtApp, NuxtPage } from 'nuxt/schema'
 import type { Import, Unimport } from 'unimport'
-import type { AutoImportsWithMetadata, HookInfo, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+import type { AutoImportsWithMetadata, HookInfo, NuxtDevtoolsServerContext, ServerDebugContext, ServerFunctions } from '../types'
 import { existsSync } from 'node:fs'
 import { logger } from '@nuxt/kit'
 import { colors } from 'consola/utils'
@@ -12,6 +12,7 @@ import { snakeCase } from 'scule'
 import { resolveBuiltinPresets } from 'unimport'
 import { getDevAuthToken } from '../dev-auth'
 import { setupHooksDebug } from '../runtime/shared/hooks'
+import { toJsLiteral } from '../utils/serialize-js-literal'
 import { getOptions } from './options'
 
 export function setupGeneralRPC({
@@ -80,6 +81,44 @@ export function setupGeneralRPC({
   })
 
   return {
+    getServerConfig() {
+      return nuxt.options
+    },
+    async getServerDebugContext() {
+      if (!nuxt._debug)
+        return
+
+      return <ServerDebugContext>{
+        ...nuxt._debug,
+        moduleMutationRecords: await Promise.all(
+          nuxt._debug.moduleMutationRecords?.map(async (i) => {
+            let value = i.value
+            try {
+              const json = toJsLiteral(value)
+              if (json.length > 200)
+                value = `${json.slice(0, 200)}...`
+              else
+                value = json
+            }
+            catch {
+              value = '[Circular]'
+            }
+            let name = (await i.module.getMeta?.())?.name
+            if (!name) {
+              const installedModule = nuxt.options._installedModules.find(m => m.module === i.module)
+              name = installedModule?.meta.name || installedModule?.entryPath
+            }
+
+            return {
+              ...i,
+              module: undefined,
+              name: name || '(unknown)',
+              value,
+            }
+          }) || [],
+        ),
+      }
+    },
     getServerRuntimeConfig(): Record<string, any> {
       // Ported from https://github.com/unjs/nitro/blob/88e79fcdb2a024c96a3d1fd272d0acbff0405013/src/runtime/config.ts#L31
       // Since this operation happends on the Nitro runtime
diff --git a/packages/devtools/src/utils/serialize-js-literal.ts b/packages/devtools/src/utils/serialize-js-literal.ts
new file mode 100644
index 0000000000..a07eaa5e26
--- /dev/null
+++ b/packages/devtools/src/utils/serialize-js-literal.ts
@@ -0,0 +1,82 @@
+export function toJsLiteral(value: any, seen = new Set()): string {
+  // null
+  if (value === null) {
+    return 'null'
+  }
+
+  // undefined
+  if (typeof value === 'undefined') {
+    return 'undefined'
+  }
+
+  // Boolean or number
+  if (typeof value === 'boolean' || typeof value === 'number') {
+    return String(value)
+  }
+
+  // RegExp
+  if (value instanceof RegExp) {
+    // e.g., /pattern/gi
+    return value.toString()
+  }
+
+  if (typeof value === 'function') {
+    if (value.name) {
+      return `function ${value.name}() { /* code */ }`
+    }
+    return 'function () { /* code */ }'
+  }
+
+  // String
+  if (typeof value === 'string') {
+    // Use JSON.stringify for correct escaping
+    return JSON.stringify(value)
+  }
+
+  // Array
+  if (Array.isArray(value)) {
+    // Before recursing, check for cycles.
+    if (seen.has(value)) {
+      return '[Circular]'
+    }
+    seen.add(value)
+
+    const elements = value.map(item => toJsLiteral(item, seen))
+    const content = elements.join(', ')
+    return `[${content}]`
+  }
+
+  // Object
+  if (typeof value === 'object') {
+    // Before recursing, check for cycles.
+    if (seen.has(value)) {
+      return '{Circular}'
+    }
+    seen.add(value)
+
+    const entries = []
+    for (const key of Object.keys(value)) {
+      entries.push(`${safeKey(key)}: ${toJsLiteral(value[key], seen)}`)
+    }
+    if (entries.length === 0) {
+      return '{}'
+    }
+    return `{ ${entries.join(', ')} }`
+  }
+
+  // Fallback
+  return JSON.stringify(value)
+}
+
+/**
+ * Safely wraps the key in quotes if it's not a valid JS identifier.
+ */
+function safeKey(key: string) {
+  // A simple check for valid identifier names
+  const validIdentifier = /^[a-z_$][\w$]*$/i
+  if (validIdentifier.test(key)) {
+    return key // leave as is
+  }
+  // otherwise, wrap in quotes
+  return JSON.stringify(key)
+}