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

Question

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

让我们说,举个例子,我有一个用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 {}`