一种重置 Chrome 开发者工具控制台上下文的方法

Question

Chrome> DevTools>控制台中是否有任何功能可以清除/重置/删除在测试时声明的变量和函数(就像调用清除，清除日志一样(？

假设，例如，我有一个用let keyoword声明的变量。

let str = "Hello";

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

是的，它会按预期抛出错误"标识符'str'已被声明"，因为变量已被声明并且无法再次声明(与使用 var 关键字声明它不同(，因此要通过控制台重新运行代码，我必须刷新重置框架/目标上下文的页面。

还有其他选择吗？

Answer 1

正如注释中已经提到的，代码是在全局范围内计算的，因此除非重新加载当前窗口，否则无法取消声明使用let等声明为全局变量。

评价

let str = "Hello";

连续将始终触发Identifier 'str' has already been declared错误。

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

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

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

{ let str = "Hello"; str }

将在控制台中输出Hello。

或者，IIFE 可用于返回一个值：

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

根据经验，请尝试避免在控制台中使用块范围的声明以避免此问题。可以连续评估此代码段而不会出现问题：

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

Answer 2

基本上你有两个选择：

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

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

Answer 3

这很简单：

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 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