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

Question

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

举个例子，我有一个用 let 关键字声明的变量..

let str = "Hello";

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

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

还有其他选择吗？

Answer 1

正如评论中已经提到的，代码是在全局范围内求值的，所以除了重新加载当前变量之外，没有办法取消声明一个用 let 等声明为全局的变量窗口。

评估

let str = "Hello";

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

一种解决方法是将代码评估为完整的 block 范围片段:

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

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

{ let str = "Hello"; str }

将在控制台输出Hello。

或者，IIFE 可以用来返回一个值:

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

根据经验，尽量避免在控制台中使用 block 范围声明来避免此问题。可以连续评估这个片段没有问题:

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