View list of all JavaScript variables in Google Chrome Console

In the Google Chrome Console, viewing all JavaScript variables in the current scope can be achieved through several methods:

1. Using console.dir(window) to view global scope variables

In the browser's JavaScript environment, variables in the global scope are typically attached to the window object. You can type console.dir(window) in the console to view all properties and methods attached to the global object, including the global variables you defined.

For example, if you define a variable var myVar = 123; in the global scope, you can view it in the console using window.myVar or console.dir(window).

2. Using console.table(window) to view in a table format

Similar to console.dir(), the console.table() method provides a way to display object properties in a tabular format. Using console.table(window) will list all properties and values of the window object in a table, including custom JavaScript variables.

3. Viewing scope variables in debug mode

When debugging code using the Sources tab in Chrome DevTools, you can see all variables in the current scope in the "Scope" panel on the right. This includes global variables and local variables within the current breakpoint scope.

• Open DevTools (F12 or right-click and select Inspect)
• Navigate to the Sources tab
• Set a breakpoint in your code
• When the code execution reaches the breakpoint, view the "Scope" panel on the right

4. Using the command-line API

Chrome DevTools' command-line API provides a method keys() that can be used to view all keys of an object. When applied to the window object, it lists all global variables. For example:

javascript
console.log(keys(window));

Example

Suppose you run the following JavaScript code on the page:

javascript
var globalVar = "Hello, world!";
function myFunction() {
    var localVar = "Hello, local!";
}

Using console.dir(window) in the Chrome console, you will see globalVar listed among the properties, but localVar will not appear because it is not in the global scope.

In summary, viewing JavaScript variables depends on the scope you want to inspect. Using the methods above, you can effectively view and debug variables in your JavaScript code.