如何在Svelte中跟踪脏变量，按响应顺序展示以排查代码重复执行问题？

1. 启用Svelte内置调试功能 #

• 确保项目处于开发模式，在Vite或Rollup的配置文件中开启Svelte的编译调试选项：

  // vite.config.js 示例
  import { sveltekit } from '@sveltejs/kit/vite';
  import { defineConfig } from 'vite';
  
  export default defineConfig({
    plugins: [sveltekit({
      compilerOptions: {
        dev: true
      }
    })]
  });
  

• 打开浏览器控制台，输入svelte.debug并执行，开启调试模式。之后组件更新时，控制台会按顺序输出触发更新的脏变量列表，包括变量名和变化前后的值。

2. 手动添加变量追踪代码 #

• 在组件的<script>块里，用$:响应式语句配合console.log，直接追踪可疑变量的变化：

  <script>
    let targetVar1 = '';
    let targetVar2 = 0;
  
    // 追踪单个变量的脏状态
    $: console.log('→ targetVar1 触发更新，当前值:', targetVar1);
    $: console.log('→ targetVar2 触发更新，当前值:', targetVar2);
  
    // 批量追踪所有可能的触发源
    $: {
      console.group('组件更新触发快照');
      console.log('当前脏变量:', { targetVar1, targetVar2 });
      console.groupEnd();
    }
  </script>
  

• 代码重复执行时，对照控制台日志，就能直接看到是哪个变量的变化触发了本次执行，再配合断点调试即可锁定问题。

3. 用浏览器断点条件精准拦截 #

• 在你要排查的代码行设置断点，右键点击断点选择「编辑条件」，输入特定条件（比如targetVar1 === '某个值'），这样断点只会在指定变量变化到特定状态时触发，方便逐次排查每次执行的触发原因。

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