实施例

Question

是否有任何工具（最好是任何浏览器的扩展/附加组件）允许您实时查看所需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;

10ms：5;

40ms：'someothervalue';

150ms：null

等

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

Answer 1

不同的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()。

Answer 2

啊是对象。守望。但它并不经常使用！以下是我认为您正在寻找Listening for variable changes in JavaScript or jQuery

的更详细信息

Answer 3

Chrome开发者工具为此提供了功能。

插入行

debugger;

紧跟在您感兴趣的变量之后。当您执行页面并打开开发工具时，它将在此处暂停，您可以使用当时的值检查console.log。

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

html：

<input onClicked={myFunc} />

JS

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

这会将事件记录到控制台，但是如果您尝试深入浏览，则chrome在单击obj时会对obj进行求值，并且由于它已经消失了，所以它大多为null：

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

JS：

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

让您像按调试器行时一样向下钻取对象

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

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

3 个答案:

实施例