Svelte应用调试最佳实践及Utils未定义错误排查求助

一、解决"Utils is not defined"错误 #

控制台显示的main.ts:5是编译后代码的行号，并非你编写的源文件行号，问题根源在你创建的组件中：

排查方向 #

• 检查所有组件的<script>标签，找是否有直接使用Utils但未导入的代码
• 确认是否存在大小写拼写错误（JS/TS大小写敏感，比如把utils写成Utils）
• 若Utils是全局变量，需在组件中添加声明：declare const Utils: any;

修复示例 #

如果组件中使用了自定义工具类，先正确导入：

<script lang="ts">
import Utils from '../utils/Utils.ts';
</script>

二、Svelte应用调试最佳实践 #

1. 让错误定位到源文件 #

• 确保构建配置（rollup.config.js/vite.config.js）中sourcemap: true，开启后DevTools会直接指向你的源文件而非编译后代码
• 在Chrome DevTools的Sources面板中，直接选择src目录下的源文件打断点

2. 利用IDE提前拦截错误 #

• 保持VSCode的Svelte插件为最新版本，开启Svelte > Plugin: Enable Diagnostics设置，让插件实时检查组件语法、类型问题
• 所有组件的<script>标签添加lang="ts"，借助TypeScript提前发现未定义变量、类型不匹配等问题

3. 组件内调试技巧 #

• 在组件中使用console.log()，Svelte会保留源文件上下文，可在DevTools中查看组件状态
• 用响应式语句$:跟踪状态变化：

  <script lang="ts">
  let count = 0;
  $: console.log('count更新:', count);
  </script>
  

• 安装Svelte DevTools浏览器扩展，可直观查看组件树、props、状态，还能实时修改状态预览效果

4. 模糊错误排查方法 #

• 注释掉最近新增的组件/代码，逐步缩小错误范围
• 清理缓存：删除node_modules、dist目录，重新执行npm install和构建
• 仔细查看错误栈信息，通常会包含编译前的组件文件名及行号，顺着线索定位问题

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