← #106 Load given characters in a Google font request
#107

Watch a variable's value with live expressions

Topics: 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.

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.

More

Fix a typo or suggest an improvement
#108 Prevent macOS from going to sleep