Javascript 调试：是否可以实时查看JS变量的值？

是否有任何工具（最好是任何浏览器的扩展/附加）允许您实时查看所需JS变量的所有值更改

以前我做过类似的事情（在纯JS中）：

它做到了这一点，但效率当然很低（实际上函数更大，而如果变量是对象，则需要对象复制函数并进一步检查）

更新

我知道控制台工具，但我希望看到更改的历史，如：

someVariable

0ms:

未定义

10ms:

5

40ms:

'someothervalue'

150ms:

null

等等

---

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

啊，是的，object.watch。但是它并不经常使用！下面是一篇更详细的文章，我认为你在寻找什么

不同的DevTools（在Chrome DevTools、Firefox DevTools和Firebug中测试）没有提供实时查看值变化的方法。您始终必须手动刷新其显示

Firefox提供了一个功能（适用于其他浏览器），可以满足您的需要

例子： 这将输出如下内容：

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

---

注意：此函数只允许查看对象的单个属性，因此，为了查看所有对象属性，您需要循环查看它们，并为每个属性调用

watch（）

。

Chrome开发工具具有此功能

插入行

debugger;

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

例如-假设您有一个onClick处理程序，并且希望查看在事件中传递的信息：

html:

这会将事件记录到控制台，但如果您尝试在单击obj时对其进行深入研究，并且由于obj早已消失，因此大部分为空：

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

JS:

允许您按调试器行时的状态向下钻取对象

更多信息请访问chrome开发工具网站：

---

您可以随时打开控制台，转到感兴趣的JavaScript文件并逐步浏览代码。可能可以提供更多帮助，以更详细地描述您需要的内容，但我只需打开浏览器控制台（右键单击->检查元素），并在必要时设置断点。@rshai91，感谢您的回复。我已经更新了这个问题。希望现在更容易理解我想要什么：-）

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

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

debugger;

<input onClicked={myFunc} />

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

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