Watch a variable's value with live expressions
Written byPhuoc Nguyen
Created
21 Mar, 2021
Category
Tip
Tags
DevTools
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.js
window.addEventListener('scroll', (e) => {
console.log(window.scrollY);
});
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.
#See also
Questions? 🙋
Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
Newsletter 🔔
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn