Watch a variable's value with live expressions
Live expressions allows us to watch a JavaScript expression over time. The expression is evaluated and pinned at the top of the Console. It shows the value of expression in real-time.
It's very useful in some use cases such as
- Track CSS properties that are changed during an animation
- Track the current active element
- See the values of variables in real time without logging them
For example, when using the `console.log`
function inside the handlers of the `mousemove`
, `scroll`
events, we can see a lot of logged values in the Console. It's not easy for us to scan the values when the event occurs.
window.addEventListener('scroll', (e) => {
console.log(window.scrollY);
});
<video loop muted controls>
<source src="/img/busy-console.mp4" type="video/mp4">
</video>
Using live expressions can help us get rid of the issue. To use it, click the eye icon under the Console. Enter the variable that you want to watch in the textbox, and click outside of the textbox to save it. You can add as many expressions as you want.
From now on, you'll see the new value of expression whenever it changes.
<video loop muted controls>
<source src="/img/live-expressions.mp4" type="video/mp4">
</video>
See also