Debugging: is it possible to see the value of a JS variable in real time?
Is there any tool (preferably an extension / addition to any browser) that allows you to see all changes to the values of the required JS variable in real time?
I used to do something like this (in pure JS):
var someVariable;
var previousValueOfSomeVariable;
var f = function() {
if (previousValueOfSomeVariable != someVariable) {
console.log(Date.now(), someVariable);
previousValueOfSomeVariable = someVariable;
}
}
var TO = setInterval(f, 100);
It did the trick, but was of course inefficient (in fact the function was larger, while it required a function to copy an object if the variable was an object and further check) ...
UPDATE
I know console tools, but I would like to view the change history, for example:
someVariable
0ms: undefined
;
10ms: 5
;
40ms: 'someothervalue'
;
150 ms: null
and etc.
(Milliseconds are given, for example, for purposes not necessarily required). It might be possible to do this in the DevTools console, but I don't know how.
source to share
Various DevTools (tested in Chrome DevTools, Firefox DevTools, and Firebug) do not offer a way to see real-time price changes. You must always manually update their display.
Firefox offers a feature Object.prototype.watch()
( there is a shim for other browsers ) that does what you want.
Example:
test = 0;
setInterval(() => test++, 1000);
window.watch("test", (id, oldValue, newValue) => {
console.log(new Date().toLocaleTimeString(), newValue);
return newValue;
});
This will output something like this:
09:51:03 1
09:51:04 2
09:51:05 3
09:51:06 4
09:51:07 5
Note. This function allows you to view only single properties of an object, so to view all the properties of an object, you need to iterate over and call them watch()
for each one.
source to share
Ah yes object.watch. It isn't used very often though! Here is a more detailed post on what I think you are looking for Listening for Variable Changes in JavaScript or jQuery
source to share
Chrome Dev Tools has functionality for this.
insert line
debugger;
right after the variable you are interested in. When your page starts and development tools are open, it stops there and you can view the console.log with the value it had at that moment.
For example - let's say you have an onClick handler and want to see what information is being passed in an event:
HTML:
<input onClicked={myFunc} />
Js
function myFunc(event){
console.log(event)
}
This will log the event to the console, but if you try to drill down, Chrome evaluates the object when you click on it, and since it's gone a long time ago, it's basically zero:
However, if you're using a debugger, Chrome pauses execution when it hits it, and you can dive into the real event:
JS:
function myFunc(event){
console.log(event);
debugger;
}
Lets you dig deeper into an object as you did when you hit the debugger line
More information on the Chrome Developer Tools site: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
source to share