如何在浏览器控制台中访问已部署的Svelte 5生产应用的内部变量与函数？

我太懂这种在生产环境想摸进Svelte 5应用内部的无奈了——毕竟Svelte 5刚推出没多久，官方DevTools还没跟上，而且生产构建的代码又被压缩混淆得面目全非，常规方法确实不好使。下面给你几个亲测有效的思路：

• 断点时手动挂载全局变量
  这是最直接的方法：当你在DevTools里断点暂停时，当前作用域内的所有变量、函数其实都能直接访问。你只需要在控制台把想要保留的目标挂载到window这个全局对象上，比如：

  window.myTargetFunc = _a; // 这里的_a是生产环境被混淆后的函数名，得从作用域面板找对
  window.myTargetVar = _b;
  

  执行完后再恢复脚本运行，之后在控制台直接调用myTargetFunc()或者访问myTargetVar就能用了。提醒一下：生产环境里的变量/函数名都是压缩后的短名，得通过作用域面板的变量值、调用栈的上下文来判断哪个是你要找的目标。

• 通过DOM节点关联组件实例
  Svelte 5的组件实例会和对应的DOM节点绑定，你可以这样操作：

  1. 在Elements面板找到目标组件对应的DOM节点，右键选择「Store as global variable」（比如存为temp1）
  2. 回到控制台，尝试访问temp1.__svelte_instance__（不同版本的Svelte 5可能属性名略有不同，如果这个不行，就在断点时查看该节点的关联对象）
  3. 要是能拿到组件实例，同样可以把它挂载到window上，比如window.myComponent = temp1.__svelte_instance__，之后就能在控制台操作实例上的属性和方法了。

• 检查生产构建的调试残留（碰运气但值得试）
  有些项目可能在生产构建时没完全关闭调试相关配置，你可以在控制台直接试试输入window.$svelte或者window.__svelte__，看看有没有意外收获——虽然Svelte 5默认不会暴露全局的Svelte对象，但如果项目配置漏了关闭调试选项，说不定能拿到全局的组件注册表。

• 利用Watch面板追踪变量
  如果你不需要长期保留变量引用，只是想查看或临时调用，在断点暂停时把目标变量添加到DevTools的「Watch」面板，这样即使后续脚本继续运行，只要再次触发断点，就能快速查看该变量的最新值，也能在当前断点上下文里直接调用函数测试。

最后要提醒：生产环境的代码经过混淆，很多逻辑会被合并、重命名，你得有点耐心通过上下文（比如函数的字符串内容、变量的取值）去识别目标；另外，手动挂载全局变量可能会干扰应用的正常状态，调试完成后记得刷新页面恢复。

内容来源于stack exchange