为什么在 Svelte 断点处暂停时无法检查 javascript 变量

Question

这是 Svelte 特有的。

在 Chrome 或 Edge DevTools 中，当在脚本标记之间的某行 javascript 的断点处暂停时，我们可以检查监视列表中的变量值。 但是，当我在 Svelte 处理 DOM 生成的主体区域放置断点时，我的组件的所有变量都不可检查。 他们都说“不可用”。 这使得调试我们的#if/#each 等类型块的问题变得非常困难。 见下图。 为什么会发生这种情况，在 Svelte 的 #each 命令处理这些变量值时，我该怎么做才能看到这些变量值？

Answer 1

编译后的 Svelte 文件 output 与源文件有很大不同。 在源中设置断点依赖于尝试将 map 和 output 返回到源位置的源映射，但不能保证任何变量存在或命名相同。

例如，您经常会在 output 中看到ctx[0] 、 ctx[1]等，因为它存储了组件 state。就我个人而言，出于这个原因，我禁用了源映射并直接使用 output。这有点不方便，但你看看代码是什么。

您可以在设置中关闭源地图。

或者打开命令选项板（类似于 Ctrl + Shift + P）并键入source maps以找到一个命令来切换它。

源文件还应该有一个按钮，可以让你跳转到编译后的 output，如果你只是想暂时看看它有什么。 我认为它位于底部状态栏中的某个位置。

您还可以在与Watch相同的侧边栏中查看Scope部分。 它还显示当前在 scope 中的所有变量。您可能必须扩展各种父范围。 例如，您可以在屏幕截图中看到一个create_each_block function。