如何在Laravel+Inertia.js环境启用Svelte Chrome Dev扩展

核心原因基本都是Svelte编译器未正确注入开发模式标识、配置层级错误、缓存残留导致，按以下步骤逐一排查配置即可：

• 修正Vite配置的正确参数层级
  打开项目根目录的vite.config.js，确认svelte插件的配置结构正确，注意dev: true必须放在compilerOptions下，直接写在插件根层级不会生效，参考可直接复用的配置：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import { svelte } from '@sveltejs/vite-plugin-svelte';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: 'resources/js/app.js',
              refresh: true,
          }),
          svelte({
              compilerOptions: {
                  dev: true, // 开发模式标识，必须放在compilerOptions下
              },
              inspector: {
                  enabled: true, // 显式开启Svelte开发检查器注入
              },
              hot: true,
          }),
      ],
      resolve: {
          extensions: ['.js', '.ts', '.svelte'],
      }
  });
  

• 清除全量缓存后重启开发服务
  旧的Vite缓存、历史构建产物会覆盖新的开发模式配置，必须彻底清理后再启动服务：

  # 先终止当前运行的npm run dev进程（按Ctrl+C即可）
  rm -rf node_modules/.vite # 删除Vite缓存目录
  rm -rf public/build # 删除历史生产构建产物
  npm run dev # 重新启动开发服务
  

• 检查Inertia入口挂载逻辑
  打开resources/js/app.js（Inertia初始化入口文件），不要手动写死生产模式的hydrate挂载逻辑，否则Svelte会以生产模式运行，DevTools无法识别，正确的挂载代码如下：

  import { createInertiaApp } from '@inertiajs/svelte'
  import { mount } from 'svelte'
  
  createInertiaApp({
    resolve: name => {
      const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
      return pages[`./Pages/${name}.svelte`]
    },
    setup({ el, App, props }) {
      // 无需手动判断环境切换mount/hydrate，Svelte和Inertia会自动适配
      mount(App, { target: el, props })
    },
  })
  

• 浏览器侧排查

  • 先完全停用Svelte DevTools扩展，再重新启用，重启Chrome浏览器（扩展本身会缓存页面识别状态，仅刷新页面无效）
  • 打开Chrome DevTools的Application面板，选择Clear storage，清空本地localhost域名下的所有站点数据、Service Worker缓存
  • 访问本地开发页面时，查看页面源码确认已加载Vite热更新脚本（地址一般为http://localhost:5173/@vite/client），未加载说明Blade模板里漏写了@vite指令，开发模式标识不会被注入
  • 打开Console面板执行window.__SVELTE_DEVTOOLS_GLOBAL_HOOK__，如果返回undefined说明Svelte开发模式注入失败，回到前面步骤检查配置；如果返回对象，刷新页面后扩展即可正常识别。

执行npm run build打生产包时，Svelte插件会自动根据环境变量把dev模式关闭，不需要手动修改配置，不会影响线上运行逻辑。

内容的提问来源于stack exchange，提问作者Vince