我们可以从当前状态开始向后调试 UI 吗？答案

【问题标题】：Can we debug a UI backwards, starting from its current state?我们可以从当前状态开始向后调试 UI 吗？
【发布时间】：2020-07-26 22:27:27
【问题描述】：

在网络开发环境中，用户多次提供他们“无效状态”的屏幕截图。

我使用 React，我想知道我们是否可以以相反的方式进行调试：从当前状态开始：

用户向我们提供了无效 UI 状态的屏幕截图。
我们通过 devtools 更改组件的 props 以匹配并找到特定的排列（假设所有组件都是无状态的）。
将排列提供给“程序”，该程序向我们显示代码中导致道具以这种方式发生变化的内容。

从技术的角度来看，我想知道这是否可能：我们可以从程序的特定状态及时倒退吗？

这应该是可能的，因为状态来自我们代码的特定执行路径；所以相反的情况也应该是可能的？我感兴趣的原因是出于调试目的，但我也觉得这将是一个有趣的探索性练习。

是否有任何资源或工具可供我查找以查找是否可行？

编辑：为了让这一点更清楚一点，我正在寻找一种方法给系统作为输入一个“状态”，并及时返回一个可能的“路径跟踪”列表我的代码可以执行到这样的状态：

showHowWeCanArriveTo({
  name: 'Bob',
  showPopup: true,
  colors: ['blue', 'green']
});

// Returns:
[
  [setName('Bob'), setShowPopup(true), addColor('blue'), addColor('green')]
]

【问题讨论】：

这可能不切实际。从理论上讲，您可能能够评估导致特定结果的动作组合，但从理论上讲，这组可能的组合将是无限的。您总是可以再单击一次按钮，这不会改变结果，但会构成事件链的一部分。即使你解决了这个问题，你的程序越动态，它就越难以判定，例如任何foo[prompt()] = prompt() 在实践中都变得完全无法确定……
是的，我就是这么想的。我很好奇是否有范式或语言可以让人们以较少的排列动态进行编程 - 一种“只能采取这些行动”的语言。
交叉发布：stackoverflow.com/q/61203537/781723，cs.stackexchange.com/q/124084/755。请do not post the same question on multiple sites.

标签： javascript reactjs user-interface web computer-science

【解决方案1】：

我之前使用过Logrocket 来实现完全相同的目的。如果您使用的是 redux，他们会提供一个中间件来记录用户状态及其历史记录，并且可以从他们的 Web 访问。

【讨论】：

【解决方案2】：

您可能正在寻找time travel debugging、reverse debugging 或replay debugging。基本上，它们的工作方式是记录程序在执行时所做的事情并保留足够的日志，以便您可以向后追溯。

或者，原则上可以使用程序分析技术（程序切片、反向程序执行等）来尝试反向执行程序并找到可能导致该状态的所有执行路径。然而，可能有很多这样的路径（你越往后走，可能越多），从头开始实现这样的事情在技术上并非易事。

【讨论】：