Chrome开发者工具中如何将console.log输出的HTML元素存为全局变量？

开发者阿泽

2026-5-15

更简便的Chrome控制台存储HTML元素为全局变量的方法

嘿，这个痛点我太懂了——右键存console.log输出的HTML元素总是不行，用数组包裹确实有点繁琐。这里有几个更高效的办法：

直接用控制台内置占位符赋值全局变量
不管你是在Elements面板选中了目标元素，还是在控制台输出里点选了它，直接在控制台输入：
```
window.myElement = $0
```
这里的$0是Chrome控制台的内置占位符，代表你当前选中的最后一个元素（Elements面板或控制台输出里的选中项都生效）。之后你就能用myElement直接访问这个HTML元素了。要是想更兼容现代环境，也可以用globalThis.myElement = $0——这是ES2020定义的标准全局对象。
输出元素时提前绑定全局
如果你本来就要用console.log输出元素，可以提前把它挂载到全局对象上，省得事后右键操作：
```
window.tempEl = el; // el是你要输出的HTML元素
console.log(tempEl);
```
这样控制台输出后，你直接就能用tempEl访问元素，完全不需要右键存变量的步骤。
复制元素对象快速赋值
要是你已经console.log出了元素，不想改原有代码的话，右键点击控制台里的元素输出项，选择「Copy object」，然后在控制台输入：
```
const myEl = 粘贴复制的内容
```
回车后myEl就是你要的HTML元素了，这个方法适合临时调试应急用。