View list of all JavaScript variables in Google Chrome Console

Deep dive: Let's get hands-on //

Your app's variables: separating the wheat from the chaff

We can filter out only the variables of our interest, those being the ones belonging solely to your application:

// Let's go sightseeing only in our neighborhood
for (const prop in window) {
  if (window.hasOwnProperty(prop)) {
    // Say hello to the locals!
    console.log(prop);
  }
}


The for-in loop combined with window.hasOwnProperty method provides us with our application-specific variables, excluding the built-in ones.

Runtime exploration: catching variables red-handed

A great debugging technique is to pause the script execution at certain points using Chrome DevTools. Just throw in a debugger; statement or set a breakpoint, and once the code execution is interrupted, all the currently in-scope variables show up in the Scope panel.

Handy console methods to your rescue

Built-in JavaScript methods like keys(window) and dir(window) can immensely simplify the variable hunting process:

• keys(window): It returns an array of strings, giving away all enumerable properties of the window object.
• dir(window): This one provides us with an interactive list of properties. If you're curious to know what's within those objects, dir(window) is your best buddy.

When life gives you variables, make bookmarklets

You can fashion a bookmarklet to run a script on the fly that filters out and logs your global variables. It's the same as creating a shortcut on your home screen for a frequently visited site.

Navigating the labyrinths of global variables:

Containers for global variables or objects are, by their very nature, a deep abyss. When venturing into these mysterious collections, brace yourself for a treasure trove of information - most of which can be overwhelmingly unrelated! Thus, always evaluate whether a precise filter would be more fruitful.

Chrome DevTools: The Swiss Army Knife

Making full use of Chrome's DevTools can be a game-changer. They allow you not just to view variables but also to examine the global scope at breakpoints, providing context-relevant information far more efficiently than a monolithic list of every variable.

Practical considerations and tricks

The giant leap for large applications

For more complex applications, consider tagging your global variables or employing a namespace pattern to group them logically. This organization will make your variable hunt less time-consuming and more productive.

Measure, optimize, repeat

The console also proves helpful to check performance, identify memory leaks, and so on. Keep an eye on object allocations and do regular performance profiling.

Script execution in an alternate universe

If your script runs within an iframe or multiple execution contexts, select the right context in the DevTools Console dropdown to quench your thirst for global variables.