Overview Open Chrome DevTools What's New In DevTools DevTools Engineering Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools What's New In DevTools DevTools Engineering Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Watch variables in Sources

Published on

Warning

Warning: This page is deprecated. See following section for up-to-date information: Watch the values of custom JavaScript expressions

Chrome DevTools allows you to easily see multiple variables throughout your application. Watching variables within Sources keeps you out of the console and focused on improving your code.

The Sources panel provides the ability to watch variables within your application. This is located in the watch section of the debugger sidebar. By taking advantage of this functionality you will not need repeatedly log objects to the console.

Watch section of debugger

Adding variables #

To add a variable to the watch list use the add icon to the right of the section heading. This will open an inline input where you provide the variable name to watch. Once it is filled in press your Enter key to add it to the list.

Add to watch list button

The watcher will show you the current value of the variable as it is added. If the variable is not set or can't be found it will showfor the value.

Undefined variable in the watch list

Updating variables #

Variable values may change as an application continues to operate. The watch list is not a live view of the variables unless you are stepping through execution. When you are stepping through execution using breakpoints, the watched values will update automatically. To manually recheck the variables in the list press the refresh button to the right of the section heading.

Refresh watch variables button

As the refresh is requested the current application state is rechecked. Every watched item will be updated with the current values.

Updated variable being watched

Removing variables #

To keep what you are looking at minimal for faster work you may need to remove variables from the watch list. This can be done by hovering the variable and then clicking the removal icon that appears to the right.

Hover variable to remove from watch list

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.