在Google Chrome控制台中查看所有JavaScript变量的列表

在Google Chrome的控制台 (Console) 中查看所有当前作用域中的JavaScript变量，可以通过几个不同的方法来实现：

1. 使用 console.dir(window) 查看全局作用域变量

在浏览器的JavaScript执行环境中，全局作用域中的变量通常挂载在 window 对象上。你可以在控制台中输入 console.dir(window) 来查看所有挂载在全局对象上的属性和方法，其中就包括了你定义的全局变量。

例如，如果你在全局作用域定义了变量 var myVar = 123;，则可以通过 window.myVar 或 console.dir(window) 来在控制台中查看到这个变量。

2. 使用 console.table(window) 以表格形式查看

类似于 console.dir()，console.table() 方法提供了一种以表格形式展示对象属性的方法。输入 console.table(window) 会以表格的形式列出 window 对象的所有属性和值，包括自定义的JavaScript变量。

3. 调试模式下查看作用域变量

当你在Chrome DevTools中使用Sources标签页进行代码调试时，可以在右侧的"Scope"面板中看到当前作用域中的所有变量。这包括全局变量和当前断点作用域内的局部变量。

• 打开DevTools（F12或右键检查）
• 转到Sources标签
• 在你的代码中设置断点
• 当代码执行到断点时，查看右侧的"Scope"面板

4. 使用命令行API

Chrome DevTools的命令行API提供了一种方法 keys()，可以用来查看对象的所有键，如果用于 window 对象，也可以列出所有的全局变量。例如：

javascript
console.log(keys(window));

实例

假设你在页面上运行了如下JavaScript代码：

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

在Chrome控制台使用 console.dir(window)，你将能看到 globalVar 出现在列出的属性中，但 localVar 不会显示，因为它不在全局作用域中。

总之，查看JavaScript变量主要取决于你想查看的作用域。通过上述方法，你可以有效地查看和调试JavaScript代码中的变量。