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

Google Chrome 浏览器的控制台是开发者经常使用的工具之一。在控制台中，我们可以检查 DOM、调试 JavaScript 代码、执行代码片段等等。

有时候，我们想要查看当前页面中所有的变量及其对应的值，这时候我们可以使用 JavaScript 在控制台中快速地生成一个变量列表。

实现方法

要在控制台中生成变量列表，我们需要执行以下三个步骤：

1. 获取当前 window 对象中所有的属性名
2. 循环遍历这些属性名，然后获取它们所对应的值
3. 将属性名和对应的值存放在一个对象中，最后使用 console.table 方法将这个对象打印成一个表格

下面是具体实现的 JavaScript 代码：

// 获取 window 对象中所有的属性名
const properties = Object.getOwnPropertyNames(window);

// 遍历属性名，获取它们所对应的值
const values = properties.map(prop => window[prop]);

// 将属性名和对应的值存放在一个对象中
const variables = {};
properties.forEach((prop, index) => variables[prop] = values[index]);

// 使用 console.table 方法将变量列表打印成一个表格
console.table(variables);

结果示例

运行以上代码后，我们可以在控制台中看到一个表格，其中列出了当前页面中所有的变量及其对应的值。这个表格可以方便地帮助我们查看当前页面中所有的变量，从而更好地进行调试和开发工作。

以下是一个结果示例：

| | | | ---------- | ---------- | | Infinity | Infinity | | NaN | NaN | | undefined | undefined | | window | [object Window] | | document | [object HTMLDocument] | | console | [object Console] | | etc. | etc. |

注意事项

值得注意的是，由于页面中的变量很多，控制台可能无法打印所有的变量。为了避免这种情况，我们可以使用 console.dir 方法将变量列表打印成一棵树形结构，这样更加清晰易读。

另外，有些变量的值可能会非常复杂，比如说包含很多子属性的对象，这时候我们可以使用 JSON.stringify 方法将其转换成字符串，并使用 console.log 打印出来，这样可以更加方便地查看其结构和内容。