【问题标题】：Debugging: Is it possible to see value of JS variable in real time?调试：是否可以实时查看 JS 变量的值？
【发布时间】：2019-04-10 02:35:54
【问题描述】：

是否有任何工具（最好是任何浏览器的扩展/插件）可以让您实时查看所需 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

0ms：undefined;

10 毫秒：5;

40 毫秒：'someothervalue';

150 毫秒：null

等等

（毫秒是出于示例目的，不一定是必需的）。也许可以在 DevTools 控制台中完成，但我不知道如何。

【问题讨论】：

您可以随时打开控制台并转到您感兴趣的 JavaScript 文件并单步执行代码。
@rsahai91，感谢您的回复。我已经更新了这个问题。希望现在更容易理解我想要的东西:-)

标签： javascript google-chrome debugging firefox firebug

【解决方案1】：

Chrome 开发工具有这方面的功能。

插入一行

debugger;

就在您感兴趣的变量之后。当您的页面执行并且开发工具打开时，它会在那里暂停，您可以使用当时的值检查 console.log。

例如 - 假设您有一个 onClick 处理程序并想查看事件中传递了哪些信息：

html:

<input onClicked={myFunc} />

function myFunc(event){
  console.log(event)
}

这会将事件记录到控制台，但是如果您尝试向下钻取，则当您单击它时，chrome 会评估 obj，并且由于它早已消失，它大部分为空：

但是，如果您使用调试器，chrome 会在遇到该问题时暂停执行，您可以深入了解真实事件：

JS：

function myFunc(event){
  console.log(event);
  debugger;
}

让您深入了解对象，就像您点击调试器行时一样

Chrome 开发工具网站中的更多信息： https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

【讨论】：

如果你想尝试一下...w3schools.com/js/tryit.asp?filename=tryjs_debugger

【解决方案2】：

不同的 DevTools（在 Chrome DevTools、Firefox DevTools 和 Firebug 中测试）不提供实时查看值变化的方法。您总是需要手动刷新它们的显示。

Firefox 提供了一个Object.prototype.watch() 函数（对于其他浏览器there is a shim），它可以满足您的需求。

示例：

test = 0;
setInterval(() => test++, 1000);

window.watch("test", (id, oldValue, newValue) => {
  console.log(new Date().toLocaleTimeString(), newValue);
  return newValue;
});

这将输出如下内容：

09:51:03 1
09:51:04 2
09:51:05 3
09:51:06 4
09:51:07 5

注意：此函数只允许查看对象的单个属性，因此，为了查看所有对象属性，您需要遍历它们并为每个属性调用 watch()。 p>

【讨论】：

【解决方案3】：

啊是的 object.watch 。不过用的不是很频繁！这是我认为您正在寻找的更详细的帖子Listening for variable changes in JavaScript or jQuery

【讨论】：