是否有任何工具（最好是任何浏览器的扩展/附加组件）可以让您实时查看所需 JS 变量的所有值变化？
以前我做了这样的事情（用纯JS）：
var someVariable;
var previousValueOfSomeVariable;
var f = function() {
if (previousValueOfSomeVariable != someVariable) {
console.log(Date.now(), someVariable);
previousValueOfSomeVariable = someVariable;
}
}
var TO = setInterval(f, 100);
它做到了这一点，但当然效率低下（实际上该函数更大，而如果变量是一个对象，则需要对象复制函数并进一步检查）...
更新
我知道控制台工具，但我想查看更改的历史记录，例如：
someVariable
0 毫秒：undefined；
10 毫秒：5；
40 毫秒：'someothervalue'；
150毫秒：null
ETC。
（给出的毫秒数仅供示例之用，不一定是必需的）。也许可以在 DevTools 控制台中完成，但我不知道如何做。
我有一个相当简单的类组件，需要访问用 vanilla JS 编写的服务中的一些数据。它只是 Web MIDI API 的一个接口，必须访问 MIDI 端口，然后触发回调。我将函数 setMidiPorts 导入到 MIDI 服务，然后调用它并在 MIDI 成功时发送端口列表。然后，我需要在下拉列表中渲染这些端口，但似乎无法在组件中更新它们。我尝试过将它们作为父级的道具传递下来，我尝试过直接导入它们。似乎什么都不起作用。我对反应还很陌生，所以我可能做错了一些事情，任何人都可以帮助我指出我错在哪里。
window.inputs = [];
export const setMidiPorts = (inputs) => {
window.inputs = inputs;
console.log(inputs);
};
export default class Preferences extends Component {
constructor(props) {
super(props);
this.state = {
midiInputs: window.inputs,
midiOutputs: [],
};
}
......
编辑 -
我正在查看这个问题，看看是否可以从外部更新状态，但不明白它如何正常工作。
我有一个设置，我根据需要加载许多模块，当更改特定变量时，每个模块都有特定的加载需求。我需要类似 jquery 触发器的东西，但它会在变量更改时运行，如下所示：
var x = 0; // no triggers
// something happens
x = 1; // will trigger a function
x = 2; // will trigger the same function
谢谢。
在开始之前，我想说关于这个话题已经有答案了，我查了一下——但因为我还是个初学者，我真的想不出答案，因为它太对我来说很复杂。所以我想举我自己的例子，一个非常简单的例子，并尝试在此基础上理解。
本质上，我想要做的是当一个已经存在的变量（具有定义的值）更改其值时运行一个函数。像这样的东西：
var testVar = 5;
function letMeKnow() {
console.log("The variable has changed!);
}
我想要的是，当我转到控制台并键入时，例如testVar = 7，我希望该letMeKnow()函数运行，并在控制台中打印出一些内容。更具体地说，我希望 JavaScript 检测到变量已更改，并自动运行该函数。我知道这曾经可以使用Object.observe()or Object.watch()，但由于这些已被弃用，我想我必须使用 getter 和 setter 来实现这一点。我的问题是，对于这个例子，我将如何做到这一点，使其尽可能简单？
谢谢！