一种重置 Chrome DevTools 控制台上下文的方法

Question

Chrome > DevTools > 控制台中是否有任何功能可以清除/重置/删除在通过它进行测试时声明的变量和函数（就像调用 clear、清除日志一样）？

比如说，我有一个用 let keyoword 声明的变量..

let str = "Hello";

..我通过控制台运行一次，然后再次通过控制台重新运行相同的代码。

是的，它会按预期抛出错误“标识符'str'已经被声明”，因为变量已经被声明并且不能再次声明（不像用 var 关键字声明它）所以重新运行通过控制台代码，我必须刷新重置框架/目标上下文的页面。

还有其他选择吗？

Answer 1

这很简单：

1. 打开浏览器窗口
2. 打开开发工具 (F12)
3. 分离开发工具
4. 分配一个变量（全局变量），如

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

5. 清除变量：只需在控制台中输入：location.reload(true);
6. 如果愿意，可以再次分配相同的变量

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

Answer 2

基本上你有两个选择：

1. 最简单的方法：在控制台中执行window.location.reload()。
2. 您可以使用Block scope 或IIFE 模式。

block scope 和 IIFE 将不会像您之前那样在全局范围内声明变量。相反，它将在该范围内声明这些变量。 另外，与 let 不同，var 允许您重新声明它。

Answer 3

正如在 cmets 中已经提到的那样，代码是在全局范围内评估的，因此除了重新加载当前窗口之外，没有办法将使用 let 等声明的变量取消声明为全局变量。

评估

let str = "Hello";

连续总是会触发Identifier 'str' has already been declared错误。

一种解决方法是将代码评估为完整的块范围的 sn-ps：

{
  let str = "Hello";
  console.log(str);
}

请注意，块没有返回值（它们是语句而不是表达式），但块中的最后一个表达式由控制台处理，因此可以省略 console.log。

{ let str = "Hello"; str }

将在控制台中输出Hello。

另外，IIFE 也可以用来返回一个值：

(() => {
  let str = "Hello";
  return str;
})()

根据经验，请尽量避免在控制台中使用块范围声明来避免此问题。这个 sn-p 可以连续评估没有问题：

  var str = "Hello"; // instead of `let str = "Hello"`
  var Foo = class Foo {} // instead of `class Foo {}`

Answer 4

在开发者控制台中声明任何变量或函数时，您所影响的是 global 执行上下文，对于 Web 浏览器来说是 window。

使用console.clear() 会清除控制台内的可见历史记录，但不会删除任何变量定义。

---

let x = 'Hey';
x = null;
x; // Undefined

如果您不想一个一个地手动清除它们，您可以将它们存储到 object 和 null 对象中，而不是像这样的单个变量：

---

let object  = {};
object.name = "Alan";
object.age  = 26;
object = null;
object.name; // Undefined
object.age;  // Undefined

---

示例：

---

let data = {};
data.str = "Answer to life, universe and everything is";
data.int = 42;

console.log(data.str, data.int);

setTimeout(() => {
  console.clear();
  data = null;
  console.log(data.str, data.int);
}, 2000);

---

引用自：Chrome console clear assignment and variables