CODEWITHSUNDEEP
javascriptecmascript-6google-chrome-devtools
jeetaz
jeetaz

Reputation: 731

A way to reset Chrome DevTools console's context

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?

Upvotes: 10

Views: 10081

Answers (4)

aerioeus
aerioeus

Reputation: 1410

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

Upvotes: 1

Niladri Basu
Niladri Basu

Reputation: 10624

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.

Upvotes: 4

Estus Flask
Estus Flask

Reputation: 222626

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 {}`

Upvotes: 13

Alex
Alex

Reputation: 2232

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

Upvotes: 0

Related Questions