Svelte断点调试疑问：DOM生成处无法查看组件变量怎么办？

原因 #

Svelte会将包含#each/#if等指令的组件模板（DOM区域）编译成高度优化的闭包形式JavaScript代码，这些编译后的渲染代码与组件<script>标签内的变量处于不同作用域。当你在生成的DOM上设置断点时，DevTools暂停的是编译后的渲染函数执行，该作用域并未直接暴露组件的状态变量，因此会显示“不可用”。

查看#each处理时变量值的方法 #

• 安装Svelte DevTools扩展：Chrome/Edge应用商店中搜索安装Svelte DevTools，打开后在DevTools的Svelte面板选中目标组件，就能查看所有组件状态变量，包括#each循环中的每一项，还能实时修改变量值调试。
• 模板中临时添加日志输出：在#each循环内部插入{console.log(item)}（item为你的循环变量名），运行时控制台会打印每一项的具体值，调试完成后删除该行即可。
• 将模板逻辑迁移到<script>中：如果#each的数据源需要处理，把逻辑写成计算属性，比如：

  <script>
    let items = [/* 原始数据 */];
    $processedItems = items.map(item => {
      // 在这里设置断点，直接查看每个item的内容
      return /* 处理后的数据 */;
    });
  </script>
  
  {#each processedItems as item}
    <!-- 模板内容 -->
  {/each}
  

• 通过DOM元素关联组件实例：在DOM断点暂停后，选中目标元素，在Elements面板的Properties里找到__svelte_meta__，展开后找到对应组件实例，在Console中输入$0.__svelte_meta__.ctx即可查看组件上下文变量（该方法偏底层，不如扩展便捷）。

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