9

Is there any feature in Chrome > DevTools > console which clears / resets / removes variables and functions declared while testing through it (just like calling clear, clears the logs)?

Let's say, for an example, I have a variable declared with let keyoword.. 

let str = "Hello";

..and I run it through console once and I re run the same code through console again.

Yeah, It would throw an error "Identifier 'str' has already been declared" as expected because the variable has already been declared and it can't be declared again (unlike declaring it with var keyword) so to re run the code through console, I have to refresh the page which resets the context of the frame / target.

Is there any other option?

jeetaz
  • 691
  • 1
  • 6
  • 11
  • 1
    There is a `console.clear()` function that has been added as of November 6, 2012. – Alex Jul 05 '18 at 12:54
  • @Alex The question is NOT about clearing console's logs, but console's context. Please read it again! – jeetaz Jul 05 '18 at 12:56
  • 2
    Possible duplicate of [Chrome console clear assignment and variables](https://stackoverflow.com/questions/34270829/chrome-console-clear-assignment-and-variables) – Andreas Jul 05 '18 at 12:58
  • @Alex OP wants to clear the console context. Variables are still defined – Seblor Jul 05 '18 at 12:58
  • 3
    You cannot re-declare or un-declare variables, and the console code runs in the global scope. The only way to do a reset is `window.location.reload()`. – Bergi Jul 05 '18 at 13:11
  • 1
    @Bergi Yeah, that is what I was looking for if there a way to avoid page refresh but as it runs in global space there isn't. One might want to test through the console, a large amount of code, may be more than once and console won't let you do it which I think is unfortunate but legal, agreed. – jeetaz Jul 05 '18 at 13:17
  • 1
    @jeetaz Then put it inside a block scope so that your `const` and `let` variables stay local. – Bergi Jul 05 '18 at 13:19
  • @Bergi block scope could work, agreed. – jeetaz Jul 05 '18 at 13:36
  • @Bergi Why var str1 = "Hello"; window.str1 works, but let str2 = "Hello again"; window.str2 doesn't when run using console? I thought they both are created in global scope. – jeetaz Jul 05 '18 at 14:30
  • 1
    @jeetaz Because of [a subtle difference](https://stackoverflow.com/q/28776079/1048572) – Bergi Jul 05 '18 at 14:32
  • 2
    [Resetting is no longer necessary](https://stackoverflow.com/a/68355614/1048572), Chrome 80/92 allows redeclarations of lexically scoped variables. – Bergi Sep 04 '21 at 12:29

4 Answers4

13

As it was already mentioned in comments, the code is evaluated in global scope, so there is no way to undeclare a variable that was declared with let, etc. as a global except by reloading current window.

Evaluating

let str = "Hello";

in succession will always trigger Identifier 'str' has already been declared error.

One workaround is to evaluate code as complete block-scoped snippets:

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

Notice that blocks don't have return value (they are statements and not expressions), but the last expression in a block is handled by console, so console.log can be omitted. 

{ let str = "Hello"; str }

will output Hello in console.

Alternatively, IIFE can be used to return a value :

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

As a rule of thumb, try to avoid block-scoped declarations in console to avoid this problem. This snippet can be evaluated without problems in succession:

  var str = "Hello"; // instead of `let str = "Hello"`
  var Foo = class Foo {} // instead of `class Foo {}`
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • var works in succession that is true. I liked the idea of IIFE with return value though. Marking it as answer. But if you think it the other way, for example, overriding a global scoped function declared with let keyword and doing so in succession via console, is not allowed, which is how one test it in general via console. – jeetaz Jul 05 '18 at 14:10
  • *overriding a global scoped function declared with let keyword* - usually you never want to intentionally create a global with `let`, exactly because of the way it differs from `var` (cannot be redeclared, isn't defined on `window`). This is likely the only case where `var` is considered acceptable in ES6. – Estus Flask Jul 05 '18 at 16:20
  • Thank you! Changing all my `let` directives to `var` fixed the issue I was having with persistent unintentionally global-scoped variables. – Eric Hepperle - CodeSlayer2010 Aug 12 '22 at 12:03
4

Basically you have two options:

  1. The easy one: do window.location.reload() in the console.
  2. You can use Block scope or IIFE pattern.

What block scope and IIFE will do is the won't declare the variables in global scope like you were doing. Instead, it'll declare those variable within that scope. Also, unlike let, var lets you re-declare it.

BlackBeard
  • 10,246
  • 7
  • 52
  • 62
1

Thats pretty easy:

  1. open a browser window
  2. open the dev tools (F12)
  3. detach dev tools
  4. assign a variable (global variable) like
let options = {
  title: "Menu",
  width: 100,
  height: 200
};
  1. to clear the variables: just type into your console: location.reload(true);
  2. assign the same variable again if you like
let options = {
  title: "Menu",
  width: 100,
  height: 200
};
aerioeus
  • 1,348
  • 1
  • 16
  • 41
0

What you are affecting when declaring any variables or functions within the developer console is the global execution context, which for web browsers is window.

Using console.clear() clears the visible history inside of your console but does not remove any variable definition.

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

If you do not want to manually clear all of them one-by-one, you can store them into an object and null the object instead of individual variables like so:

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

Example: 

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

Referenced from: Chrome console clear assignment and variables
Alex
  • 2,164
  • 1
  • 9
  • 27
  • 1
    `delete x` and `delete object` [absolutely do not work](http://perfectionkills.com/understanding-delete/). – Bergi Jul 05 '18 at 13:20